How To: Create a Windows Application Using WPF and XAML

J.D. Meier, Alex Homer, David Hill, Jason Taylor, Prashant Bansode, Lonnie Wall, Rob Boucher Jr, Akshay Bogawat.

Applies To

  • Visual Studio 2008
  • Windows Presentation Foundation (WPF)

Summary

This How To article shows you how to create a Windows application user interface using Windows Presentation Foundation (WPF), defined by an Extensible Application Markup Language (XAML) file and a code-behind file written in any of the .NET languages. The How To demonstrates using video media in conjunction with the common for controls to produce a simple but rich interface.

Contents

  • Objectives
  • Overview
  • Summary of Steps
  • Step 1 – Create a WPF Windows Application
  • Step 2 – Add Controls to the Application
  • Step 3 – Write an Event Handler for the Button Control
  • Step 4 - Add a Media Element to the Application
  • Additional Resources

Objectives

  • Learn how to create a Visual Studio project for a WPF application.
  • Learn how to create a Windows user interface using the Visual Studio WPF Designer.
  • Learn how to write event handlers for WPF controls
  • Learn how to add media elements to a WPF application

Overview

Use WPF to define the simple user interface for the application as a XAML file. The interface contains a text block, a text box, a button, and uses a media control that displays a video file as the window background. Create a code-behind file containing code written in any .NET language to implement interactivity by writing event handlers and connecting them to the controls on the page.

Summary of Steps

  • Step 1 – Create a WPF Windows Application
  • Step 2 – Add Controls to the Application
  • Step 3 – Write an Event Handler for the Button Control
  • Step 4 - Add a Media Element to the Application

Step 1 – Create a WPF Windows Application

In this step you create a new Visual Studio project for a WPF application.
  1. Start Visual Studio 2008.
  2. Open the File menu, point to New, and then click Project….
  3. In the New Project dialog, expand the Visual Basic or C# section in the list of project types and click Windows.
  4. Click WPF Application in the Templates section, enter WPFTest for the Name, select a folder in which to create the new project, and click OK.

The new project contains a WPF form file named Window1.xaml and a code-behind file named Window1.xaml.cs or Window1.xaml.vb (depending on the language you chose).

At the moment, the XAML contains only the root Window element and a Grid child element that specifies that the form will use grid (rather than flow) layout for the controls and content.
The project also contains the ‘application’ files that define the base application, and which can be used to create global event handlers for the application. These files are App.xaml and App.xaml.cs or App.xaml.vb.

Step 2 – Add Controls to the Application

In this step you add some text, a text box, and a button to the WPF application interface, and set their properties.
  1. Drag a TextBlock control from the Controls section of the Toolbox and drop it onto the Window1.xaml designer surface inside the window shown on the designer surface. In the Properties window for the TextBlock control, change the Text property to Type your name.
  2. Drag a TextBox control from the Toolbox and drop it onto the designer surface next to the TextBlock control.
  3. Drag a Button control from the Toolbox and drop it onto the designer surface below the TextBox control. In the Properties window for the Button control, change the Content property to Click Me.

Look at the XAML code in the lower window of the designer to see the controls you added, and how they are defined in XAML. For example, the Button control looks like this:
<Button Margin="103,59,77,39" Name="Button1">Click Me</Button>

XAML markup uses elements very similar to those used in ASP.NET to specify the type of control, the attributes, and the content for the control to display. You may need to add carriage returns between each element to make it easier to read.

Step 3 – Write an Event Handler for the Button Control

In this step you add an event handler to the button control that displays a message in a message box when the user clicks the button.
  1. Double-click the Button control in the designer to open the code file named Window1.xaml.cs or Window1.xaml.vb (depending on your chosen language) with the insertion point inside the button1_Click event handler.
  2. Type the following code into the event handler:
C#
MessageBox.Show("Hello " + textBox1.Text + " from WPF");

Visual Basic
MessageBox.Show("Hello " & textBox1.Text & " from WPF")
  1. Press F5 to run the application, enter your name in the text box, and click the button. You will see a message box containing the text defined in the previous step and the value you typed in the text box.

If you are working in C#, you will see that the Button element in the XAML definition now contains the attribute Click="button1_Click". This connects the Click event of the Button control to the event handler you defined in this step. I

If you are working in Visual Basic, Visual Studio defines the event handler as Handles button1_Click, and connects the control and the event handler at compile time. You can add attributes manually to the XAML code using the IntelliSense feature of the XAML code editor to connect controls to event handlers in either language.

Step 4 – Add a Media Element to the Application

In this step you add a media element to the form so that you can display streaming video on the user interface behind the other controls.
  1. Drag a MediaElement from the Controls section of the Toolbox and drop it onto the designer surface inside the Window1 window.
  2. Move and resize the MediaElement until it fills the Window1 window.
  3. Right-click on the MediaElement, point to Order, and click Sent to Back.
  4. In the Properties window for the MediaElement control, change the HorizontalAlignment and the VerticalAlignment properties to Stretch.
  5. In the Properties window for the MediaElement control, change the Width and the Height properties to Auto.
  6. In the Properties window for the MediaElement control, type the full path and name of a video clip into the Source property.
  7. Press F5 to run the application. After a delay while the video clip loads, you will see it playing behind the text box, its caption, and the button. Enter your name in the text box and click the button to see the message box.

This illustrates the rich media capabilities of WPF. You can resize the window and the controls move and change size to match the new window size. The video also changes size and aspect ratio to fill the window, though you can specify fixed or relative dimensions if required. You can also write code to start, pause, and stop the video, and manage other media elements.

Additional Resources

Last edited Dec 17, 2008 at 8:13 PM by prashantbansode, version 1

Comments

No comments yet.