WPF如何绑定LinearGradientBrush的GradientStop Color属性

绑定失效核心原因 #

1. GradientStop属于Freezable类型的子对象，不在WPF视觉树/逻辑树中，普通绑定无法自动继承父级的DataContext，找不到绑定源。
2. 你定义的是普通CLR属性，没有实现属性变更通知，就算绑定成功，后续修改属性值界面也不会同步更新。另外你贴的XAML代码里三个GradientStop都绑定了MyThumbColor1，属于笔误，需要修正为对应属性。

步骤1：实现属性变更通知 #

不管是在窗体后台还是独立ViewModel中，都需要实现INotifyPropertyChanged接口，示例代码如下：

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Media;

public class GradientConfig : INotifyPropertyChanged
{
    // 初始化默认值和你原来的渐变颜色一致
    private Color _myThumbColor1 = Color.FromRgb(0xc1, 0xdb, 0xe8);
    private Color _myThumbColor2 = Color.FromRgb(0x00, 0x8f, 0xc7);
    private Color _myThumbColor3 = Color.FromRgb(0x06, 0x6c, 0xaa);

    public Color MyThumbColor1
    {
        get => _myThumbColor1;
        set
        {
            _myThumbColor1 = value;
            OnPropertyChanged();
        }
    }

    public Color MyThumbColor2
    {
        get => _myThumbColor2;
        set
        {
            _myThumbColor2 = value;
            OnPropertyChanged();
        }
    }

    public Color MyThumbColor3
    {
        get => _myThumbColor3;
        set
        {
            _myThumbColor3 = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

给你的窗口/用户控件指定DataContext：

<Window x:Class="你的命名空间.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:你的命名空间">
    <Window.DataContext>
        <local:GradientConfig/>
    </Window.DataContext>
    <!-- 其余界面代码 -->
</Window>

步骤2：修正绑定写法 #

根据你的使用场景选择对应方案即可：

方案A：单控件使用（最简单）

直接把LinearGradientBrush写在控件的Brush属性内，通过RelativeSource查找父级元素获取绑定源：

<!-- 示例：给Rectangle设置渐变背景 -->
<Rectangle Width="200" Height="50">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="{Binding DataContext.MyThumbColor1, RelativeSource={RelativeSource AncestorType=Window}}"/>
            <GradientStop Offset="0.5" Color="{Binding DataContext.MyThumbColor2, RelativeSource={RelativeSource AncestorType=Window}}"/>
            <GradientStop Offset="1" Color="{Binding DataContext.MyThumbColor3, RelativeSource={RelativeSource AncestorType=Window}}"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

方案B：当前窗口内复用

如果需要在同一个窗口/用户控件内多个位置使用该渐变，可以作为局部资源，通过x:Reference指定绑定源：

<Window x:Name="RootWindow" x:Class="你的命名空间.MainWindow"
        <!-- 其余命名空间定义 --> >
    <Window.Resources>
        <LinearGradientBrush x:Key="ThumbBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="{Binding DataContext.MyThumbColor1, Source={x:Reference RootWindow}}"/>
            <GradientStop Offset="0.5" Color="{Binding DataContext.MyThumbColor2, Source={x:Reference RootWindow}}"/>
            <GradientStop Offset="1" Color="{Binding DataContext.MyThumbColor3, Source={x:Reference RootWindow}}"/>
        </LinearGradientBrush>
    </Window.Resources>
    <!-- 后续控件可以直接引用资源，例： -->
    <Rectangle Fill="{StaticResource ThumbBrush}" Width="200" Height="50"/>
</Window>

注意事项 #

• 不要将该Brush定义在App.xaml的全局资源中，全局资源加载时窗口实例尚未初始化，会导致绑定源找不到报错。
• 如果是自定义控件场景，可以将三个颜色定义为自定义依赖属性，直接使用TemplateBinding绑定即可。

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