WPF - 简单用户控件中的绑定

Question

我的问题当然就在我的脸上，但我看不到它......

我正在构建一个非常简单的用户控件 - 一个 3D 椭圆 - 我公开了两个属性：LightColor 和 DarkColor。我需要将这些属性绑定到我的用户控件中的渐变，但它根本没有显示任何颜色。这是我的用户控件：

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestBrushes"
mc:Ignorable="d"
x:Class="TestBrushes._3DEllipse"
x:Name="UserControl"
d:DesignWidth="200" d:DesignHeight="200">
    <Grid x:Name="LayoutRoot">
        <Ellipse Name="MainEllipse" Stroke="{x:Null}">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,1.1">
                    <GradientStop Color="{Binding ElementName=UserControl, Path=LightColor}" Offset="1"/>
                    <GradientStop Color="{Binding ElementName=UserControl, Path=DarkColor}"  Offset="0"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse Name="TopReflectionEllipse" Stroke="{x:Null}" Margin="38,0,38,0" VerticalAlignment="Top" Height="90">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,0">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1" ScaleY="1"/>
                            <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                            <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#A5FFFFFF" Offset="0"/>
                    <GradientStop Color="#00FFFFFF" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</UserControl>

这是我的代码隐藏：

public partial class _3DEllipse
{
    public _3DEllipse()
    {
        InitializeComponent();
    }

    public Color DarkColor { get; set; }
    public Color LightColor { get; set; }
}

如果我分配颜色而不是代码中显示的绑定，它可以正常工作，但我想使用我公开的属性。我做错了什么？

谢谢！

Answer 1

您的问题可能是您没有通知 UserControl 对 DarkColor 和 LightColor 属性的值所做的更改。为此，您需要实现INotifyPropertyChanged 接口。这个接口的目的是让 UI 组件知道它们绑定的值何时更新；他们订阅通过实现接口公开的 PropertyChanged 事件。

下面是一个示例实现，我单独保留了 DarkColor 属性，但它会以相同的方式更新。

public partial class _3DEllipse : INotifyPropertyChanged
{

    private Color _lightColor;


    public _3DEllipse()
    {
        InitializeComponent();
    }

    // interface implementation
    public event PropertyChangedEventHandler PropertyChanged;

    public Color DarkColor { get; set; }
    public Color LightColor
    {
        get { return _lightColor; }
        set
        {
            // only update value if its changed
            if ( _lightColor == value )
            {
                return;
            }

            _lightColor = value;
            OnPropertyChanged("LightColor");
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if ( PropertyChanged == null ) return;

        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}