User Control DataContext/Binding Issue with Dependency Property WPF

Question

Ok, so my problem is I have a user control. In the xaml I bind some colors to color properties that I have created as shown below.

<GradientStop x:Name="stop1" Color="{Binding Color1}" Offset="0"/>
<GradientStop x:Name="stop2" Color="{Binding Color2}" Offset="1"/>

In my code behind I have a DependencyProperty that I have declared as shown below.

public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register("IsActive", typeof(bool), typeof(Bin), 
new PropertyMetadata(new PropertyChangedCallback(Bin.IsActivePropertyChanged)));

The dependency property has a PropertyChangedCallback that it calls called IsActivePropertyChanged as shown below.

private static void IsActivePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
            Bin b = (Bin)d;
            if((bool)e.NewValue)

            {
                b.Color1 = Color.FromArgb(0xFF, 0x3E, 0x3E, 0x3E);
                b.Color2 = Colors.Red;
                b.Color3 = Colors.Red;
                b.Color4 = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF);
            }
            else
            {
                b.Color1 = Color.FromArgb(0xFF, 0x3E, 0x3E, 0x3E);
                b.Color2 = Color.FromArgb(0xFF, 0x83, 0x83, 0x83);
                b.Color3 = Color.FromArgb(0xFF, 0x63, 0x63, 0x63);
                b.Color4 = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF);
            }
        }

If I use the constructor below, the color changes inside of the constructor work fine, however, my IsActivePropertyChangedEvent never gets fired. I am assuming because of the DataContext assignment in the constructor.

 public Bin()
        {
            Color1 = Color.FromArgb(0xFF, 0x3E, 0x3E, 0x3E);
            Color2 = Color.FromArgb(0xFF, 0x83, 0x83, 0x83);
            Color3 = Color.FromArgb(0xFF, 0x63, 0x63, 0x63);
            Color4 = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF);
            InitializeComponent();
            DataContext = this;
        }

If I comment out the DataContext assignment and use the constructor below, my Color assignments do not work, but the IsActivePropertyChanged event fires fine.

public Bin()
            {
                Color1 = Color.FromArgb(0xFF, 0x3E, 0x3E, 0x3E);
                Color2 = Color.FromArgb(0xFF, 0x83, 0x83, 0x83);
                Color3 = Color.FromArgb(0xFF, 0x63, 0x63, 0x63);
                Color4 = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF);
                InitializeComponent();
                //DataContext = this;
            }

My question is how can i get the binding to work correctly and have my event fire as well. I have tried setting the DataContext="{Binding RelativeSource={RelativeSource Self}}" (instead of setting the DataContext in the code behind) of the items that are bound to the Color Properties in XAML, a rectangle and a polygon, but that didn't seem to work. Thanks in advance for any help.

Answer 1

When writing your own control, you shouldn't mess with the DataContext of the control itself.

Instead, on the binding of the GradientStop , you can use RelativeSource={RelativeSource AncestorType=Bin} (assuming Bin is your control). Or you can define a template and use TemplateBinding. Check this answer I wrote a while back for a similar question - it has more detailed description of how this works.