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

Question

我有一个带有RadialGradientBrush的Ellipse，其中颜色绑定到颜色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绑定：

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