WPF 学习教程

WPF 学习教程

Windows Presentation Foundation (WPF) 是微软提供的一个功能强大的框架，用于构建 Windows 桌面应用程序。WPF 支持先进的用户界面（UI）设计，提供了丰富的图形、动画和数据绑定功能。本教程将帮助您快速入门并掌握 WPF 的基本概念和使用方法。

1. WPF 基本概念

1.1 什么是 WPF？

WPF 是基于 .NET 的 UI 框架，允许开发者使用 XAML 和 C# 构建具有丰富图形界面的桌面应用程序。它提供了强大的数据绑定功能和先进的控件样式设置。

1.2 XAML 语言

XAML（eXtensible Application Markup Language）是一种基于 XML 的语言，用于定义 WPF 应用程序的 UI。它允许开发者通过声明式编程的方式定义 UI 元素及其属性。

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF 学习" Height="350" Width="525">
    <Grid>
        <Button Content="点击我" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

1.3 WPF 项目结构

一个典型的 WPF 项目包含以下几个部分：

• XAML 文件：用于定义 UI。
• Code-behind 文件：与 XAML 文件关联的 C# 代码文件，通常用于处理事件和业务逻辑。
• App.xaml 和 App.xaml.cs：定义应用程序入口点和全局资源。

2. WPF 布局系统

2.1 布局容器

WPF 提供了多种布局容器，用于管理 UI 元素的排列和大小。常用的布局容器包括：

• Grid：网格布局，支持复杂布局。
• StackPanel：堆叠面板，垂直或水平排列子元素。
• WrapPanel：换行面板，子元素自动换行。
• DockPanel：停靠面板，子元素可依指定边停靠。
• Canvas：画布，支持绝对定位。

2.2 布局示例

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Text="姓名：" Grid.Row="0" Grid.Column="0"/>
    <TextBox Grid.Row="0" Grid.Column="1" Width="200"/>
    <Button Content="提交" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center"/>
</Grid>

3. 控件使用

3.1 基本控件

WPF 提供了多种内置控件，如：

• Button：按钮
• TextBox：文本框
• ComboBox：下拉列表
• ListBox：列表框
• CheckBox 和 RadioButton：选择框和单选按钮

<StackPanel>
    <TextBox Width="200" Margin="10" />
    <Button Content="点击我" Width="100" Height="50" Margin="10"/>
    <CheckBox Content="同意条款" Margin="10"/>
</StackPanel>

3.2 事件处理

在 WPF 中，可以在 XAML 中为控件绑定事件处理方法。

<Button Content="点击我" Click="Button_Click" Width="100" Height="50"/>

在 C# 代码中实现事件处理：

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("按钮被点击！");
}

4. 数据绑定

4.1 简介

数据绑定是 WPF 的核心功能之一，它允许 UI 元素直接绑定到数据源。WPF 支持单向绑定、双向绑定等多种绑定模式。

4.2 绑定示例

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="数据绑定示例" Height="200" Width="300">
    <Grid>
        <TextBox Text="{Binding Name}" Width="200" Height="30" VerticalAlignment="Top"/>
        <TextBlock Text="{Binding Name}" Width="200" Height="30" VerticalAlignment="Bottom"/>
    </Grid>
</Window>

在后台代码中设置数据上下文：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new { Name = "Alvin" };
    }
}

4.3 常见绑定模式

• 单向绑定：数据源变化时更新 UI，但 UI 不会更新数据源。
• 双向绑定：数据源与 UI 互相更新。
• 默认绑定：根据控件的不同，绑定模式可能不同。

5. 样式和模板

5.1 样式

WPF 支持通过样式对控件的外观进行统一管理。样式可以在 App.xaml 中定义，也可以局部应用。

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="FontSize" Value="16"/>
    </Style>
</Window.Resources>

5.2 控件模板

控件模板允许开发者完全自定义控件的外观。

<Window.Resources>
    <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
        <Border Background="LightCoral" CornerRadius="10">
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </ControlTemplate>
</Window.Resources>

<Button Content="自定义按钮" Template="{StaticResource CustomButtonTemplate}"/>

6. 动画和图形

6.1 动画

WPF 支持丰富的动画效果，可以为 UI 元素添加移动、旋转、缩放等动画。

<Button Content="点击我" Width="100" Height="50">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Width" To="200" Duration="0:0:1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

6.2 图形和绘制

WPF 提供了强大的绘图功能，可以使用 Drawing 和 Shape 对象进行自定义图形的绘制。

<Canvas>
    <Ellipse Width="100" Height="100" Fill="LightGreen" Canvas.Left="50" Canvas.Top="50"/>
    <Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="2"/>
</Canvas>

7. WPF 高级主题

7.1 MVVM 模式

MVVM（Model-View-ViewModel）是 WPF 中推荐的设计模式，它将数据处理与 UI 分离，增强了代码的可维护性和可测试性。

7.2 资源和样式的共享

WPF 支持资源（如颜色、样式、模板）的共享，通过 ResourceDictionary 可以在多个页面之间共享资源。

<ResourceDictionary>
    <Color x:Key="PrimaryColor">LightBlue</Color>
    <Style x:Key="PrimaryButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource PrimaryColor}"/>
    </Style>
</ResourceDictionary>

8. 总结

通过本教程，您了解了 WPF 的基本概念、布局系统、控件使用、数据绑定以及样式和动画的应用。WPF 是一个功能强大的 UI 框架，掌握它将大大提升您开发 Windows 桌面应用程序的能力。希望本教程能帮助您快速上手并进一步深入学习 WPF。

---

这份教程涵盖了 WPF 的基本使用方法，适合初学者参考。