WPF项目示例1：入门wpf示例

演示：入门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 或从“调试”菜单中选择“启动调试”来生成和运行应用程序。