If you haven't looked at part 1 of this series, you might want to go back and check it out first. Also, all code here is based on VB.NET 2008 Express, to be certain that you can use totally free software.
This is a good time to remind you that you really need the latest version of VB.NET, VB.NET 2008, to do WPF applications. I'm using VB.NET 2008 Express Edition here. You can download that free of charge from Microsoft. Just search for the name at Microsoft.com to find the download page.
In part 2 of this series, a "Hello World" application was shown that used the ability of WPF to vary the opacity of a WPF Label component, so we won't do that one again. In fact, you don't even need Visual Basic at all to display "Hello World" in XAML. Simply add this XAML code to a text file in Notepad ...
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="Hello From About Visual Basic" />
</Page>
Save the file as AVBHello.xaml and double click the file. You should get a nice display in your browser. (Note that not all browsers are XAML compatible!)
--------
Click Here to display the illustration
Click the Back button on your browser to return
--------
Because XAML is such a fundamental part of coding WPF and because it represents such a radical change from the past, this segment of the tutorial is going to develop an application entirely in XAML. But we're going to use the VB.NET 2008 Express Edition to do it. The goal is to learn about XAML and VB.NET at the same time.
As programmers, we will usually work primarily with the VB.NET code behind file. But in this example, we'll work with the Designer built into VB.NET 2008 Express and the xaml file. Notice that the components and properties are actually XML elements.
Just as in Part 1, start the application by selecting WPF Application in VB.NET 2008 Express. Name the application AVBFontViewer. The files that you see in Solution Explorer are significantly different than the ones you see for a Windows Forms project. In particular, as detailed in Part 1, every XAML file has a paired code-behind file.
--------
Click Here to display the illustration
Click the Back button on your browser to return
--------
WPF and XAML are completely new and, considering the complexity of these tools, it's a testament to the skill of the Microsoft designers and programmers that it works as well as it does. But to illustrate some of the problems, let's first change the name of the WPF window.
First, change the file name of the window from the default "Window1.xaml" to "AVBWindow.xaml" in Solution Explorer. (Right-click the file and select "Rename".) Note that the paired code-behind file changes automatically. But that's as much help as you get.
The file Application.xaml contains a reference to this window. You have to change StartupUri="Window1.xaml" to StartupUri="AVBWindow.xaml" manually. The file AVBWindow.xaml.vb contains a class named Window1. This has to be changed manually too. Finally, AVBWindow.xaml contains a reference to this class. Change ...
Window x:Class="Window1"
to
Window x:Class="AVBWindow"
It doesn't affect the way the application runs, but you might as well change the Title attribute too:
Title="About Visual Basic Font Viewer"
I expect that future versions of VB.NET will probably have things like this upgraded.
Check the XAML code window in the Designer and you'll notice that the default application uses a Grid control. Delete this control in the Design window and note that VB.NET deletes it from the XAML window at the same time. We're going to use a different control, DockPanel. Drag one from the Toolbox onto the form. The default looks like this:
<DockPanel Height="100" Name="DockPanel1" Width="200" />
You can change the properties of components like DockPanel exactly as you did with Windows Forms. One big change is that there are a lot more of them and therefore a lot more design freedom. Another big change, however, is that since the properties are actually elements in an XML file, there are some things that you can only do there. In this particular case, we're going to use a Border element to specify most of the properties. So drag a Border from the Toolbox inside the DockPanel. Change the properties to:
<DockPanel>
<Border
BorderBrush="DarkRed"
BorderThickness="3"
Padding="8">
</Border>
</DockPanel>
Notice that we don't actually need the Height, Width, or Name attributes.
This appllication will display the available system fonts from a collection that is .NET makes available to you. To hold the collection, drag a ListBox to the XAML code window. This lets you position it exactly where you want it with respect to the other components. It's easier to make a space for it before you drag it to where you want it.
--------
Click Here to display the illustration
Click the Back button on your browser to return
--------
To illustrate a self closing XML element, recode the Label in the XAML code window like this:
<ListBox />
The ending "/" character makes this element self-closing. No ending tag is required.
Now you can add attributes inside the element. We're only going to add one, but it might seem like black magic to you. Add this code to the ListBox element:
<ListBox
ItemsSource="{x:Static Fonts.SystemFontFamilies}"
/>
The items that a ListBox should display are coded in the ItemsSource property. .NET provides a Static property with a collection of the fonts. By default, ToString is called on each member of the collection and that method returns the Name property of the font.
The end result displays a nice view of all of the system fonts installed.
--------
Click Here to display the illustration
Click the Back button on your browser to return
--------
The 'black magic' that was used to put the collection of fonts into the listbox is called "data binding" in WPF. Part 4 of this series tells you more about it.
