WPF 样式

在 WPF（Windows Presentation Foundation）中，Style（样式） 是一种强大的机制，用于统一控件的外观和行为，避免重复代码、提高可维护性，并支持主题切换。它类似于 Web 开发中的 CSS。

---

一、Style 的基本概念

• Style 定义了一组 Setter（设置器），用于批量设置控件的属性。
• 可以应用于特定类型的所有控件 ，或指定名称（Key）的控件。
• 支持继承（BasedOn） 、触发器（Triggers） 、资源复用等高级特性。
• 遵循 WPF 资源系统 ，可定义在 Application、Window、UserControl 或控件的 Resources 中。

---

二、定义 Style

1. 基本语法

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="LightBlue" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Padding" Value="10,5" />
</Style>

• x:Key：可选。有 Key 表示显式样式 ，需手动引用；无 Key 表示隐式样式 ，自动应用于所有 TargetType 类型的控件。
• TargetType：指定该样式适用的控件类型（如 Button, TextBox）。强烈建议始终指定 ，否则无法使用属性简写（如 FontSize 而非 Control.FontSize）。

---

三、应用 Style

1. 显式应用（通过 Key）

<Button Style="{StaticResource MyButtonStyle}" Content="Click Me" />

必须先定义带 x:Key 的 Style，再通过 StaticResource 引用。

2. 隐式应用（无 Key，自动生效）

<Style TargetType="Button">
    <Setter Property="Background" Value="Green" />
</Style>

<!-- 所有 Button 自动应用此样式 -->
<Button Content="A" />
<Button Content="B" />

⚠️ 注意：隐式样式只在当前资源作用域内 生效（如当前 Window）。若在 App.xaml 中定义，则全局生效。

---

四、Style 的作用域（资源位置）

位置	作用范围	示例
Application.Resources（App.xaml）	全局	所有窗口
Window.Resources	当前窗口	仅该 Window 内控件
UserControl.Resources	当前用户控件	仅该 UserControl 内
控件的 Resources（如 Grid.Resources）	局部	仅子元素可见

资源查找顺序：控件自身 → 父容器 → Window → Application → 系统默认。

---

五、高级特性

1. 样式继承（BasedOn）

可以基于现有样式扩展新样式：

<Style x:Key="BaseButton" TargetType="Button">
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Padding" Value="8" />
</Style>

<Style x:Key="PrimaryButton" BasedOn="{StaticResource BaseButton}" TargetType="Button">
    <Setter Property="Background" Value="DodgerBlue" />
    <Setter Property="Foreground" Value="White" />
</Style>

✅ 推荐：构建设计系统时，用 BasedOn 实现"基础样式 + 变体"。

---

2. 触发器（Triggers）

动态响应状态变化（如鼠标悬停、是否启用等）：

(1) Property Trigger（属性触发器）

<Style TargetType="Button">
    <Setter Property="Background" Value="LightGray" />
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Yellow" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="Red" />
        </Trigger>
    </Style.Triggers>
</Style>

(2) DataTrigger（数据触发器）

根据绑定数据值改变样式：

<Style TargetType="TextBlock">
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsImportant}" Value="True">
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Foreground" Value="Red" />
        </DataTrigger>
    </Style.Triggers>
</Style>

(3) EventTrigger（事件触发器，常用于动画）

<Style TargetType="Button">
    <Style.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                     From="1.0" To="0.2" Duration="0:0:0.3" AutoReverse="True" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

---

3. 设置 Template（ControlTemplate）

Style 可以完全重定义控件的视觉结构：

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}"
                        CornerRadius="5"
                        Padding="10">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="Orange" />
</Style>

🔥 ControlTemplate 是实现"自定义控件外观"的核心，与 Style 结合可彻底改变控件 UI。

---

六、最佳实践

✅ 1. 优先使用隐式样式（无 Key）统一基础外观

<!-- App.xaml -->
<Style TargetType="TextBox">
    <Setter Property="Margin" Value="2" />
    <Setter Property="Padding" Value="4" />
</Style>

✅ 2. 使用 BasedOn 构建样式体系

<Style x:Key="DefaultButton" TargetType="Button" />
<Style x:Key="SuccessButton" BasedOn="{StaticResource DefaultButton}" ... />
<Style x:Key="DangerButton" BasedOn="{StaticResource DefaultButton}" ... />

✅ 3. 将通用样式放入 App.xaml 实现全局主题

<Application.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe UI" />
        <Setter Property="FontSize" Value="12" />
    </Style>
</Application.Resources>

✅ 4. 避免在代码后台设置属性（破坏样式）

❌ 不推荐：

myButton.Background = Brushes.Red; // 会覆盖 Style 中的 Setter

✅ 推荐：通过 DynamicResource 或绑定控制状态。

---

七、常见问题

Q1：为什么我的 Style 没生效？

• 检查 TargetType 是否匹配；
• 检查资源是否在正确作用域定义；
• 检查是否被本地属性值覆盖（本地值优先级高于 Style）。

WPF 属性值优先级（从高到低）：

1. 本地值（代码或 XAML 直接赋值）
2. 动画
3. Style Setter
4. 默认值

Q2：如何覆盖系统默认样式？

• 定义同 TargetType 的隐式样式即可自动覆盖。
• 或使用 BasedOn="{StaticResource {x:Type Button}}" 继承原生样式再扩展。

---

八、总结

特性	说明
复用性	一套样式应用于多个控件
可维护性	修改一处，全局更新
灵活性	支持触发器、模板、继承
MVVM 友好	无需代码即可实现复杂交互效果

💡 Style 是 WPF UI 开发的基石。掌握它，你就能高效构建一致、美观、可维护的界面。