Share via

Getting Started with Windows Presentation Foundation

  • Article

This walkthrough provides an introduction to the development of a Windows Presentation Foundation (WPF) application that includes the elements that are common to most WPF applications: Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles.

This walkthrough guides you through the development of a simple WPF application using the following steps.

  • Defining XAML to design the appearance of the application's user interface (UI).

  • Writing code to build the application's behavior.

  • Creating an application definition to manage the application.

  • Adding controls and creating the layout to compose the application UI.

  • Creating styles to create a consistent appearance throughout an application's UI.

  • Binding the UI to data to both populate the UI from data and keep the data and UI synchronized.

By the end of the walkthrough, you will have built a standalone Windows application that allows users to view expense reports for selected people. The application will be composed of several WPF pages that are hosted in a browser-style window.

The sample code that is used to build this walkthrough is available for both Microsoft Visual Basic and C# at Introduction to Building WPF Applications (Visual Studio 2008 version).

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2008

For more information about installing Visual Studio, see Installation and Setup Essentials.

Creating the Application Project

In this section, you create the application infrastructure, which includes an application definition, two pages, and an image.

  1. Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt. For more information, see How to: Create a New WPF Application Project.

  2. Open Application.xaml (Visual Basic) or App.xaml (C#).

    This XAML file defines a WPF application and any application resources. You also use this file to specify the UI that automatically shows when the application starts; in this case, Window1.xaml.

    Your XAML should look like this in Visual Basic:

    <Application x:Class="Application"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

    Or like this in C#:

    <Application x:Class="ExpenseIt.App"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

  3. Open Window1.xaml.

    This XAML file is the main window of your application and displays content created in pages. The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.

  4. Change the Window element to a NavigationWindow.

    This application will navigate to different content depending on the user interaction. Therefore, the main Window needs to be changed to a NavigationWindow. NavigationWindow inherits all the properties of Window. The NavigationWindow element in the XAML file creates an instance of the NavigationWindow class. For more information, see Navigation Overview.

  5. Change the following properties on the NavigationWindow element:

    Your XAML should look like this in Visual Basic:

    <NavigationWindow x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">

</NavigationWindow>

    Or like this in C#:

    <NavigationWindow x:Class="ExpenseIt.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">

</NavigationWindow>

  6. Open Window1.xaml.vb or Window1.xaml.cs.

    This file is a code-behind file that contains code to handle the events declared in Window1.xaml. This file contains a partial class for the window defined in XAML.

  7. If you are using C#, change the Window1 class to derive from NavigationWindow.

    In Visual Basic, this happens automatically when you change the window in XAML.

    Your code should look like this.

    Class Window1

End Class

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary> 
    /// Interaction logic for Window1.xaml 
    /// </summary> 
    public partial class Window1 : NavigationWindow
    {
        public Window1()
        {
            InitializeComponent();
        }
    }
}

Adding Files to the Application

In this section, you add two pages and an image to the application.

  1. Add a new Page (WPF) to the project named ExpenseItHome.xaml. For more information, see How to: Add New Items to a WPF Project.

    This page is the first page that is displayed when the application is launched. It will show a list of people from which a user can select a person to show an expense report for.

  2. Open ExpenseItHome.xaml.

  3. Set the Title to "ExpenseIt - Home".

    Your XAML should look like this in Visual Basic:

    <Page x:Class="ExpenseItHome"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt - Home">
    <Grid>

    </Grid>
</Page>

    Or this in C#:

    <Page x:Class="ExpenseIt.ExpenseItHome"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt - Home">
    <Grid>

    </Grid>
</Page>

  4. Open Window1.xaml.

  5. Set the Source property on the NavigationWindow to "ExpenseItHome.xaml".

    This sets ExpenseItHome.xaml to be the first page opened when the application starts. Your XAML should look like this in Visual Basic:

    <NavigationWindow x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

    Or this in C#:

    <NavigationWindow x:Class="ExpenseIt.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">

</NavigationWindow>

  6. Add a new Page (WPF) to the project named ExpenseReportPage.xaml.

    This page will show the expense report for the person that is selected on ExpenseItHome.xaml.

  7. Open ExpenseReportPage.xaml.

  8. Set the Title to "ExpenseIt - View Expense".

    Your XAML should look like this in Visual Basic:

    <Page x:Class="ExpenseReportPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt - View Expense">
    <Grid>

    </Grid>
</Page>

    Or this in C#:

    <Page x:Class="ExpenseIt.ExpenseReportPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt - View Expense">
    <Grid>

    </Grid>
</Page>

  9. Open ExpenseItHome.xaml.vb and ExpenseReportPage.xaml.vb, or ExpenseItHome.xaml.cs and ExpenseReportPage.xaml.cs.

    When you create a new Page file, Visual Studio automatically creates a code behind file. These code-behind files handle the logic for responding to user input.

  10. Add an image named watermark.png to the project. You can either create your own image, or copy the file from the sample code. For more information, see How to: Add Existing Items to a Project.

Building and Running the Application

In this section, you build and run the application.

  1. Build and run the application by pressing F5 or select Start Debugging from the Debug menu.

    The following illustration shows the application with the NavigationWindow buttons.

    ExpenseIt sample screen shot

  2. Close the application to return to Visual Studio.

Creating the Layout

Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. You typically create a layout with one of the following layout controls:

Each of these layout controls supports a special type of layout for its child elements. ExpenseIt pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. Consequently, the Grid is the ideal layout element for the application.

Note

For more information about Panel elements, see Panels Overview. For more information about layout, see The Layout System.

In the section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the Grid in ExpenseItHome.xaml.

  1. Open ExpenseItHome.xaml.

  2. Set the Margin property on the Grid element to "10,0,10,10" which corresponds to left, top, right and bottom margins.

  3. Add the following XAML between the Grid tags to create the row and column definitions. 

    <Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

    The Height of two rows is set to Auto which means that the rows will be sized base on the content in the rows. The default Height is Star sizing, which means that the row will be a weighted proportion of the available space. For example if two rows each have a height of "*", they will each have a height that is half of the available space.

    Your Grid should now look like the following XAML:

    <Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>

Adding Controls

In this section, the home page UI is updated to show a list of people that users can select from to show the expense report for a selected person. Controls are UI objects that allow users to interact with your application. For more information, see Controls Overview.

To create this UI, the following elements are added to ExpenseItHome.xaml:

  • ListBox (for the list of people).

  • Label (for the list header).

  • Button (to click to view the expense report for the person that is selected in the list).

Each control is placed in a row of the Grid by setting the Grid.Row attached property. For more information about attached properties, see Attached Properties Overview.

  1. Open ExpenseItHome.xaml.

  2. Add the following XAML between the Grid tags.

      <!-- People list -->
  <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
  </Border>
  <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
  </ListBox>

  <!-- View report button -->
  <Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>

  3. Build and run the application.

The following illustration shows the controls that are created by the XAML in this section.

ExpenseIt sample screen shot

Adding an Image and a Title

In this section, the home page UI is updated with an image and a page title.

  1. Open ExpenseItHome.xaml.

  2. Add another column to the ColumnDefinitions with a fixed Width of 230 pixels.

    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>

  3. Add another row to the RowDefinitions.

    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

  4. Move the controls to the second column by setting Grid.Column to 1. Move each control down a row, by increasing the Grid.Row by 1.

      <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
  </Border>
  <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
  </ListBox>

  <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>

  5. Set the Background of the Grid to be the watermark.png image file.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. Before the Border, add a Label with the content "View Expense Report" to be the title of the page.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    View Expense Report
</Label>

  7. Build and run the application.

The following illustration shows the results of this section.

ExpenseIt sample screen shot

Adding Code to Handle Events

  1. Open ExpenseItHome.xaml.

  2. Add a Click event handler to the Button element. For more information, see How to: Create a Simple Event Handler.

      <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>

  3. Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Add the following code to the Click event handler, which causes the window to navigate to the ExpenseReportPage.xaml file.

            Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' View Expense Report 
            Dim expenseReportPage As New ExpenseReportPage()
            Me.NavigationService.Navigate(expenseReportPage)

        End Sub

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage();
    this.NavigationService.Navigate(expenseReportPage);

}

Creating the UI for ExpenseReportPage

ExpenseReportPage.xaml displays the expense report for the person that was selected on the ExpenseItHome.xaml. This section adds controls and creates the UI for ExpenseReportPage.xaml. This section also adds background and fill colors to the various UI elements.

  1. Open ExpenseReportPage.xaml.

  2. Add the following XAML between the Grid tags.

    This UI is similar to the UI created on ExpenseItHome.xaml.

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="230" />
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
</Grid.RowDefinitions>


<Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    Expense Report For:
</Label>
<Grid Margin="10" Grid.Column="1" Grid.Row="1">

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
    </StackPanel>

    <!-- Department -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
Orientation="Horizontal">
        <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
        <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
    </StackPanel>

    <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="10" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
            <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
            <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

    </Grid>
</Grid>

  3. Build and run the application.

  4. Click the View button.

    The expense report page appears.

The following illustration shows the UI elements added to ExpenseReportPage.xaml. Notice that the back navigation button is enabled.

ExpenseIt sample screen shot

Styling Controls

The appearance of various elements can often be the same for all elements of the same type in a UI. UI uses styles to make appearances reusable across multiple elements. The reusability of styles helps to simplify XAML creation and management. For more information about styles, see Styling and Templating. This section replaces the per-element attributes that were defined in previous steps with styles.

  1. Open Application.xaml or App.xaml.

  2. Add the following XAML between the Application.Resources tags:

    <!-- Header text style -->
<Style x:Key="headerTextStyle">
    <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
    <Setter Property="Label.FontWeight" Value="Bold"></Setter>
    <Setter Property="Label.FontSize" Value="18"></Setter>
    <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
</Style>

<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="0,0,0,5" />
</Style>

<!-- List header style -->
<Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
</Style>

<!-- List header text style -->
<Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
</Style>

<!-- Button style -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="125" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="0,10,0,0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

    This XAML adds the following styles:

    • headerTextStyle: To format the page title Label.

    • labelStyle: To format the Label controls.

    • listHeaderStyle: To format the list header Border controls.

    • listHeaderTextStyle: To format the list header Label.

    • buttonStyle: To format the Button on ExpenseItHome.xaml.

    Notice that the styles are resources and children of the Application.Resources property element. In this location, the styles are applied to all the elements in an application. For an example of using resources in a .NET Framework application, see How to: Use Application Resources.

  3. Open ExpenseItHome.xaml.

  4. Replace everything between the Grid elements with the following XAML.

    <Grid Margin="10,0,10,10">

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png"  />
    </Grid.Background>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="230" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- People list -->

    <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
        View Expense Report
    </Label>

    <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
    </Border>
    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
        <ListBoxItem>Mike</ListBoxItem>
        <ListBoxItem>Lisa</ListBoxItem>
        <ListBoxItem>John</ListBoxItem>
        <ListBoxItem>Mary</ListBoxItem>
    </ListBox>

    <!-- View report button -->
    <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>


</Grid>

    The properties such as VerticalAlignment and FontFamily that define the look of each control are removed and replaced by applying the styles. For example, the headerTextStyle is applied to the "View Expense Report" Label.

  5. Open ExpenseReportPage.xaml.

  6. Replace everything between the Grid elements with the following XAML.

    <Grid>

    <Grid.Background>
        <ImageBrush ImageSource="watermark.png" />
    </Grid.Background>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="230" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>


    <Label Grid.Column="1" Style="{StaticResource headerTextStyle}">
        Expense Report For:
    </Label>
    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Name -->
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
            <Label Style="{StaticResource labelStyle}">Name:</Label>
            <Label Style="{StaticResource labelStyle}"></Label>
        </StackPanel>

        <!-- Department -->
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
    Orientation="Horizontal">
            <Label Style="{StaticResource labelStyle}">Department:</Label>
            <Label Style="{StaticResource labelStyle}"></Label>
        </StackPanel>

        <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3">

            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="10" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition />
            </Grid.RowDefinitions>

            <!-- Expense type list -->
            <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
                <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
            </Border>
            <ListBox Grid.Column="0" Grid.Row="1" />

            <!-- Amount list -->
            <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
                <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
            </Border>
            <ListBox Grid.Column="2" Grid.Row="1" />

        </Grid>
    </Grid>

</Grid>

    This adds styles to the Label and Border elements.

  7. Build and run the application.

    After adding the XAML in this section, the application looks the same as it did before being updated with styles.

Binding Data to a Control

In this section, you create the XML data that is bound to various controls.

  1. Open ExpenseItHome.xaml.

  2. After the opening Grid element, add the following XAML to create an XmlDataProvider that contains the data for each person.

    The data is created as a Grid resource. Normally this would be loaded as a file, but for simplicity the data is added inline.

    <Grid.Resources>


...


<!-- Expense Report Data -->
<XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
    <x:XData>
        <Expenses >
            <Person Name="Mike" Department="Legal">
                <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                <Expense ExpenseType="Transportation" ExpenseAmount="50" />
            </Person>
            <Person Name="Lisa" Department="Marketing">
                <Expense ExpenseType="Document printing"
      ExpenseAmount="50"/>
                <Expense ExpenseType="Gift" ExpenseAmount="125" />
            </Person>
            <Person Name="John" Department="Engineering">
                <Expense ExpenseType="Magazine subscription" 
     ExpenseAmount="50"/>
                <Expense ExpenseType="New machine" ExpenseAmount="600" />
                <Expense ExpenseType="Software" ExpenseAmount="500" />
            </Person>
            <Person Name="Mary" Department="Finance">
                <Expense ExpenseType="Dinner" ExpenseAmount="100" />
            </Person>
        </Expenses>
    </x:XData>
</XmlDataProvider>


...


</Grid.Resources>

  3. In the Grid resource, add the following DataTemplate, which defines how to display the data in the ListBox. For more information about data templates, see Data Templating Overview.

    <Grid.Resources>


...


<!-- Name item template -->
<DataTemplate x:Key="nameItemTemplate">
    <Label Content="{Binding XPath=@Name}"/>
</DataTemplate>


...


</Grid.Resources>

  4. Replace the existing ListBox with the following XAML.

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
         ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
         ItemTemplate="{StaticResource nameItemTemplate}">
</ListBox>

    This XAML binds the ItemsSource property of the ListBox to the data source and applies the data template as the ItemTemplate.

Connecting Data to Controls

In this section, you write the code that retrieves the current item that is selected in the list of people on the ExpenseItHome.xaml page, and passes its reference to the constructor of ExpenseReportPage during instantiation. ExpenseReportPage sets its data context with the passed item, which is what the controls defined in ExpenseReportPage.xaml will bind to.

  1. Open ExpenseReportPage.xaml.vb or ExpenseReportPage.xaml.cs.

  2. Add a constructor that takes an object so you can pass the expense report data of the selected person.

        Partial Public Class ExpenseReportPage
        Inherits Page
        Public Sub New()
            InitializeComponent()
        End Sub 

        ' Custom constructor to pass expense report data 
        Public Sub New(ByVal data As Object)
            Me.New()
            ' Bind to expense report data. 
            Me.DataContext = data
        End Sub 

    End Class

    public partial class ExpenseReportPage : Page
{
    public ExpenseReportPage()
    {
        InitializeComponent();
    }

    // Custom constructor to pass expense report data 
    public ExpenseReportPage(object data)
        : this()
    {
        // Bind to expense report data. 
        this.DataContext = data;
    }

}

  3. Open ExpenseItHome.xaml.vb or ExpenseItHome.xaml.cs.

  4. Change the Click event handler to call the new constructor passing the expense report data of the selected person.

          Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' View Expense Report 
            Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
            Me.NavigationService.Navigate(expenseReportPage)

        End Sub

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);

}

Styling Data with Data Templates

In this section, you update the UI for each item in the data bound lists by using data templates.

  1. Open ExpenseReportPage.xaml.

  2. Bind the content of the "Name" and "Department" Label elements to the appropriate data source property. For more information about data binding, see Data Binding Overview.

        <!-- Name -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Name:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>
    </StackPanel>

    <!-- Department -->
    <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
Orientation="Horizontal">
        <Label Style="{StaticResource labelStyle}">Department:</Label>
        <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label>
    </StackPanel>

  3. After the opening Grid element, add the following data templates, which define how to display the expense report data.

    <!--Templates to display expense report data-->
<Grid.Resources>
    <!-- Reason item template -->
    <DataTemplate x:Key="typeItemTemplate">
        <Label Content="{Binding XPath=@ExpenseType}"/>
    </DataTemplate>
    <!-- Amount item template -->
    <DataTemplate x:Key="amountItemTemplate">
        <Label Content="{Binding XPath=@ExpenseAmount}"/>
    </DataTemplate>
</Grid.Resources>

  4. Apply the templates to the ListBox elements that display the expense report data.

    <!-- Expense type list -->
<Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
    <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
</Border>
<ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
         ItemTemplate="{StaticResource typeItemTemplate}"  />

<!-- Amount list -->
<Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
    <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
</Border>
<ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
         ItemTemplate="{StaticResource amountItemTemplate}" />

  5. Build and run the application.

  6. Select a person and click the View button.

The following illustration shows both pages of the ExpenseIt application with controls, layout, styles, data binding, and data templates applied.

ExpenseIt sample screen shots

Best Practices

This sample demonstrates a specific feature of WPF and, consequently, does not follow application development best practices. For comprehensive coverage of WPF and the .NET Framework application development best practices, see the following topics as appropriate:

What's Next

You now have a number of techniques at your disposal for creating a UI using Windows Presentation Foundation (WPF). You should now have a broad understanding of the basic building blocks of a data-bound .NET Framework application. This topic is by no means exhaustive, but hopefully you also now have a sense of some of the possibilities you might discover on your own beyond the techniques in this topic.

For more information about the WPF architecture and programming models, see the following topics:

For more information about creating applications, see the following topics:

See Also

Concepts

Panels Overview

Data Templating Overview

Building a WPF Application (WPF)

Other Resources

Styles and Templates: Conceptual

Change History

Date

History

Reason

July 2010

Updated the topic to use Visual Studio and added Visual Basic code.

Customer feedback.