WPF - Связывание в простом пользовательском контроле

Question

Моя проблема, конечно, прямо на моем лице, но я не вижу ее...

Я создаю очень простой пользовательский элемент управления - трехмерный эллипс - и раскрываю два свойства: LightColor и DarkColor. Мне нужно связать эти свойства с градиентом в моем пользовательском элементе управления, но он вообще не показывает какого-либо цвета. Вот мой usercontrol:

<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. Цель этого интерфейса - информировать компоненты пользовательского интерфейса о том, когда обновляется значение, к которому они привязаны; они подписываются на событие 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));
    }
}