如何自动计算并显示叠加背景的最终颜色（取色器效果）

核心颜色叠加计算逻辑 #

半透明白色叠加在深色背景上的最终颜色，可通过以下规则计算：

• 将十六进制Alpha值转为0~1的透明度：透明度 = Alpha值 / 255（例如#0D对应的透明度为13/255≈0.0509）
• 最终RGB通道值：最终值 = 背景RGB值*(1-透明度) + 255*透明度（白色的RGB通道值均为255）
• 将计算后的RGB值转回十六进制，组合成最终颜色代码。

方法一：自定义MarkupExtension实现ResourceDictionary内自动计算 #

创建自定义MarkupExtension，直接在资源字典中根据背景色和透明度生成Elevation颜色，支持背景色变更时实时更新：

using System;
using System.Windows;
using System.Windows.Markup;
using System.Windows.Media;

[MarkupExtensionReturnType(typeof(SolidColorBrush))]
public class ElevationColorExtension : MarkupExtension
{
    public DynamicResourceReference BackgroundBrushReference { get; set; }
    public byte Alpha { get; set; }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var brush = BackgroundBrushReference.ProvideValue(serviceProvider) as SolidColorBrush;
        if (brush == null) return Brushes.Black;

        var opacity = Alpha / 255.0;
        var bgColor = brush.Color;

        byte r = (byte)Math.Round(bgColor.R * (1 - opacity) + 255 * opacity);
        byte g = (byte)Math.Round(bgColor.G * (1 - opacity) + 255 * opacity);
        byte b = (byte)Math.Round(bgColor.B * (1 - opacity) + 255 * opacity);

        var resultColor = Color.FromRgb(r, g, b);
        return new SolidColorBrush(resultColor) { DynamicResourceReference = BackgroundBrushReference };
    }
}

在ResourceDictionary中使用该扩展：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:YourNamespace">
    <SolidColorBrush x:Key="Primary" Color="#008080"/>
    <SolidColorBrush x:Key="PrimaryVariant" Color="#4DCECF"/>
    <SolidColorBrush x:Key="Secondary" Color="#B894F6"/>
    <SolidColorBrush x:Key="SecondaryVariant" Color="#9A66F4"/>

    <SolidColorBrush x:Key="Background" Color="#131313"/>
    <!-- 根据不同Alpha值生成对应Elevation颜色 -->
    <local:ElevationColorExtension x:Key="Elevation1" 
                                   BackgroundBrushReference="{DynamicResource Background}" 
                                   Alpha="0x0D"/>
    <local:ElevationColorExtension x:Key="Elevation2" 
                                   BackgroundBrushReference="{DynamicResource Background}" 
                                   Alpha="0x1A"/>
    <local:ElevationColorExtension x:Key="Elevation3" 
                                   BackgroundBrushReference="{DynamicResource Background}" 
                                   Alpha="0x29"/>
    <local:ElevationColorExtension x:Key="Elevation4" 
                                   BackgroundBrushReference="{DynamicResource Background}" 
                                   Alpha="0x38"/>

    <SolidColorBrush x:Key="OnPrimary" Color="Black"/>
    <SolidColorBrush x:Key="OnSecondary" Color="Black"/>
    <SolidColorBrush x:Key="OnBackground" Color="White"/>
</ResourceDictionary>

方法二：用IValueConverter在界面实时显示颜色代码 #

创建转换器，将背景色和Alpha值转换为对应的十六进制颜色代码：

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Media;

public class ElevationColorCodeConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length != 2 || values[0] is not SolidColorBrush bgBrush || values[1] is not byte alpha)
            return "#000000";

        var opacity = alpha / 255.0;
        var bgColor = bgBrush.Color;

        byte r = (byte)Math.Round(bgColor.R * (1 - opacity) + 255 * opacity);
        byte g = (byte)Math.Round(bgColor.G * (1 - opacity) + 255 * opacity);
        byte b = (byte)Math.Round(bgColor.B * (1 - opacity) + 255 * opacity);

        return $"#{r:X2}{g:X2}{b:X2}";
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

在界面中绑定并显示颜色代码：

<Window.Resources>
    <local:ElevationColorCodeConverter x:Key="ElevationColorCodeConverter"/>
</Window.Resources>

<Grid Grid.Row="1" Grid.Column="2">
    <Border Background="{DynamicResource Background}"/>
    <Border Background="{DynamicResource Elevation1}"
            Style="{StaticResource ElevationStyle}">
        <TextBlock Style="{StaticResource TextBlockStyle}">
            <MultiBinding Converter="{StaticResource ElevationColorCodeConverter}">
                <Binding Source="{DynamicResource Background}"/>
                <Binding Source="0x0D"/> <!-- 对应Elevation1的Alpha值 -->
            </MultiBinding>
        </TextBlock>
    </Border>
</Grid>

关键说明 #

• 因使用DynamicResource，当Background颜色变更时，自定义扩展和转换器会自动重新计算，实现实时更新。
• Alpha值可按需调整，对应不同层级的Elevation透明度（如0x0D对应5%、0x1A对应10%）。

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