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

Question

我有这个 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？

Answer 1

修复 RadialGradientBrush 的 Center 属性并使用 RelativeSource Bindings:

<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}" .../>

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

WPF Bind color to ellipse and update it automatically

data-binding

wpf

datacontext

colors

inotifypropertychanged