581 Tutorial 1

CPSC581.581Tutorial1 History

Hide minor edits - Show changes to markup

Changed lines 57-58 from:

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

to:

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.

Changed lines 63-65 from:

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 button. 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 button: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-014.png

to:

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: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-024.png

Changed lines 69-70 from:

http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-016.png http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-017.png

to:

http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-019.png http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-020.png

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): http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-021.png

Once we entered the line to the XAML code, the button will appear in the visual preview window: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-018.png

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: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-022.png

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. http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-023.png

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.

Changed lines 8-10 from:

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

to:

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

Changed lines 8-10 from:

Source code of this example:

to:

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

Changed lines 19-25 from:
to:

Start VisualStudio 2008. To create a new WPF project, click on the "Create: Project..." link: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-001.png

In the following dialog: select 'Windows', then 'WPF Application', enter a name for the application (e.g., 'WpfApplicationHelloWorld', and click 'OK'. http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-004.png

Changed lines 27-30 from:

Step 4: Compile and test

to:

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'... http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-005.png

... and add the button to the main window: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-006.png

Next, change the 'content' property of the button to the text 'Click me!': http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-007.png

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: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-008.png

The double-click on the right side of the click-event entry: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-009.png

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: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-010.png

Step 6: Compile and test Now we can compile the application: Press F5 button or click the green arrow button: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-011.png

The application should look similar to this window; and when pressing the button the text of the button changes: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-012.png

Changed lines 58-60 from:

Step 5: Setup animation

Step 6: Compiling and testing again

to:

Step 7: Setup animation We have to include an additional namespace at the beginning of the 'code behind' file: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-013.png

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 button. 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 button: http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-014.png

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:

http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-016.png http://www.nicolaimarquardt.com/ta/screenshots/Screenshot-017.png

Added lines 1-30:

(:title 581 Tutorial 1:)

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:

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:

  • Visual Studio 2008 SP1
  • .NET 3.5 Service Pack 1

Step 2: Start VisualStudio and create WPF application

Step 3: Add button control and event handler

Step 4: Compile and test

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 from green back to default gray background color.

Step 5: Setup animation

Step 6: Compiling and testing again