581 Tutorial 1

<< Back to the 581 tutorial overview page

Introduction to WPF and "Hello World" examples + simple animation example

This tutorial introduces the basic principles of WPF, and shows how to build two example applications in WPF. The slide deck of the overview presentation can be found here: Introduction to WPF (PDF, 1.1 MB).

Hello WPF Application

Source code of this example: Download sourcecode (ZIP file)

Step 1: Install and start Visual Studio and .NET framework If you're using one of the computers we use in the tutorials then VisualStudio 2008 and .NET framework is already installed. If you want to use your own machine, then use the MSDNAA account to download the software: UofC MSDNAA.

Also install the following service pack updates:

Step 2: Start VisualStudio and create WPF application Start VisualStudio 2008. To create a new WPF project, click on the "Create: Project..." link:

In the following dialog: select 'Windows', then 'WPF Application', enter a name for the application (e.g., 'WpfApplicationHelloWorld', and click 'OK'.

Step 3: Add button control and event handler In the toolbox on the left hand side of the screen, you find a collection of user interface controls that can be added to the application window. Select the 'Button'...

... and add the button to the main window:

Next, change the 'content' property of the button to the text 'Click me!':

Step 5: Add event handler We now add an event handler to the button, to receive a notification whenever a user presses the button with the mouse. Select the 'Events' list:

The double-click on the right side of the click-event entry:

A code window opens up -- this is the so called 'code behind' file. The callback handler method for the 'click' event is automatically created, and we can add the following line of code to change the displayed text of the button when it is pressed:

Step 6: Compile and test Now we can compile the application: Press F5 button or click the green arrow button:

The application should look similar to this window; and when pressing the button the text of the button changes:

Hello animated WPF Application

We extend the previous built application to include a simple animation: when clicking on the button, we fade the background color of the window from green to a gray background color.

Step 7: Setup animation We have to include an additional namespace at the beginning of the 'code behind' file:

Next, we have to add the following code to the 'click' event handler of the button. This code creates a new color brush with a green color for the background of the window. Then we create a color animation object, define its duration to be 1500 ms, and set the target color to a light gray. Finally, we start the animation with the 'BeginAnimation' method of the color brush to animate its color:

Step 8: Compiling and testing again Again, we have to press F5 to compile. When clicking the button you can see the color animation in action:

Using XAML

We used the interface builder to add our button in the example as illustrated above. Besides using the interface builder there are two other ways to add user controls to a window: creating them in C# code or adding them into the XAML code of the window. XAML is the Extended Application Markup Language of .NET and WPF, and this example shows how to add a control to the window by using this markup language.

In the bottom part of the VisualStudio window you can find the code window for XAML. Here, we see the code that VisualStudio created when we added our first button. By adding the following line, we can add a second button to the form (we also add a statement to make the font size of the button much larger):

Once we entered the line to the XAML code, the button will appear in the visual preview window:

When we run the application our second button appears, but when resizing the window we can see that the buttons overlap -- which is not the behavior we want:

To change this, we go to the visual design window inside of VisualStudio and click on the upper margin connector of the button. This sets pre-defined height of the button, and aligns it at the bottom of the window.

Next tutorial

Today we have seen the basic functions of WPF and XAML. Next week we continue with a more advanced WPF application, and we also have a look at how to use the Microsoft pressure-sensitive keyboards.