Style类

一、Style 是什么？

Style = WPF 控件的 “CSS 样式表”
作用：统一设置控件的属性、外观、行为，实现：

• 界面统一
• 代码复用
• 便于维护
• 解耦界面与样式

一句话：
一个 Style，给 N 个控件用，改一处，全部变！

二、Style 类的 4 个核心属性

public class Style : DispatcherObject, INameScope, IHaveResources
{
    // 目标控件类型（必须写！例如 Button、TextBlock）
    public Type TargetType { get; set; }

    // 样式名字（用来引用）
    public string ResourceKey { get; set; }

    // 继承自哪个样式
    public Style BasedOn { get; set; }

    // 属性集合（设置控件属性）
    public SetterBaseCollection Setters { get; }

    // 触发器（鼠标悬浮、选中、禁用等）
    public TriggerCollection Triggers { get; }
}

最关键的 4 个：

1. TargetType → 目标控件类型
2. x:Key → 样式名字
3. Setters → 设置属性
4. Triggers → 交互效果

三、最基础示例：给 Button 定义样式

1. 定义 Style（放在 Resources 里）

<Window.Resources>
    <!-- 定义样式：给 Button 使用 -->
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <!-- 设置属性 -->
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="CornflowerBlue"/>
        <Setter Property="Padding" Value="10,5"/>
        <Setter Property="Margin" Value="5"/>
    </Style>
</Window.Resources>

2. 使用 Style

<!-- 引用样式 -->
<Button Style="{StaticResource MyButtonStyle}" Content="按钮1"/>
<Button Style="{StaticResource MyButtonStyle}" Content="按钮2"/>
<Button Style="{StaticResource MyButtonStyle}" Content="按钮3"/>

效果

三个按钮外观完全一样，修改 Style 里的颜色，所有按钮同步变化。

四、不带 x:Key → 自动应用样式

如果不写 x:Key，此类型的所有控件自动应用该样式！

<Window.Resources>
    <!-- 无 x:Key → 所有 Button 自动使用 -->
    <Style TargetType="Button">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Background" Value="LightGreen"/>
    </Style>
</Window.Resources>

使用：

<!-- 不用写 Style=""，自动应用！ -->
<Button Content="按钮1"/>
<Button Content="按钮2"/>

超级方便！

五、样式继承（BasedOn）

可以让一个样式继承另一个样式，实现扩展。

<Window.Resources>
    <!-- 基础样式 -->
    <Style x:Key="BaseStyle" TargetType="Button">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Margin" Value="5"/>
    </Style>

    <!-- 红色按钮（继承基础样式） -->
    <Style x:Key="RedButton" TargetType="Button" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Background" Value="Red"/>
    </Style>

    <!-- 蓝色按钮（继承基础样式） -->
    <Style x:Key="BlueButton" TargetType="Button" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Background" Value="Blue"/>
    </Style>
</Window.Resources>

使用：

<Button Style="{StaticResource RedButton}" Content="红色"/>
<Button Style="{StaticResource BlueButton}" Content="蓝色"/>

六、触发器（Triggers）—— 交互效果核心

Style 最强功能：交互样式（鼠标悬浮、点击、选中、禁用）

示例：鼠标悬浮变色按钮

<Style x:Key="HoverButton" TargetType="Button">
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Background" Value="LightBlue"/>

    <!-- 触发器：鼠标悬浮 -->
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="DarkBlue"/>
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>
</Style>

 

效果：

• 正常 → 浅蓝
• 鼠标放上去 → 深蓝底白字

更多触发器

<!-- 按钮禁用时 -->
<Trigger Property="IsEnabled" Value="False">
    <Setter Property="Background" Value="Gray"/>
</Trigger>

<!-- 获得焦点时 -->
<Trigger Property="IsFocused" Value="True">
    <Setter Property="BorderBrush" Value="Red"/>
</Trigger>

七、给 TextBlock 用 Style

<Window.Resources>
    <Style x:Key="TitleText" TargetType="TextBlock">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="DarkRed"/>
        <Setter Property="Margin" Value="10"/>
    </Style>
</Window.Resources>

<TextBlock Style="{StaticResource TitleText}" Text="标题"/>

八、Style 中设置布局属性

<Style TargetType="TextBox">
    <Setter Property="Width" Value="200"/>
    <Setter Property="Height" Value="35"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Padding" Value="5"/>
</Style>

九、MultiTrigger 多条件触发

满足多个条件才生效：

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsMouseOver" Value="True"/>
        <Condition Property="IsEnabled" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" Value="Green"/>
</MultiTrigger>

十、Style 重点总结（必须背会）

1. Style = 控件外观集合
2. TargetType → 必须写，指定控件类型
3. x:Key → 用来引用样式
4. Setter → 设置属性
5. Trigger → 交互效果（悬浮、选中、禁用）
6. BasedOn → 样式继承
7. 无 x:Key → 自动应用到所有该类型控件

十一、最实用完整示例（可直接复制）

<Window.Resources>
    <Style TargetType="Button" x:Key="PerfectButton">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Background" Value="#0077D4"/>
        <Setter Property="Padding" Value="12,6"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="BorderThickness" Value="0"/>
        
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#005AA1"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="#004488"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="#AAAAAA"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<Button Style="{StaticResource PerfectButton}" Content="标准按钮"/>

最终一句话总结

Style = WPF 的样式系统，用 Setter 设置外观，用 Trigger 做交互，一处定义，全局复用！