WPF, or Windows Presentation Foundation, is a fundamental component of the new .NET 3.0 framework. It offers a huge amount of potential for creating whizzy new user interfaces, but can be a little daunting to the first time developer. In this post I'm going to show you the building blocks of a basic WPF application.
In order to build a WPF application you need the .NET 3.0 framework and the Windows SDK. It's also helpful if you have Visual Studio - you can build applications from the command-line, but in all these examples I'll be using Visual Studio. You can use Visual Studio 2005, or the free Visual Studio Express products. You can get everything you need from MSDN; it's recommended you install Visual Studio before the framework and SDK. Once you have an appropriate development environment set up, you can begin developing your first WPF application.
Start Visual Studio, and select File -> New -> Project. Under Project types select Visual C# / NET Framework 3.0, and then in the right-hand pane select Windows Application (WPF). Hit OK once you've chosen a name for your new WPF project.
Once you've created your new WPF project, you should see something like the following screenshot.
As with a normal Windows Forms application we have a form on the screen, which we can drag and drop controls onto in order to create our application. However, underneath we also have a bunch of XML code, and this in fact is the markup representation of our form. This markup code is written in eXtensible Application Markup Language, or XAML. XAML is a powerful XML based declarative language, which can be used for defining objects and their properties. Whilst XAML is not specific to WPF, it's primary use is currently in defining the visual elements of WPF applications. External tools can be used to manipulate the XAML in order to create the right visual feel, and this allows the often mixed roles of visual design and development to be conducted seperately by people with expertise in those different areas.
To add controls to your WPF application, you can either use the Rapid Application Development tools that Visual Studio provides you with, or you can modify the XAML directly. Drag and drop a button from the left-hand toolbox onto the form (you may have to hover over the toolbox menu to make it appear). A new button should appear on the form, along with a new line of XAML representing that button similar to the following:
<Button Height="23" Margin="109,110,108,0" Name="button1" VerticalAlignment="Top">Button</Button>
Note that various properties of the button are defined in the button tag's attributes. The button text is defined in the textual content of the Button tag. Changes made to the XAML here will be reflected in the preview window; try changing the button text to 'Hello', and clicking in the Design window to update the form preview.
So we now have a visual aspect to our WPF application, but it doesn't have a great deal of functionality. You may have noticed that there appear to be two files relating to our Window1 class; Window1.xaml and Window1.xaml.cs. The former, Window1.xaml, is what we have been working on so far and typically contains everything relating to the visual style of the application. The functionality is then implemented by the code-behind file Window1.xaml.cs. A feature of C# 2.0 called partial classes is used to combine these two files into a single class, Window1.
Switch to the Window1.xaml.cs window. You should see code similar to the following:
public partial class Window1 : System.Windows.Window
{
public Window1()
{
InitializeComponent();
}
}
The call to InitializeComponent in the constructor is what processes the XAML and generates the parts of the class that are defined there. We can access objects defined in the XAML just as if they were defined in this file (note though that for Intellisense to pick these up the project must have been compiled at least once). Let's add some functionality to the button we added. After the call to InitializeComponent, add the following line:
button1.Click += new RoutedEventHandler(button1_Click);
This adds an event handler to the button1 object we created in Window1.xaml. We could have instead set this in the XAML, by using the Click attribute of the Button element. Finally, we need to write a method to execute when the button is clicked - a simple WPF messagebox will do.
void button1_Click(object sender, RoutedEventArgs e)
{
System.Windows.MessageBox.Show("Hello, world");
}
Build, execute, and there you have it - a fully functional WPF application. Admittedly not the most exciting application ever, but in subsequent posts I hope to show the sorts of cool and powerful things you can do using these simple techniques.
