Click here to Skip to main content
15,793,260 members
Articles / Desktop Programming / WPF

Build A Font Viewer Application in WPF Without Writing Any C# Code

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
25 Jul 2014CPOL4 min read 11.2K   3  
How to build a font viewer application in WPF without writing any C# code


You can download the demo application (zipped EXE) from Github or the whole source code project (Visual Studio project solution), or continue reading to see how it was built step by step.

What Is This For An Application?

My version of the FontViewer application as initially designed and developed in the book Sams Teach Yourself WPF in 24 Hours, with added IntegerUpDown control from Extended.Wpf.Toolkit NuGet package (for changing the font size).


I’m in no way affiliated with Amazon or this book, I just think it’s great, for beginners especially. This StackOverflow question may be useful if you’re searching for a good book on learning WPF.

Let’s Build It Step By Step

First, create a new WPF Application project in Visual Studio (File -> New Project) as shown in the image below, and name it FontViewer:


Full Source Code Listing

Now, copy the following XAML code in your MainWindow.xaml file (explanation comes after):

<Window x:Class="FontViewer.MainWindow"
        Title="FontViewer" Height="450" Width="600">
    <DockPanel Margin="8">
        <Border DockPanel.Dock="Top"
                Margin="0 0 0 8">
            <TextBlock FontSize="14" TextWrapping="Wrap">
                <LineBreak />
                Select a <Underline>font</Underline> 
                to view from the list <Italic>below</Italic>.
                <Span FontSize="10">
                    You can change the text by typing in the region at the bottom.
        <ListBox x:Name="FontList" 
                 DataContext="{x:Static Fonts.SystemFontFamilies}"
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Count, Mode=OneTime}"/>
                        <TextBlock Text=" fonts are installed."/>

        <StackPanel Orientation="Horizontal"  
            <TextBlock Margin="0 0 5 0">Font size:</TextBlock>
            <xctk:IntegerUpDown x:Name="FontSize"

        <TextBox x:Name="SampleText"
                 ToolTip="Type here to change the preview text."
            The quick brown fox jumps over the lazy dog.

        <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                   FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
                   FontSize="{Binding ElementName=FontSize,Path=Value}"

Code Decomposition

You can see that our main container is DockPanel, which is useful when you want to “dock” certain elements to the sides (top, bottom, left, right) of the window.

Next comes the Border element which contains instructions (on how to use the application) written inside the TextBlock element. If you’re familiar with CSS, the attributes on the Border element should seem natural to you. However, one novelty is the DockPanel.Dock=”Top” property which basically tells the Border element to position itself at the top of the parent DockPanel (in which it is contained).

To populate the list of available fonts which are installed on the machine, we’re using the ListBox element. It’s docked to the left, its name variable (by which we can reference it later in the code) is set to FontList (x:Name=”FontList”), and most importantly, the ItemSource attribute is set to {x:Static Fonts.SystemFontFamilies} which basically tells the ListBox that it should display all the items which are returned from the static property SystemFontFamilies provided by .NET Framework.

After the ListBox comes a StackPanel which by default “stacks” elements that it contains one below the other. By using the Orientation property (Orientation=”Horizontal”), we can make the contained elements align one next to the other.

Let’s Mix It Up A Little

Since we want to have a numeric Up/Down control as we do in WinForms, we will have to download additional components as it doesn’t exist in the standard WPF library. The discussion about this can be found on Stack Overflow. The solution is to go to Tools -> NuGet Package Manager -> Manage NuGet Packages… as shown in the illustration below:


On the form that shows up after this, you have to do a search for Extended.Wpf.Toolkit and Install it:


As stated in the installation instructions, you have to:

  1. Add a using statement (“using Xceed.Wpf.Toolkit;” for most of the controls, “using Xceed.Wpf.DataGrid;” for the datagrid control) to the top of .cs files
  2. Add a new xmlns (xmlns:xctk=”” for most of the controls, xmlns:xcdg=”” for the datagrid control) to the top of XAML files
  3. Remember to use the namespace prefix (in the above example, <xctk: …> or <xcdg: …>) in the body of your XAML.

As you can see in the full code listing, I added the needed xmlns in MainWindow.xaml. However, the needed using statement (using using Xceed.Wpf.Toolkit;) has to be added in the MainWindow.cs (right click on the MainWindow.xaml file and select View Code) file.

After this installation and proper including is done, you can use the new IntegerUpDown control in your XAML file like this:

<xctk:IntegerUpDown x:Name="FontSize"

Increment attribute tells the control by which amount to increment/decrement the number which is set by default in Value attribute.

Let’s Enter Some Text

In order for the user to be able to enter some text and then see how the text looks like in the particular font, we’re using the TextBox element. Most important attribute is the x:Name (x:Name=”SampleText”) because we’ll use it to reference it in the TextBlock below.

Show Me How the Font Looks Like

We’re using the TextBlock element to show the user how the text which he entered in the TextBox looks like in the font which he selected from the ListBox. Here lies the core of our application as here we’re setting the so called Data Binding. We’re binding the Text attribute of the TextBlock to whatever is entered in the TextBox named SampleText (Text=”{Binding ElementName=SampleText, Path=Text}”). Next, we’re binding the FontFamily to the selected item in the ListBox named FontList (FontFamily=”{Binding ElementName=FontList,Path=SelectedItem}”), and finally we’re binding the FontSize to the Value of the IntegerUpDown control named FontSize.

Wrap Up

If you run your application now, you’ll see it works as expected and just like that you’ve made your very own version of the FontViewer application, you’ve seen how to install additional components from within Visual Studio using NuGet package manager, and you’ve seen how to set the data binding between elements.

Hope this proved to be helpful and got you excited about WPF in that manner that you’ll now go and do further exploring on your own.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Software Developer (Senior)
Croatia Croatia
I’m an engineer at heart and a jack of all trades kind of guy.

For those who care about titles, I hold a masters degree in computing from FER (and a black belt in karate, but that’s another story…).

During the last years, worked in a betting software industry where I made use of my knowledge in areas ranging from full-stack (web & desktop) development to game development through Linux and database administration and use of various languages (C#, PHP, JavaScript to name just a few).

Currently, I’m a senior software engineer at TelTech, where we make innovative communications apps, and I <3 it.

Lately, I’m very passionate about Ionic framework and am currently in the top 3 answerers on StackOverflow in Ionic framework. I wrote a book about Ionic framework which you can get for free on Leanpub: Ionic framework – step by step from idea through prototyping to the app stores.

Other technical writing:

+ wrote a book Getting MEAN with MEMEs
was a technical reviewer for a book Deploying Node published by Packt
was a technical reviewer for a book Getting started with Ionic published by Packt
After writing 300 posts, this is why I think you should start blogging too

Come and see what I write about on my blog.

Comments and Discussions

-- There are no messages in this forum --