从 WPF 到 Avalonia 的迁移系列实战篇6：ControlTheme 和 Style区别

从 WPF 到 Avalonia 的迁移系列实战篇6：ControlTheme 和 Style区别

我的GitHub仓库Avalonia学习项目包含完整的Avalonia实践案例与代码对比。
我的gitcode仓库是Avalonia学习项目。

前言

在之前的文章中，我们介绍了 Avalonia 的基础样式系统。本文将结合实际示例，展示 Avalonia 11 新引入的 ControlTheme 与传统 Style 的区别，帮助大家更直观地理解两者的适用场景。

ControlTheme 与 Style 的差异回顾

• ControlTheme：

  • 定义控件外观主题。
  • 通过 Theme 属性应用到控件。
  • 支持 BasedOn 继承，可重用。
  • 一次只能应用一个主题（互斥）。

• Style：

  • 通过选择器和 Classes 应用。
  • 不支持 BasedOn，容易重复代码。
  • 可以叠加多个样式（更灵活）。

实战对比示例

我们通过定义 两种按钮样式（白字按钮 和 黑字按钮） 来对比 ControlTheme 与 Style 的使用效果。

使用 ControlTheme

<ControlTheme TargetType="{x:Type Button}" x:Key="WhiteForegroundButtonStyle">
    <Setter Property="Background" Value="LightBlue" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="12,6" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" CornerRadius="0">
                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style Selector="^:pointerover">
        <Setter Property="Foreground" Value="DodgerBlue" />
    </Style>
</ControlTheme>

<ControlTheme
    BasedOn="{StaticResource WhiteForegroundButtonStyle}"
    TargetType="{x:Type Button}"
    x:Key="BlackForegroundButtonStyle">
    <Setter Property="Foreground" Value="Black" />
</ControlTheme>

使用方式

<Button Theme="{StaticResource WhiteForegroundButtonStyle}">白字按钮</Button>
<Button Theme="{StaticResource BlackForegroundButtonStyle}">黑字按钮</Button>

👉 优点：

• 只需定义一次基础主题，通过 BasedOn 即可派生新主题。
• 适合 可切换的控件外观，比如深色/浅色主题按钮。

使用 Style

<Style Selector="Button.squareWhiteForeground">
    <Setter Property="Background" Value="LightBlue" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="12,6" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" CornerRadius="0">
                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style Selector="Button.squareWhiteForeground:pointerover">
    <Setter Property="Foreground" Value="DodgerBlue" />
</Style>

<Style Selector="Button.squareBlackForeground">
    <Setter Property="Background" Value="LightBlue" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="12,6" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" CornerRadius="0">
                    <ContentPresenter
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style Selector="Button.squareBlackForeground:pointerover">
    <Setter Property="Foreground" Value="DodgerBlue" />
</Style>

使用方式

<Button Classes="squareWhiteForeground">白字按钮</Button>
<Button Classes="squareBlackForeground">黑字按钮</Button>

👉 缺点：

• 黑白两套样式几乎完全重复，无法 BasedOn 继承。
• 如果需要维护多个按钮风格，样式代码会迅速膨胀。

对比总结

控件主题的查找规则

Avalonia 查找 ControlTheme 的方式有两种：

1. 如果控件的 Theme 属性被设置，则优先使用该主题；
2. 否则，Avalonia 会沿逻辑树向上搜索 ControlTheme，查找一个 x:Key 与控件样式键匹配的资源。

两种定义方式

• 如果希望主题应用于所有实例：

  <ControlTheme x:Key="{x:Type Button}" TargetType="Button">
      ...
  </ControlTheme>
  

• 如果只想应用于特定实例：

  <ControlTheme x:Key="EllipseButton" TargetType="Button">
      ...
  </ControlTheme>
  

  然后在控件上显式设置 Theme="{StaticResource EllipseButton}"。

迁移建议（WPF → Avalonia）

在 WPF 中：

• 控件外观通过 Style + ControlTemplate 定义；
• 没有 ThemeDictionary 概念，Light/Dark 主题需要手动维护多份 ResourceDictionary；
• 样式支持 BasedOn，可以复用。

在 Avalonia 中：

• 默认主题可以通过 ControlTheme 定义在资源字典中；
• 支持 ThemeVariant，原生支持 Light/Dark 切换；
• ControlTheme 支持 BasedOn，比普通样式更适合做主题继承；
• 普通 Style 没有 BasedOn，更多依赖 Classes + Selector。
• 如果是 控件主题（可切换外观） → 使用 ControlTheme。
• 如果是 局部样式修饰/条件状态 → 使用 Style。

总结

本篇我们通过 白字按钮 vs 黑字按钮 的 Demo，直观对比了 ControlTheme 与 Style 的核心区别。

• Style 更适合定义局部样式，通过 Selector 和 Class 应用。
• ControlTheme 更适合定义可替换的控件外观（尤其是模板控件），支持 ThemeVariant 和 BasedOn，便于多主题切换。
• 从 WPF 迁移到 Avalonia 时，可以将 generic.xaml 中的默认样式迁移为 ControlTheme，并利用 ThemeVariant 来实现 Light/Dark 主题支持。

这样既能保留 WPF 开发的经验，又能充分利用 Avalonia 11 带来的新特性。

我的GitHub仓库Avalonia学习项目包含完整的Avalonia实践案例与代码对比。
我的gitcode仓库是Avalonia学习项目。