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"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<AssemblyName>ExpenseIt</AssemblyName>
<TargetType>winexe</TargetType>
<OutputPath>bin/$(Configuration)/</OutputPath>
</PropertyGroup>
<ItemGroup>
<Reference Include="System"/>
<Reference Include="System.Xml"/>
<Reference Include="System.Data"/>
<Reference Include="WindowsBase"/>
<Reference Include="PresentationCore"/>
<Reference Include="PresentationFramework"/>
</ItemGroup>
<ItemGroup>
<ApplicationDefinition Include="App.xaml"/>
<Page Include="HomePage.xaml"/>
<Compile Include="HomePage.xaml.cs" />
<Page Include="ExpenseReportPage.xaml"/>
<Compile Include="ExpenseReportPage.xaml.cs" />
<Resource Include="watermark.png"/>
</ItemGroup>
<Import Project="$(MSBuildBinPath)/Microsoft.CSharp.targets"/>
<Import Project="$(MSBuildBinPath)/Microsoft.WinFX.targets"/>
</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 Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
</Page>
四、 添加控件
在此步骤中,更新主页 UI 以显示用户可从中选择人员以查看其零用金报销单的人员列表。为创建此 UI,将下面的元素添加到 HomePage.xaml 中:
按照下面的步骤更新 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 Margin="10">
<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" 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>
</Grid>
</Page>
2. 编译并运行应用程序。
下图显示此步骤中的代码创建的控件。
五、 添加图像和标题
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>
<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">
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" 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>
</Grid>
</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. 编译并运行应用程序。
下图显示了此步骤的结果。
六、 添加代码以处理事件
2. 使用下面的代码覆盖上一步中定义的 Button 元素。
...
<!-- View report 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 标记之后,应用程序看上去与使用样式更新之前一样。
九、 将数据绑定到控件
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;
}
}
}
十一、 使用数据模板将样式添加到数据
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 应用程序的两个页面: