FontViewer

In the previous tutorials, we learnt how to create a WPF application using visual studio templates, and we also learnt how to use some basic controls and set their properties. Now, let us make a cool FontViewer program as the next step. This program is taken from Sams Teach Yourself WPF in 24 Hours book – an excellent resource for beginners to WPF.

So, you open Visual Studio, create a WPF application using the WPF Application template and call it “FontViewer”.

Now, open the MainWindow.xaml and change Title to “FontViewer”. Now when you run your application, your window will be called FontViewer. This is not strictly necessary but giving a meaningful title makes the application more usable. You can also change the height and width if you wish.

Now, we will begin by using a DockPanel instead of Grid. It is also possible to use Grid here but unless we use rows and columns, so let us start with something simpler. The DockPanel allows elements to be docked to the left, right, top etc easily. So, for now, delete the grid and instead put a DockPanel there:
<DockPanel></DockPanel>

Ok, now let us create a border around the panel. Within the panel, put a border:
<Border DockPanel.Dock=”Top” BorderThickness=”1″ Background=”AliceBlue”></Border>

The DockPanel.Dock=”Top” tells the compiler that the element has to be docked to the top. Basically, the DockPanel docks the elements to various positions in order of precedence and the next element takes up the remaining space. So, now the Border is docked to the top. If you create one more element with DockPanel.Dock set to top, that element will be docked to the top of whatever space is remaining.

Before we proceed further, it is useful to know that the DockPanel.Dock is an attached property. Attached properties are basically ways of including some additional information about an element. A point to remember here is that this is different from setting complex properties simply because the attached properties do not live on the object that they are being set on. In fact, they are called “attached” properties because they are declared by one control but attached to another. For example, in the above case, although the property is being set on the Border element, it does not belong to it. Rather, it is a property declared by its parent i.e. the DockPanel. Attached properties take on the form of Source.Property, in which source is what declares the property. Due to this behaviour of attached properties, setting them through code is also different from setting complex properties. Instead of simply setting the property, we would use get and set methods on the source element to set the value like this:

DockPanel.SetDock(myBorder, Dock.Top)

Proceeding further, let us now put the necessary controls inside the DockPanel. First, we put a textblock to tell the users to select an item, and then we put a list that will display the fonts installed on the system as shown:

<TextBlock x:Name=”mytextblock” Width=”200″ Text=”Please select an item from the list”></TextBlock>
<ListBox x:Name=”mylistbox” DockPanel.Dock=”Left” Width=”200″ ItemsSource=”{x:Static Fonts.SystemFontFamilies}”></ListBox>

Now, the textblock is simple enough to understand. What is slightly harder is the listbox. We have given it a name, we have set the width and we have docked it to the left. Now, we have to populate it. This is where the ItemSource comes in and it is quite self-explanatory too. The main unique thing here is the x:Static attribute.

x:Static is one of the many attributes supported by WPF. It essentially allows you to insert a static value into a xaml. Now, the .NET Framework has a class called System.Windows.Media.Fonts, which has a static property called SystemFontFamilies which gives the fonts installed on the system. When you invoke this property, the ListBox gets each instance that is returned and converts it into a string using ToString () method. So essentially, you get a list of all the fonts on the system in string format which is then displayed when you run the application:

WPF3_1

A useful thing to know here is that you can also insert your own static values into the xaml using this syntax. For instance, instead of saying “Please select an item from the list” in the textblock text, if you wanted it to display the same using a static string (you may want to do this when you want to use the same string in multiple places), you could use something like this:

<TextBlock Text=”{x:Static FontViewer:MainWindow.SomeConstantString}” />

Of course, within the MainWindow.xaml.cs i.e the code-behind file, you would have a line like this (within the partial class):

public static readonly string SomeConstantString = “Please select an item from the list”;

You will also have to import the namespace into the xaml like this:

xmlns:A=”clr-namespace:FontViewer”

Using the clr-namespace, you can map any namespace present within the assembly that has exposed public types as elements.

Ok, so now we have created a list and displayed the fonts. Now, let us allow the users to type something and show it in the font they select. So, first create a Textbox where they will type:

<TextBlock x:Name=”mysecondtextblock” DockPanel.Dock=”Top” Height=”150″>Default text</TextBlock>

The MinLines property is similar to “AllowMultilines” in Windows forms. We have also wrapped the text for better visibility and set it to accept enter.

Now, we need to create a preview pane which will display the text typed by the user in the above textbox in the font that they select. So, we add a textblock at the top of the right side:

<TextBlock x:Name=”mysecondtextblock” DockPanel.Dock=”Top” Height=”150″ TextWrapping=”Wrap” Text=”{Binding ElementName=mytextbox, Path=Text}” FontFamily=”{Binding ElementName=mylistbox, Path=SelectedItem}”></TextBlock>

We have created a textblock, set its height and docked it to the top. Then comes the interesting part. We have essentially used Binding to bind the text in the textblock to what the user types in the textbox and font to what the user selects from the listbox.

When you say Text=”{Binding ElementName=mytextbox, Path=Text}”, you are essentially saying that the Text of the Textblock is bound to Text property of the element “mytextbox” (which is the name of the textbox at the bottom where the user types). So when the text in the box changes, the text in this block also changes. Similarly, when you say FontFamily=”{Binding ElementName=mylistbox, Path=SelectedItem}, you are telling the compiler that the Font of the textblock is bound to the SelectedItem in mylistbox (which is the list of all fonts). So when the font selection changes in that list, the font of the text changes in the block. The binding basically synchronizes the two. Do you get the idea??

Now, run the program and you can see the text that you type in the textbox displayed in the preview pane at the top. When you select a font from the list, the text is displayed in that particular font in the preview pane. If you select a different font from the list, the font of the text changes too. Here are the results with two fonts (Batang and Rage):

WPF3_3

WPF3_2

You can see that we have added/changed a few things in the final program for polishing effect. For example, in the first Textblock, we have changed the message (using the static string) and added TextWrapping=”Wrap”. This is to make the interface look better and more meaningful. Also, in the textbox, we have added “Default text” as the content so that users can see how different fonts will look without typing anything. We have also added a margin to the DockPanel which makes the UI look less crowded and shows the top and bottom of the list. We have also put the first TextBlock inside the border to make it look neater.

You can further refine the program by allowing users to also select the font size from a drop down along with the font type (Hint: Use Combobox and bind it’s text to the textbox text. Alternately, you can also bind SelectedItem.Content). Or you can allow them to choose colors, weight, size…anything. Use your imagination and try different things.

In the next tutorial, we will learn about application layouts and different type of panels.

Leave a Reply

Your email address will not be published. Required fields are marked *


− 2 = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>