演示:入门WPF应用程序项目
参考来源Microsoft Help 查看器wpf入门内容
下图显示应用了控件、布局、样式、数据绑定和数据模板的 ExpenseIt 应用程序的两个页。
其中包括一个应用程序定义、两个页以及一个图像(未使用)
1 主窗口MainWindow.xaml
<NavigationWindow x:Class="ExpenseIt.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPF.netSample"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="325" Source="ExpenseItHome.xaml">
</NavigationWindow>
主窗口后台代码MainWindow.xaml.cs
public partial class MainWindow : NavigationWindow
{
public MainWindow()
{
//InitializeComponent(); //前面已经使用source
}
}
2 页面ExpenseItHome创建
此页是应用程序启动时显示的第一页。 它将显示一个人员列表,用户可从中选择人员来显示其零用金报销单。
<Page x:Class="WPF.netSample.ExpenseItHome"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPF.netSample"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="ExpenseItHome">
<Grid Margin="10,0,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<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>
<!-- 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"
ItemsSource="{Binding Source={StaticResource ExpenseDataSource},XPath=Person}"
ItemTemplate="{StaticResource nameItemTemplate}">
<!--<ListBoxItem >Mike</ListBoxItem>-->
</ListBox>
<!-- View report button -->
<Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>
</Grid>
</Page>
后台代码为:
ps:当您创建新的页文件时,Visual Studio 将自动创建代码隐藏文件。 这些代码隐藏文件处理用于响应用户输入的逻辑。
public partial class ExpenseItHome : Page
{
public ExpenseItHome()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
//view expense report
ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
this.NavigationService.Navigate(expenseReportPage);
}
}
3 页面ExpenseReportPage.xaml
此页将显示 ExpenseItHome.xaml 中所选人员的零用金报销单。
<Page x:Class="WPF.netSample.ExpenseReportPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WPF.netSample"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="ExpenseReportPage">
<Grid>
<!--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>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="auto"/>
</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}" 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>
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" >
<!-- Expense type and Amount table -->
<DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}"
AutoGenerateColumns="False" RowHeaderWidth="0" >
<DataGrid.Columns>
<DataGridTextColumn Header="ExpenseType" Binding="{Binding XPath=@ExpenseType}" />
<DataGridTextColumn Header="Amount" Binding="{Binding XPath=@ExpenseAmount}" />
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</Grid>
</Grid>
</Page>
后台代码:
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;
}
}
最后通过按 F5 或从“调试”菜单中选择“启动调试”来生成和运行应用程序。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。