WPF 将颜色绑定到椭圆并自动更新答案

【问题标题】：WPF Bind color to ellipse and update it automaticallyWPF 将颜色绑定到椭圆并自动更新
【发布时间】：2022-01-13 05:54:36
【问题描述】：

我有这个Ellipse 和RadialGradientBrush，其中颜色绑定到颜色Light 和Dark：

<Grid x:Name="gridEllipse">
  <Ellipse x:Name="ellipseMPCenter">
    <Ellipse.Fill>
      <RadialGradientBrush GradientOrigin="50,50" Center="50,50" Radius="1">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="{Binding Light}" Offset="0"/>
          <GradientStop Color="{Binding Dark}" Offset="1"/>
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Grid>

这是我的代码：

    public class UserControlLED : UserControl, INotifyPropertyChanged
    {
        private readonly Color colorGreenLight = Color.FromRgb(61, 214, 0);
        private readonly Color colorGreenDark = Color.FromRgb(10, 92, 1);
        private readonly Color colorRedLight = Color.FromRgb(235, 0, 0);
        private readonly Color colorRedDark = Color.FromRgb(130, 0, 0);

        private Color light;

        public Color Light
        {
            get
            {
                return light;
            }

            set
            {
                light = value;
                OnPropertyChanged(nameof(Light));
            }
        }

        private Color dark;

        public Color Dark
        {
            get
            {
                return dark;
            }

            set
            {
                dark = value;
                OnPropertyChanged(nameof(Dark));
            }
        }


        public UserControlLED()
        {
            InitializeComponent();

            Light = colorGreenLight;
            Dark = colorGreenDark;

            gridEllipse.DataContext = this;
        }

        private async void BtStartClicked(object sender, RoutedEventArgs args)
        {
            Light = colorRedLight;
            Dark = colorRedDark;
        }

        public event EventHandler<PropertyChangedEventArgs> PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

使用此代码，Ellipse 是绿色的，即使我按下按钮也是如此。当我再次在按钮单击事件中设置DataContext 时，没有任何反应。还是我需要把它放在 OnPropertyChanged 方法中？但这仍然不起作用。

我需要在何时何地设置 DataContext？

【问题讨论】：

标签： wpf data-binding colors inotifypropertychanged datacontext

【解决方案1】：

修复 RadialGradientBrush 的 Center 属性并使用 RelativeSource 绑定：

<Ellipse.Fill>
    <RadialGradientBrush Center="0.5,0.5">
        <RadialGradientBrush.GradientStops>
            <GradientStop
                Color="{Binding Light,
                    RelativeSource={RelativeSource AncestorType=UserControl}}"
                Offset="0"/>
            <GradientStop
                Color="{Binding Dark,
                    RelativeSource={RelativeSource AncestorType=UserControl}}"
                Offset="1"/>
        </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>
</Ellipse.Fill>

不要实现INotifyPropertyChanged，而是将属性声明为依赖属性：

public static readonly DependencyProperty LightProperty =
    DependencyProperty.Register(
        nameof(Light), typeof(Color), typeof(UserControlLED),
        new PropertyMetadata(Colors.White));

public static readonly DependencyProperty DarkProperty =
    DependencyProperty.Register(
        nameof(Dark), typeof(Color), typeof(UserControlLED),
        new PropertyMetadata(Colors.Black));

public Color Light
{
    get { return (Color)GetValue(LightProperty); }
    set { SetValue(LightProperty, value); }
}

public Color Dark
{
    get { return (Color)GetValue(DarkProperty); }
    set { SetValue(DarkProperty, value); }
}

不要显式设置DataContext，因为当你绑定控件的属性时会破坏标准绑定机制

<local:UserControlLED Light="{Binding SomeColor}" .../>

【讨论】：