WinForm到WPF转型 - Expander应用与样式

WinForm到WPF的转型，需要开发者从基于控件的传统概念，转变到注重界面布局、数据绑定、可视化树等全新的思路。以下主要围绕 WPF 的 Expander 控件进行实战说明，并结合对应样式与常见用法的示例进行讲解。

迁移思维：从WinForm到WPF

在 WinForm 中，我们通常通过拖拽控件到窗体上，然后在属性面板中进行部分设置。

在 WPF 中，界面更重视「布局」与「控件间的层次结构」。我们会使用 XAML 来描述界面，并通过“布局容器（如 Grid、StackPanel、DockPanel 等）”来协调控件的摆放。
在 WinForm 中，样式主题化往往依靠第三方库或通用的 UI 框架。

在 WPF 中，样式与控件模板（ControlTemplate/Style）是平台内置的能力，可以直接通过 XAML 配置，实现对外观与布局的深层定制。

Expander控件介绍

Expander 控件可以折叠或展开内容区，常用于在界面上分层展示、收起和隐藏相对不常用的子内容，以达到节省空间、提高用户交互体验的目的。

Expander 的基本结构

通常情况下，Expander 的主要结构和要点包括：

Header：Expander 的标题区域，会一直显示在界面上。
Content：Expander 的主体内容，显示在 Header 下方。可以是任何 UI 元素或容器。

下面是一个简单的 Expander 示例：

XML
<Window x:Class="AppExpander.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:AppExpander"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="10">
        <!-- 在Grid内放置一个Expander -->
        <Expander Header="设置选项" 
                  ExpandDirection="Down" 
                  Background="AliceBlue" 
                  Foreground="Black" 
                  IsExpanded="True">
            <!-- Expander折叠/展开的内容 -->
            <StackPanel Margin="5">
                <!-- 在这里可以放置各种元素 -->
                <TextBlock Text="这是Expander的内容。" 
                           Margin="0,0,0,5"/>
                <Button Content="按钮1" Margin="0,0,0,5"/>
                <Button Content="按钮2"/>
            </StackPanel>
        </Expander>
    </Grid>
</Window>

关键属性

Header：设置标题，这里可以是文本，也可以是任何 UI 元素。
Content：折叠区域的内容，可以是任何复杂布局。
ExpandDirection：指定展开的方向，一般是 Down、Up、Left、Right。
IsExpanded：控制是否默认展开，为 true 时默认展开，为 false 时则默认折叠。

Expander在复杂界面中的应用

WPF 提供多种布局容器（如 Grid、StackPanel、Border、DockPanel 等），通常可以搭配 Expander 使用。以下示例演示如何在 Grid 中使用多个 Expander：

XML
<Window x:Class="AppExpander.Window1"
        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:AppExpander"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!-- 第一个Expander，展开方向向下 -->
        <Expander Header="工具栏设置" 
                  ExpandDirection="Down" 
                  IsExpanded="True"
                  Background="LightYellow"
                  Grid.Row="0">
            <StackPanel Margin="5">
                <TextBlock Text="工具栏相关设置" />
                <CheckBox IsChecked="True" Content="显示工具栏"/>
                <CheckBox IsChecked="False" Content="启用悬浮功能"/>
            </StackPanel>
        </Expander>

        <!-- 第二个Expander，展开方向向上 -->
        <Expander Header="高级选项" 
                  ExpandDirection="Up" 
                  IsExpanded="False"
                  Background="Lavender"
                  Grid.Row="1">
            <StackPanel Margin="5">
                <TextBlock Text="高级特性配置" />
                <CheckBox IsChecked="True" Content="启用网格线"/>
                <CheckBox IsChecked="False" Content="启用日志记录"/>
            </StackPanel>
        </Expander>

        <!-- 第三行放其它内容 -->
        <TextBlock Text="主内容区" 
                   Background="AliceBlue"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Grid.Row="2"/>
    </Grid>
</Window>

上面演示了将两个方向不同的 Expander 放在同一个 Grid 中，并结合不同的行，把布局做得更加清晰。

自定义Expander样式

WPF 中的样式（Style）能帮助我们快速统一多个相似控件的外观。下面示例演示如何通过简单样式修改 Expander 的外观。

XML
<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Expander样式示例" Height="350" Width="400">
    <Window.Resources>
        <!-- 定义Expander的样式 -->
        <Style TargetType="Expander" x:Key="MyExpanderStyle">
            <!-- 设置常见属性 -->
            <Setter Property="Background" Value="LightGray"/>
            <Setter Property="Foreground" Value="DarkBlue"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <!-- 使用Setter改变展开箭头的位置与视觉等 -->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Expander">
                        <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
                            <DockPanel>
                                <!-- 这里的ToggleButton是Expander折叠/展开的标题按钮 -->
                                <ToggleButton x:Name="ExpanderToggleButton"
                                              DockPanel.Dock="Top"
                                              Content="{TemplateBinding Header}"
                                              FontWeight="{TemplateBinding FontWeight}"
                                              Background="{TemplateBinding Background}"
                                              Foreground="{TemplateBinding Foreground}"
                                              IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded}"/>
                                <!-- 展开的内容放在ContentPresenter里 -->
                                <ContentPresenter x:Name="ExpanderContent"
                                                  Visibility="Collapsed"
                                                  DockPanel.Dock="Bottom"/>
                            </DockPanel>
                            <ControlTemplate.Triggers>
                                <!-- 当Expander展开时，显示 内容区域 -->
                                <Trigger Property="IsExpanded" Value="True">
                                    <Setter TargetName="ExpanderContent" Property="Visibility" Value="Visible"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid Margin="10">
        <StackPanel>
            <Expander Header="样式化的Expander1" Style="{StaticResource MyExpanderStyle}">
                <TextBlock Text="这里是Expander内容1" Margin="10"/>
            </Expander>
            <Expander Header="样式化的Expander2" Style="{StaticResource MyExpanderStyle}">
                <StackPanel Margin="10">
                    <TextBlock Text="这里是Expander内容2"/>
                    <Button Content="操作 Button"/>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Grid>
</Window>

以上示例设置了一个自定义的 Template，使得 Expander 的箭头按钮被替换为最基础的 ToggleButton，开发者可以在此基础上添加复杂的视觉效果。值得注意的是，在实际项目中，常常需要更精细的控件模板（例如修改箭头的方向图标、增加动画等）。

数据绑定与事件

Expander 也支持数据绑定与命令绑定，如果需要在展开或折叠时执行逻辑，可以通过以下事件进行处理：

Expanded：Expander 展开后触发。
Collapsed：Expander 收起后触发。

示例（在展开和折叠时做简单提示）：

XML
<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Expander事件示例" Height="300" Width="400">
    <Grid Margin="10">
        <Expander Header="点击展开/收起" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
            <StackPanel Margin="5">
                <TextBlock Text="此处显示更多选项..." />
            </StackPanel>
        </Expander>
    </Grid>
</Window>

在 MainWindow.xaml.cs 中，添加对应的事件处理程序：

C#
using System.Windows;

namespace WpfDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Expander_Expanded(object sender, RoutedEventArgs e)
        {
            // 当Expander展开时的事件处理
            MessageBox.Show("Expander 已展开！");
        }

        private void Expander_Collapsed(object sender, RoutedEventArgs e)
        {
            // 当Expander收起时的事件处理
            MessageBox.Show("Expander 已收起！");
        }
    }
}

总结

WinForm 迁移到 WPF，需要改变对界面开发的认识，着重掌握布局与 XAML 树状结构。
Expander 能有效优化界面空间，适用于各种折叠/展开场景。
WPF 的 Style 和 ControlTemplate 功能，为 Expander 提供了高度可定制化的可能。
事件与数据绑定也与其它 WPF 控件一致，逻辑部分则仍编写在 C# 代码后端中。

通过以上示例，期望能帮助正从 WinForm 向 WPF 转型的开发者更好地理解与运用 Expander，在界面布局、样式以及互动逻辑上进一步提升开发能力。

目录