WPF-Samples项目入门指南：第一个WPF应用程序开发详解

前言

Windows Presentation Foundation (WPF) 是微软推出的用于构建Windows桌面应用程序的UI框架。本文将基于WPF-Samples项目中的"First WPF app"示例，详细介绍如何从零开始开发一个完整的WPF应用程序。

开发环境准备

在开始之前，请确保您已安装以下工具：

• Visual Studio 2019或更高版本
• .NET Framework 4.7.2或更高版本

WPF应用程序基础结构

WPF应用程序通常由以下几个核心部分组成：

1. XAML文件 - 定义用户界面
2. 代码后置文件 - 处理业务逻辑
3. 应用程序定义 - 管理应用程序生命周期
4. 资源文件 - 包含样式、模板等

示例应用程序功能概述

本示例将创建一个简单的费用报告查看器，主要功能包括：

• 显示人员列表
• 查看选定人员的费用报告
• 浏览器风格的导航界面

开发步骤详解

1. 创建主窗口布局

在MainWindow.xaml中，我们使用Grid和DockPanel等布局控件构建基本框架：

<Window x:Class="ExpenseIt.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="525">
    <Grid>
        <DockPanel>
            <!-- 导航区域 -->
            <Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0">
                <StackPanel>
                    <Label>View Expense Report</Label>
                    <Button Margin="10" Click="Button_Click">View</Button>
                </StackPanel>
            </Border>
            
            <!-- 内容区域 -->
            <Frame Name="MainFrame" NavigationUIVisibility="Hidden" />
        </DockPanel>
    </Grid>
</Window>

2. 实现数据绑定

WPF的强大特性之一是数据绑定。我们创建一个Person类作为数据模型：

public class Person
{
    public string Name { get; set; }
    public string Department { get; set; }
    
    // 其他属性和方法...
}

然后在XAML中使用数据绑定显示人员列表：

<ListBox ItemsSource="{Binding}" DisplayMemberPath="Name" />

3. 创建费用报告页面

添加ExpenseReportPage.xaml显示详细的费用报告：

<Page x:Class="ExpenseIt.ExpenseReportPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Expense Report">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Label Grid.Row="0" Content="{Binding Name}"/>
        
        <!-- 费用明细表格 -->
        <DataGrid Grid.Row="1" ItemsSource="{Binding Expenses}"/>
    </Grid>
</Page>

4. 添加样式和主题

在App.xaml中定义应用程序级样式：

<Application.Resources>
    <Style TargetType="Label">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="FontWeight" Value="Bold"/>
    </Style>
    
    <Style TargetType="Button">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="Padding" Value="5"/>
    </Style>
</Application.Resources>

5. 实现导航逻辑

在MainWindow.xaml.cs中处理按钮点击事件，实现页面导航：

private void Button_Click(object sender, RoutedEventArgs e)
{
    var selectedPerson = (Person)peopleListBox.SelectedItem;
    if (selectedPerson != null)
    {
        var reportPage = new ExpenseReportPage(selectedPerson);
        MainFrame.Navigate(reportPage);
    }
}

应用程序架构分析

本示例展示了典型的WPF应用程序架构：

1. 视图层：由XAML文件定义，负责UI展示
2. 业务逻辑层：代码后置文件处理用户交互
3. 数据层：简单的数据模型类

进阶开发建议

完成基础功能后，您可以考虑以下扩展：

1. 添加数据持久化功能（如使用SQLite）
2. 实现MVVM模式分离视图和逻辑
3. 添加动画效果增强用户体验
4. 支持主题切换功能

常见问题解答

Q: 为什么我的数据绑定不生效？ A: 请检查以下几点：

• 是否正确实现了INotifyPropertyChanged接口
• 绑定路径是否正确
• DataContext是否设置正确

Q: 如何调试XAML布局问题？ A: 可以使用以下方法：

• 在XAML中添加临时边框颜色查看控件边界
• 使用Live Visual Tree工具实时查看UI结构
• 检查输出窗口中的绑定错误信息

结语

通过本示例，您已经掌握了WPF应用程序开发的基本流程。WPF的强大之处在于其灵活的布局系统、丰富的数据绑定功能和高度可定制的UI元素。建议您继续探索WPF的其他高级特性，如自定义控件、模板和动画等，以构建更加专业的桌面应用程序。