Style 类：TargetType 和 BasedOn

一、先纠正：Style 中没有 Target 属性，只有 TargetType

你说的 Target 其实就是 TargetType，这是 Style 的必填属性。

第一部分：TargetType（目标类型）

1. 是什么？

TargetType = 指定这个样式是给谁用的
给谁？→ Button / TextBox / TextBlock / Label 等控件

一句话：
告诉 WPF：这个样式只给 XX 控件使用

2. 必须写吗？

✅ 必须写！
不写会直接报错，样式无法使用。

3. 语法

<Style TargetType="控件类型">

例如：

<Style TargetType="Button">
<Style TargetType="TextBlock">
<Style TargetType="TextBox">

4. TargetType 两大作用

① 限定样式适用的控件

你写 TargetType="Button"，这个样式就只能给 Button 用。

② 省略属性的控件前缀

有了 TargetType，你可以直接写：

<Setter Property="FontSize" Value="20"/>

不用写：

<Setter Property="Button.FontSize" Value="20"/>

5. TargetType 举例（最基础）

正确写法

<Window.Resources>
    <!-- 样式给 Button 使用 -->
    <Style x:Key="MyBtn" TargetType="Button">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Background" Value="LightBlue"/>
    </Style>
</Window.Resources>

<!-- 使用 -->
<Button Style="{StaticResource MyBtn}" Content="测试按钮"/>

错误写法（没写 TargetType）

<!-- 报错！！！ -->
<Style x:Key="MyBtn">
    <Setter Property="FontSize" Value="18"/>
</Style>

6. 不带 x:Key，自动应用

TargetType + 不写 x:Key = 自动应用到当前范围内所有该类型控件

<Window.Resources>
    <!-- 自动应用到所有 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（样式继承）

1. 是什么？

BasedOn = 样式继承
让一个样式继承另一个样式的所有设置，并可以扩展、修改。

一句话：
子样式 = 父样式 + 自己额外的样式

2. 为什么要用？

• 公共样式提取（比如统一字体、边距）
• 减少重复代码
• 统一风格，方便维护

3. 语法

<Style BasedOn="{StaticResource 父样式Key}">

4. 完整举例（最经典）

父样式（基础样式）

<Style x:Key="BaseButtonStyle" TargetType="Button">
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Padding" Value="10,5"/>
    <Setter Property="Margin" Value="5"/>
</Style>

子样式 1（继承 + 红色）

<Style x:Key="RedButton" 
       TargetType="Button" 
       BasedOn="{StaticResource BaseButtonStyle}">
    <Setter Property="Background" Value="Red"/>
</Style>

子样式 2（继承 + 蓝色）

<Style x:Key="BlueButton" 
       TargetType="Button" 
       BasedOn="{StaticResource BaseButtonStyle}">
    <Setter Property="Background" Value="Blue"/>
</Style>

使用

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

效果

两个按钮都拥有：

• 字体大小 18
• 内边距 10,5
• 外边距 5

又各自拥有自己的背景色。

5. 多层继承（爷爷 → 爸爸 → 儿子）

<!-- 爷爷 -->
<Style x:Key="Base" TargetType="Button">
    <Setter Property="FontSize" Value="18"/>
</Style>

<!-- 爸爸 -->
<Style x:Key="Parent" 
       TargetType="Button" 
       BasedOn="{StaticResource Base}">
    <Setter Property="Foreground" Value="White"/>
</Style>

<!-- 儿子 -->
<Style x:Key="Child" 
       TargetType="Button" 
       BasedOn="{StaticResource Parent}">
    <Setter Property="Background" Value="Green"/>
</Style>

6. 重要规则

1. 必须 TargetType 相同才能继承
   Button 样式只能继承 Button 样式
2. 子样式可以覆盖父样式的属性
   父：Background="Blue"
   子：Background="Red" → 以子为准
3. 自动样式也能继承

<Style TargetType="Button" BasedOn="{StaticResource Base}">

第三部分：TargetType + BasedOn 综合实战（最标准）

<Window.Resources>
    <!-- 基础样式：所有控件共用 -->
    <Style x:Key="BaseControl" TargetType="Control">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="Margin" Value="5"/>
    </Style>

    <!-- 按钮样式继承基础样式 -->
    <Style TargetType="Button" 
           BasedOn="{StaticResource BaseControl}">
        <Setter Property="Background" Value="CornflowerBlue"/>
    </Style>

    <!-- TextBlock 样式继承基础样式 -->
    <Style TargetType="TextBlock" 
           BasedOn="{StaticResource BaseControl}">
        <Setter Property="Foreground" Value="DarkRed"/>
    </Style>
</Window.Resources>

<!-- 自动应用样式 -->
<Button Content="按钮"/>
<TextBlock Text="文本"/>

第四部分：超级总结（必背）

1. TargetType

• 指定样式给谁用
• 必须写
• 不写 x:Key 就自动应用到所有该控件

2. BasedOn

• 样式继承
• 子样式拥有父样式全部属性
• 可扩展、覆盖父样式
• 相同 TargetType 才能继承

一句话记忆

TargetType 定身份，BasedOn 做继承！