{"id":492,"date":"2014-07-25T11:11:05","date_gmt":"2014-07-25T11:11:05","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=492"},"modified":"2015-08-10T07:09:13","modified_gmt":"2015-08-10T07:09:13","slug":"build-a-font-viewer-application-in-wpf-without-writing-any-c-code","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/codeproject\/build-a-font-viewer-application-in-wpf-without-writing-any-c-code\/","title":{"rendered":"How to build a font viewer application in WPF without writing any C# code"},"content":{"rendered":"

TL;DR<\/strong><\/h2>\n

You can download from Github<\/a> the demo application (zipped exe) or the whole source code project (Visual Studio project solution), or continue reading to see how it was built step by step.<\/p>\n

What is this for an application?<\/h2>\n

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

Disclamer<\/h2>\n

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

Let’s build it step by step<\/h2>\n

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

\"FontViewer_1\"<\/a><\/p>\n

Full source code listing<\/h3>\n

Now, copy the following\u00a0XAML code in your MainWindow.xaml file (explanation comes after):<\/p>\n

<Window x:Class=\"FontViewer.MainWindow\"\r\n        xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\r\n        xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\r\n        xmlns:xctk=\"http:\/\/schemas.xceed.com\/wpf\/xaml\/toolkit\"\r\n        Title=\"FontViewer\" Height=\"450\" Width=\"600\">\r\n    \r\n    <DockPanel Margin=\"8\">\r\n        <Border DockPanel.Dock=\"Top\"\r\n                CornerRadius=\"1\"\r\n                BorderThickness=\"2\"\r\n                BorderBrush=\"Black\"\r\n                Background=\"AliceBlue\"\r\n                Padding=\"8\"\r\n                Margin=\"0 0 0 8\">\r\n            <TextBlock FontSize=\"14\" TextWrapping=\"Wrap\">\r\n                <Bold><Italic>Instructions:<\/Italic><\/Bold>\r\n                <LineBreak \/>\r\n                \r\n                Select a <Underline>font<\/Underline> to view from the list <Italic>below<\/Italic>.\r\n                <Span FontSize=\"10\">\r\n                    You can change the text by typing in the region at the bottom.\r\n                <\/Span>\r\n            <\/TextBlock>\r\n        <\/Border>\r\n        \r\n        <ListBox x:Name=\"FontList\" \r\n                 DataContext=\"{x:Static Fonts.SystemFontFamilies}\"\r\n                 DockPanel.Dock=\"Left\" \r\n                 ItemsSource=\"{Binding}\"\r\n                 Width=\"160\">\r\n            <ListBox.ToolTip>\r\n                <ToolTip>\r\n                    <StackPanel Orientation=\"Horizontal\">\r\n                        <TextBlock Text=\"{Binding Path=Count, Mode=OneTime}\"\/>\r\n                        <TextBlock Text=\" fonts are installed.\"\/>\r\n                    <\/StackPanel>\r\n                <\/ToolTip>\r\n            <\/ListBox.ToolTip>\r\n        <\/ListBox>\r\n\r\n        <StackPanel Orientation=\"Horizontal\"  \r\n                    HorizontalAlignment=\"Center\" \r\n                    Margin=\"5\"\r\n                    DockPanel.Dock=\"Top\">\r\n            \r\n            <TextBlock Margin=\"0 0 5 0\">Font size:<\/TextBlock>\r\n            <xctk:IntegerUpDown x:Name=\"FontSize\"\r\n                                Height=\"20\" \r\n                                Width=\"50\"\r\n                                Increment=\"1\" \r\n                                Value=\"20\">\r\n            <\/xctk:IntegerUpDown>\r\n        <\/StackPanel>\r\n\r\n        <TextBox x:Name=\"SampleText\"\r\n                 MinLines=\"2\"\r\n                 Margin=\"5\"\r\n                 TextWrapping=\"Wrap\"\r\n                 ToolTip=\"Type here to change the preview text.\"\r\n                 DockPanel.Dock=\"Top\">\r\n            The quick brown fox jumps over the lazy dog.\r\n        <\/TextBox>\r\n\r\n        <TextBlock Text=\"{Binding ElementName=SampleText, Path=Text}\"\r\n                   FontFamily=\"{Binding ElementName=FontList,Path=SelectedItem}\"\r\n                   FontSize=\"{Binding ElementName=FontSize,Path=Value}\"\r\n                   TextWrapping=\"Wrap\"\r\n                   Margin=\"5\"\/>\r\n    <\/DockPanel>\r\n<\/Window>\r\n<\/pre>\n
Code decomposition<\/h3>\n
You can see that our main container is DockPanel<\/strong>, which is useful when you want to “dock” certain elements to the sides (top, bottom, left, right) of the window.<\/p>\n
Next comes the Border<\/strong> element which contains instructions (on how to use the application) written inside the TextBlock<\/strong> element. If you’re familiar with CSS, the attributes on the Border element should\u00a0seem natural\u00a0to you. However, one novelty is the DockPanel.Dock=”Top”<\/strong> property which basically tells the Border element to position itself at the top of the parent DockPanel (in which it is contained).<\/p>\n
To populate the list of available fonts which are installed on the machine, we’re using the ListBox<\/strong> element. It’s docked to the left, its name variable (by which we can reference it later in the code) is set to\u00a0FontList<\/strong> (x:Name=”FontList”), and most importantly the ItemSource<\/strong>\u00a0attribute is set to\u00a0{x:Static Fonts.SystemFontFamilies}<\/strong>\u00a0which basically tells the ListBox that it should display all the items which are returned from the static property SystemFontFamilies provided by\u00a0.NET framework.<\/p>\n
After the ListBox comes a StackPanel<\/strong>\u00a0which by default “stacks” elements that it contains one below the other. By using the Orientation<\/strong>\u00a0property (Orientation=”Horizontal”) we can\u00a0make the contained elements align one next to the other.<\/p>\n
Let’s mix it up a little<\/h3>\n
Since we want to have a numeric Up\/Down control as we do in WinForms we will have to download additional component as it doesn’t\u00a0exist in the standard WPF library. The discussion about this can be found on Stack Overflow<\/a>. The solution is to go to Tools -> NuGet Package Manager -> Manage NuGet Packages… as shown on the illustration below:<\/p>\n
\"FontViewer_3\"<\/a><\/p>\n
On the form that shows up after this you have to do a search for\u00a0Extended.Wpf.Toolkit <\/strong>and Install it:<\/p>\n
\"FontViewer_2\"<\/a><\/p>\n
As stated in the installation instructions<\/a>\u00a0you have to:<\/p>\n
    \n
  1. Add a using<\/strong> statement (“using Xceed.Wpf.Toolkit;<\/strong>” for most of the controls, “using Xceed.Wpf.DataGrid;” for the datagrid control) to the top of .cs<\/strong> files
    \n<\/strong><\/li>\n
  2. Add a new xmlns<\/strong> (xmlns:xctk=”http:\/\/schemas.xceed.com\/wpf\/xaml\/toolkit”<\/strong> for most of the controls, xmlns:xcdg=”http:\/\/schemas.xceed.com\/wpf\/xaml\/datagrid” for the datagrid control) to the top of XAML files<\/li>\n
  3. Remember to use the namespace prefix (in the above example, <xctk: …> or <xcdg: …>) in the body of your XAML<\/li>\n<\/ol>\n
    As you can\u00a0see in the full code listing, I added the needed xmlns<\/strong>\u00a0in MainWindow.xaml<\/strong>. However, the needed using<\/strong>\u00a0statement (using using Xceed.Wpf.Toolkit;) has to be\u00a0added\u00a0in the MainWindow.cs\u00a0<\/strong>(right click on the MainWindow.xaml file and select View Code<\/strong>) file.<\/p>\n
    After this installation and proper including is done, you can use the new IntegerUpDown<\/strong> control in your XAML\u00a0file like this:<\/p>\n
    <xctk:IntegerUpDown x:Name=\"FontSize\"\r\n                    Height=\"20\" \r\n                    Width=\"50\"\r\n                    Increment=\"1\" \r\n                    Value=\"20\">\r\n<\/xctk:IntegerUpDown><\/pre>\n
    Increment<\/strong> attribute tells the control by which amount to increment\/decrement the number which is set by default in Value<\/strong>\u00a0attribute.<\/p>\n
    Let’s enter some text<\/h3>\n
    In order for the user to be able to enter some text and then see how\u00a0the text looks like in the particular font, we’re using the TextBox<\/strong> element. Most important attribute is the x:Name<\/strong> (x:Name=”SampleText”) because we’ll use it to reference it in the TextBlock below.<\/p>\n
    Show me how the font looks like<\/h3>\n
    We’re using the TextBlock<\/strong> 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<\/strong>. We’re binding\u00a0the Text<\/strong> attribute of the TextBlock to\u00a0whatever is entered in the TextBox named SampleText (Text=”{Binding ElementName=SampleText, Path=Text}”). Next, we’re binding\u00a0the FontFamily<\/strong> to the selected item in the ListBox named FontList (FontFamily=”{Binding ElementName=FontList,Path=SelectedItem}”), and finally we’re binding the FontSize<\/strong> to the Value of the IntegerUpDown\u00a0control named FontSize.<\/p>\n
    Wrap up<\/h2>\n
    If you run your application now you’ll see it works as expected and just like that you’ve made your very own\u00a0version 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.<\/p>\n
    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.<\/p>\n","protected":false},"excerpt":{"rendered":"
    TL;DR You can download from Github the demo application (zipped exe) or the whole source code project (Visual Studio project solution), or continue reading to see how it…<\/p>\n","protected":false},"author":1,"featured_media":548,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,33],"tags":[],"class_list":["post-492","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeproject","category-wpf"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=492"}],"version-history":[{"count":10,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/492\/revisions"}],"predecessor-version":[{"id":2036,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/492\/revisions\/2036"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/548"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=492"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=492"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}