WPF - Binding in simple User Control

Question

My problem is certainly right on my face but I can't see it...

I am building a very simple user control - a 3D ellipse - and I expose two properties: LightColor and DarkColor. I need to bind these properties to the gradient in my user control, but it is not showing any color at all. Here's my code:

<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; }
    }

If I assign colors as opposed to the binding shown in the code, it works ok, but I want to use the properties I am exposing. What am I doing wrong?

Thanks!

Answer 1

You're issue is likely that aren't notifiying the UserControl of changes made to the value of the DarkColor and LightColor properties. To do so you'll need to implement the INotifyPropertyChanged interface. The purpose of this interface is to make UI components aware of when the value they're bound to is updated; they subscribe to the PropertyChanged event that is exposed by implementing the interface.

A sample implementation is below, I've left the DarkColor property alone, but it would be updated in the same fashion.

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));
    }
}