Windows Presentation Foundation 入门(MSDN)

最新推荐文章于 2019-07-27 06:44:08 发布

xufei96

最新推荐文章于 2019-07-27 06:44:08 发布

阅读量484

点赞数

文章标签： windows setter report include binding button

本文链接：https://blog.csdn.net/xufei96/article/details/5220063

版权

Windows Presentation Foundation 入门

一、 创建应用程序代码文件

1. 新建一个名为 App.xaml 的 XAML 标记文件。此文件定义 WPF 应用程序，您还可以用它来指定在应用程序启动时自动显示的 UI（在本例中，是下一步创建的 HomePage.xaml）。XAML 标记应类似于下面的代码：

<Application

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

StartupUri="HomePage.xaml">

</Application>

2. 新建一个名为 HomePage.xaml 的 XAML 标记文件，这是应用程序启动时显示的第一个页面。HomePage.xaml 将显示一个人员列表以供用户从中选择人员来查看其零用金报销单。将一个 Page 元素添加到 HomePage.xaml，它采用以下配置：

· 浏览器的标题栏为“ExpenseIt”。

· 浏览器的宽度为 550 个与设备无关的像素。

· 浏览器的高度为 350 个与设备无关的像素。

· 页面的标题为“ExpenseIt - Home”（ExpenseIt - 主页）。

XAML 标记应类似于下面的代码：

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ExpenseIt.HomePage"

WindowTitle="ExpenseIt"

Title="ExpenseIt - Home"

WindowWidth="550" WindowHeight="380">

</Page>

3. 新建一个名为 HomePage.xaml.cs 的代码文件。此文件为代码隐藏文件，其中包含用于处理 HomePage.xaml 中声明的事件的代码。您的代码应类似于下面所显示的内容：

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace ExpenseIt

{

public partial class HomePage : Page

{

public HomePage()

{

InitializeComponent();

}

4. 新建一个名为 ExpenseReportPage.xaml 的 XAML 标记文件。添加一个 Page 元素并将“ExpenseIt - View Expense Report”（ExpenseIt – 查看零用金报销单）设置为页面标题。此页面将显示 HomePage.xaml 中选定的人员的零用金报销单。XAML 标记应类似于下面的代码：

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ExpenseIt.ExpenseReportPage"

Title="ExpenseIt - View Expense Report">

</Page>

5. 新建一个名为 ExpenseReportPage.xaml.cs 的文件。此文件为代码隐藏文件，它将零用金报销单数据绑定到 ExpenseReportPage.xaml 中定义的 UI。您的代码应类似于下面所显示的内容：

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace ExpenseIt

{

public partial class ExpenseReportPage : Page

{

public ExpenseReportPage()

{

InitializeComponent();

}

6. 将一个名为 watermark.png 的图像添加到您在上述步骤中创建的五个代码文件所在的文件夹中。您可以创建自己的图像，也可以从示例代码中复制同名的文件。

二、 生成和运行应用程序

在此步骤中，您将使用 MSBuild 生成在前面定义的应用程序。

1. 新建一个名为 ExpenseIt.csproj 的文件。此文件为 MSBuild 文件，它是一个特殊的 XML 文件，包含应用程序的生成配置，其中包括：

· 所编译项目的全局生成变量，包括所生成的程序集的名称、要生成的程序集的类型以及所生成的程序集要添加到的文件夹。

· 对代码文件的引用。

· 对包含应用程序使用的类型的 Microsoft .NET Framework程序集的引用。

生成的文件的内容应类似于下面的代码：

<?xml version="1.0" encoding="utf-8"?>

<AssemblyName>ExpenseIt</AssemblyName>

<TargetType>winexe</TargetType>

<OutputPath>bin/$(Configuration)/</OutputPath>

</PropertyGroup>

</ItemGroup>

</ItemGroup>

</Project>

2. 打开命令窗口并转到项目文件和应用程序代码文件所在的文件夹。

3. 从命令提示符处运行下面的命令：

MSBuild ExpenseIt.csproj

要使用 Visual Studio 编译并运行应用程序，请在 Visual Studio 中打开项目文件，然后按 F5。

4. 打开包含所生成的应用程序可执行文件 expenseit.exe 的文件夹。如果是从命令提示符处生成的，则 expenseit.exe 位于以下文件夹中：

包含应用程序代码文件的文件夹/bin/

如果 expenseit.exe 是使用 Visual Studio 生成的，则位于以下文件夹中：

包含应用程序代码文件的文件夹/bin/debug/

5. 从命令提示符处运行 expenseit.exe。下图显示正在运行的应用程序。

三、 添加布局

布局提供了放置 UI 元素的一种有序方法，并在 UI 调整大小时管理这些元素的大小和位置。通常情况下，您使用下列布局控件之一将布局添加到 UI 中：

上述各控件都支持一种适用于其子元素的特殊布局类型。ExpenseIt 页面可以调整大小，并且每个页面都具有沿其他元素水平和垂直排列的元素。因此，Grid 是应用程序的理想布局元素。

下面的 XAML 标记通过将一个 Grid 添加到 HomePage.xaml 来创建一个三行一列、边距为 10 像素的表：

1. 打开 HomePage.xaml

2. 在 Page 标记之间添加以下 XAML。

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ExpenseIt.HomePage"

WindowTitle="ExpenseIt"

Title="ExpenseIt - Home"

WindowWidth="550" WindowHeight="380">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

</Page>

四、 添加控件

在此步骤中，更新主页 UI 以显示用户可从中选择人员以查看其零用金报销单的人员列表。为创建此 UI，将下面的元素添加到 HomePage.xaml 中：

ListBox（用于人员列表）。
Label（用于列表标题）。
Button（单击可查看列表中选定的人员的零用金报销单）。

按照下面的步骤更新 HomePage.xaml：

1. 使用下面的 XAML 覆盖 HomePage.xaml 文件的内容：

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ExpenseIt.HomePage"

WindowTitle="ExpenseIt"

Title="ExpenseIt - Home"

WindowWidth="550" WindowHeight="380">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label VerticalAlignment="Center" Foreground="White">Names</Label>

</Border>

</ListBox>

<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"

Height="25" HorizontalAlignment="Right">View</Button>

</Grid>

</Page>

2. 编译并运行应用程序。

下图显示此步骤中的代码创建的控件。

五、 添加图像和标题

在此步骤中，使用相应的图像和页面标题来更新主页 UI：

1. 打开 HomePage.xaml。

2. 使用下面的 XAML 覆盖 HomePage.xaml 文件的内容：

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ExpenseIt.HomePage"

WindowTitle="ExpenseIt"

Title="ExpenseIt - Home"

WindowWidth="550" WindowHeight="380">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Canvas>

<Label VerticalAlignment="Center" FontFamily="Trebuchet MS"

FontWeight="Bold" FontSize="18" Foreground="#0066cc">

View Expense Report

</Label>

</DockPanel>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label VerticalAlignment="Center" Foreground="White">Names</Label>

</Border>

</ListBox>

<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,0" Width="125"

Height="25" HorizontalAlignment="Right">View</Button>

</Grid>

</Page>

此 XAML 按照以下方式更新 Grid：

· 新建一个两行的网格。

· 将一个带 Canvas、Image 和 Label 的 DockPanel 添加到第一行。DockPanel 跨越第一行的两列，同时 Canvas 停靠在左侧，这样 Label 就可以与 Image 重叠。

· 使用 Image 元素的 Source 属性指定源图像 watermark.png。

· 将标题文本“View Expense Report”（查看零用金报销单）添加到 Label。

· 使用 Canvas 和 Label 的属性配置其外观和大小。

· 将 HomePage.xaml 最初包含的网格移到新网格的第二行第二列。

3. 编译并运行应用程序。

下图显示了此步骤的结果。

六、 添加代码以处理事件

1. 打开 HomePage.xaml。

2. 使用下面的代码覆盖上一步中定义的 Button 元素。

...

<Button Grid.Column="0" Grid.Row="2" Width="125" Height="25"

Margin="0,10,0,0" HorizontalAlignment="Right"

Click="viewButton_Click">View</Button>

...

3. 打开在此教程的创建应用程序代码文件步骤中创建的 HomePage.xaml.cs。

4. 使用下面的代码覆盖此文件的内容。此操作添加代码来处理 Click 事件，从而可以导航到 ExpenseReportPage.xaml 文件。

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace ExpenseIt

{

public partial class HomePage : Window

{

public HomePage()

{

InitializeComponent();

}

private void viewButton_Click(object sender, RoutedEventArgs args)

{

// View Expense Report

ExpenseReportPage expenseReportPage = new ExpenseReportPage();

expenseReportPage.Show();

This.Close();

}

七、创建 ExpenseReportPage 的 UI

ExpenseReportPage.xaml 显示从 HomePage.xaml 中选定的人员的零用金报销单。下面的更新添加控件和布局以便为 ExpenseReportPage.xaml 创建基本的 UI。此外，还为各个 UI 元素添加背景色和填充色。

1. 打开 ExpenseReportPage.xaml 文件并添加以下代码。

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="ExpenseIt.ExpenseReportPage"

  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="230" />

      <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto" />

      <RowDefinition />

    </Grid.RowDefinitions>

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

      <Canvas DockPanel.Dock="Left" Width="230" Height="100">

        <Image Source="watermark.png" />

      </Canvas>

      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS"

        FontWeight="Bold" FontSize="18" Foreground="#0066cc">

        Expense Report For:

      </Label>

    </DockPanel>

    <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>

  </Grid>

</Page>

2. 编译并运行应用程序。

下图显示添加到 ExpenseReportPage.xaml 中的 UI 元素。

八、 添加代码以设计控件的样式

通常情况下，UI 中所有同类型元素的外观可以保持一致。UI 通过样式使外观可以重用于多个元素。样式的可重用性有助于简化 XAML 标记的创建和管理。此步骤将前面的步骤中定义的各元素的属性替换为样式：

1. 打开在此教程的创建应用程序代码文件步骤中创建的 App.xaml 文件。

2. 使用下面的 XAML 标记覆盖此文件的内容：

<Application

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  StartupUri="HomePage.xaml">

  <Application.Resources>

    <!-- Background image style -->

    <Style x:Key="backgroundImageStyle">

      <Setter Property="Image.Source" Value="watermark.png"/>

    </Style>

    <!-- 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>

  </Application.Resources>

</Application>

此 XAML 标记添加以下样式：

· headerTextStyle：设置页面标题 Label 的格式。

· labelStyle：设置 Label 标签的格式。

· listHeaderStyle：设置列表标题 Border 控件的格式。

· listHeaderTextStyle：设置列表标题 Label 的格式。

· buttonStyle：设置 HomePage.xaml 上的按钮的格式。

请注意，样式是一种资源，也是 Application.Resources 属性元素的子级。这里，样式将应用于应用程序中的所有元素。打开 HomePage.xaml。

3. 使用下面的代码覆盖此文件的内容。此步骤将各元素特定于外观的属性替换为相应的样式。

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="ExpenseIt.HomePage"

  WindowTitle="ExpenseIt"

  Title="ExpenseIt - Home"

  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="230" />

      <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto" />

      <RowDefinition />

    </Grid.RowDefinitions>

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

      <Canvas DockPanel.Dock="Left" Width="230" Height="100">

        <Image Style="{StaticResource backgroundImageStyle}" />

      </Canvas>

      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>

    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>

        <ColumnDefinition />

      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition />

        <RowDefinition Height="Auto" />

      </Grid.RowDefinitions>

      <!-- People list -->

      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">

        <Label Style="{StaticResource listHeaderTextStyle}">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" Style="{StaticResource buttonStyle}"

        Click="viewButton_Click">View

      </Button>

    </Grid>

  </Grid>

</Page>

4. 打开 ExpenseReportPage.xaml。

5. 使用下面的代码覆盖此文件的内容。

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="ExpenseIt.ExpenseReportPage"

  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="230" />

      <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto" />

      <RowDefinition />

    </Grid.RowDefinitions>

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

      <Canvas DockPanel.Dock="Left" Width="230" Height="100">

        <Image Style="{StaticResource backgroundImageStyle}" />

      </Canvas>

      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>

    </DockPanel>

    <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>

</Page>

6. 编译并运行应用程序。在此步骤中添加 XAML 标记之后，应用程序看上去与使用样式更新之前一样。

九、 将数据绑定到控件

此步骤创建要绑定到各个控件的 XML 数据：

1. 打开 HomePage.xaml。

2. 使用下面的 XAML 标记覆盖此文件的内容。

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="ExpenseIt.HomePage"

  WindowTitle="ExpenseIt"

  Title="ExpenseIt - Home"

  WindowWidth="550" WindowHeight="380">

  <Grid>

    <Grid.Resources>

      <!-- Expense Report Data -->

      <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">

        <x:XData>

          <Expenses xmlns="">

            <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>

      <!-- Name item template -->

      <DataTemplate x:Key="nameItemTemplate">

        <Label Content="{Binding XPath=@Name}"/>

      </DataTemplate>

    </Grid.Resources>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="230" />

      <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto" />

      <RowDefinition />

    </Grid.RowDefinitions>

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

      <Canvas DockPanel.Dock="Left" Width="230" Height="100">

        <Image Style="{StaticResource backgroundImageStyle}" />

      </Canvas>

      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>

    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>

        <ColumnDefinition />

      </Grid.ColumnDefinitions>

      <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition />

        <RowDefinition Height="Auto" />

      </Grid.RowDefinitions>

      <!-- People list -->

      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">

        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>

      </Border>

      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1"

        ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"

        ItemTemplate="{StaticResource nameItemTemplate}" />

      <!-- View report button -->

      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}"

        Click="viewButton_Click">View</Button>

    </Grid>

  </Grid>

</Page>

请注意数据作为 Grid 资源创建。

十、 将数据连接到控件

在此步骤中，您将编写代码来检索从 HomePage 上的人员列表中选定的当前项，并在实例化过程中将对该当前项的引用传递给 ExpenseReportPage 的构造函数。ExpenseReportPage 使用已传入的项设置数据上下文，这就是 ExpenseReportPage.xaml 中定义的控件要绑定的内容。

1. 打开 HomePage.xaml.cs。

2. 使用下面的代码覆盖此文件的内容。

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace ExpenseIt

    public partial class HomePage : Window

        public HomePage()

            InitializeComponent();

        private void viewButton_Click(object sender, RoutedEventArgs args)

            // Create a new expense report page and pass it the selected person

            // by using the non-default constructor.

            ExpenseReportPage expenseReportPage =

                new ExpenseReportPage(this.peopleListBox.SelectedItem);

            expenseReportPage.Show();

            this.Close();

3. 打开 ExpenseReportPage.xaml.cs。

4. 使用下面的代码覆盖此文件的内容。

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

namespace ExpenseIt

    public partial class ExpenseReportPage : Page

        public ExpenseReportPage(object data)

            InitializeComponent();

            // Bind to expense report data.

            this.DataContext = data;

十一、 使用数据模板将样式添加到数据

在此步骤中，使用数据模板更新数据绑定列表中各项的 UI：

1. 打开 ExpenseReportPage.xaml。

2. 使用下面的代码覆盖此文件的内容。

<Page

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  x:Class="ExpenseIt.ExpenseReportPage"

  Title="ExpenseIt - View Expense Report">

  <Grid>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="230" />

      <ColumnDefinition />

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

      <RowDefinition Height="Auto" />

      <RowDefinition />

    </Grid.RowDefinitions>

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

      <Canvas DockPanel.Dock="Left" Width="230" Height="100">

        <Image Style="{StaticResource backgroundImageStyle}" />

      </Canvas>

      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>

    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <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>

      <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 Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>

      </StackPanel>

      <!-- Department -->

      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">

        <Label Style="{StaticResource labelStyle}">Department:</Label>

        <Label Content="{Binding XPath=@Department}" Style="{StaticResource labelStyle}"/>

      </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" 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}" />

      </Grid>

    </Grid>

  </Grid>

</Page>

3. 编译并运行应用程序。

请注意数据模板定义为 Grid 资源。

下面两个图显示的是应用了控件、布局、样式、数据绑定和数据模板的 ExpenseIt 应用程序的两个页面：