如何在WinUI中为按钮创建自定义变体主题？

1. 先把Variant枚举和依赖属性捋顺 #

假设你已经写了基础的自定义按钮类，这里补全关键部分，确保属性变更时有回调：

public enum ButtonVariant
{
    Primary,
    Secondary,
    Success,
    Warning,
    Danger
}

public sealed class VariantButton : Button
{
    public static readonly DependencyProperty VariantProperty =
        DependencyProperty.Register(nameof(Variant), typeof(ButtonVariant), typeof(VariantButton), 
            new PropertyMetadata(ButtonVariant.Primary, OnVariantChanged));

    public ButtonVariant Variant
    {
        get => (ButtonVariant)GetValue(VariantProperty);
        set => SetValue(VariantProperty, value);
    }

    private static void OnVariantChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((VariantButton)d).UpdateButtonStyles();
    }

    private void UpdateButtonStyles()
    {
        // 这里写样式切换的逻辑
    }
}

2. 给每个Variant做专属的主题资源字典 #

不用重写整个按钮样式，只要替换WinUI内置按钮用到的那些主题画笔就行。新建一个ButtonVariantThemes.xaml资源字典，给每个Variant定义明暗主题下的颜色：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- Primary 主题 -->
    <ResourceDictionary x:Key="PrimaryVariant">
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="#0078D4"/>
                <SolidColorBrush x:Key="ButtonForeground" Color="White"/>
                <SolidColorBrush x:Key="ButtonBorderBrush" Color="#0078D4"/>
                <!-- 别忘了Hover、Pressed这些状态的画笔 -->
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#106EBE"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#005A9E"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="ButtonBackground" Color="#0078D4"/>
                <SolidColorBrush x:Key="ButtonForeground" Color="White"/>
                <SolidColorBrush x:Key="ButtonBorderBrush" Color="#0078D4"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#106EBE"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#005A9E"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>

    <!-- Secondary 主题 -->
    <ResourceDictionary x:Key="SecondaryVariant">
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="#F3F2F1"/>
                <SolidColorBrush x:Key="ButtonForeground" Color="#1E1E1E"/>
                <SolidColorBrush x:Key="ButtonBorderBrush" Color="#E0E0E0"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#EDEBE9"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#D1D0CE"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="ButtonBackground" Color="#323232"/>
                <SolidColorBrush x:Key="ButtonForeground" Color="#FFFFFF"/>
                <SolidColorBrush x:Key="ButtonBorderBrush" Color="#484848"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#3E3E3E"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#484848"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>

    <!-- Success、Warning、Danger 照着上面的结构写，替换对应颜色就行 -->
</ResourceDictionary>

然后把这个资源字典合并到App.xaml里，确保全局能访问到：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
            <ResourceDictionary Source="ButtonVariantThemes.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

3. 在属性变更时切换资源字典 #

核心逻辑就是：当Variant变了，就把对应Variant的资源字典合并到当前按钮的Resources里，覆盖默认的按钮画笔。这样不用重写整个样式，WinUI内置按钮会自动用新的画笔渲染所有状态：

private void UpdateButtonStyles()
{
    // 先清空之前的Variant资源，避免冲突
    this.Resources.MergedDictionaries.Clear();

    // 根据当前Variant取对应的资源字典
    var targetDict = Variant switch
    {
        ButtonVariant.Primary => Application.Current.Resources["PrimaryVariant"] as ResourceDictionary,
        ButtonVariant.Secondary => Application.Current.Resources["SecondaryVariant"] as ResourceDictionary,
        ButtonVariant.Success => Application.Current.Resources["SuccessVariant"] as ResourceDictionary,
        ButtonVariant.Warning => Application.Current.Resources["WarningVariant"] as ResourceDictionary,
        ButtonVariant.Danger => Application.Current.Resources["DangerVariant"] as ResourceDictionary,
        _ => null
    };

    if (targetDict != null)
    {
        this.Resources.MergedDictionaries.Add(targetDict);
    }
}

为啥这方案比重写样式好？ #

• 完全复用WinUI内置按钮的交互逻辑和状态样式，不用自己写Hover、Pressed这些状态的模板
• 自动适配系统的明暗主题，因为每个Variant都定义了Light/Dark下的颜色
• 代码量少，维护起来方便，改颜色只需要修改资源字典就行

内容的提问来源于stack exchange，提问作者E_FAIL