Windows Presentation Foundation 入门(MSDN)

vtxvhw171n · 发表于 2016-5-20 10:39:06

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

Canvas
DockPanel
Grid
StackPanel
VirtualizingStackPanel
WrapPanel

上述各控件都支持一种适用于其子元素的特殊布局类型。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>


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


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


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


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


<Style x:Key="backgroundImageStyle">
<Setter Property="Image.Source" Value="watermark.png"/>
</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>


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


<Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
<Setter Property="Height" Value="35" />
<Setter Property="Padding" Value="5" />
<Setter Property="Background" Value="#4E87D4" />
</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>


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


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


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


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


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


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


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


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


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


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


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

<DataTemplate x:Key="typeItemTemplate">
<Label Content="{Binding XPath=@ExpenseType}"/>
</DataTemplate>

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


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


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


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


<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 应用程序的两个页面：

账号		自动登录	找回密码
密码			立即注册

大疆运维招人啦，

C++ :try 语句块和异常处理

C++的多态

Red Hat RHCE 8 (EX294) Cert Guide

Java/C++ 区别：看完这一篇，就够用！

别再用过时库了！这 13 个顶级 C++ 库才是

c++ size_t 和 int 的区别

[经验分享] Windows Presentation Foundation 入门(MSDN)

扫码加入运维网微信交流群