How do I bind a CustomControl Property to the cont

Question

This is a follow up question to the one I asked here -

The control class has a dependency property -

private static readonly DependencyProperty
    _Color = DependencyProperty.Register( "Color", typeof( Color ), typeof( ColorDefiner ), new PropertyMetadata( Colors.Black ) );

public Color Color {
    get { return ( Color )this.GetValue( ColorDefiner._Color ); }
    set { this.SetValue( ColorDefiner._Color, value ); }
}

In the control XAML, how do I access that property so that I may bind it bi-directionaly to the controls sliders responsible for defining the color property?

EDIT

This is the code for one of the sliders -

<Slider
    x:Name="sdrRed" Height="32" Minimum="0" Maximum="1" Width="294" TickPlacement="Both"
    TickFrequency="0.01" Value="{Binding Color, Mode=TwoWay, ElementName=Me}">
</Slider>

Me is the name of the UserControl. My thinking is that the problem is because I am pointing to the Color.ScR and etc.

Rather than binding the Value of the Slider to the Color property, I think I need to bind the Color property to a MultiBinding using the Slider Value properties.

EDIT

This to me feels like a place where I should implement MVVM - Can someone tell me how I might go about doing that here?

Answer 1

If I understand well you have a userControl that has sliders inside. That's how I do it in Xaml do the following.

<UserControl x:Name="MultiSlider">
...
<Slider Color="{Binding Color, ElementName="MultiSlider"}.../>
...
</UserControl>

and the same with other properties and with the other Sliders.

ADDED

In the User control you need to add 4 dependency properties:

public Color Color
    {
        get { return (Color)GetValue(ColorProperty); }
        set { SetValue(ColorProperty, value); }
    }

    public static readonly DependencyProperty ColorProperty =
        DependencyProperty.Register("Color", typeof(Color), typeof(MySlider), new PropertyMetadata(Colors.Red));

And the rest of properties

public double RValue
    {
        get { return (double)GetValue(RValueProperty); }
        set { SetValue(RValueProperty, value); }
    }

    public static readonly DependencyProperty RValueProperty =
        DependencyProperty.Register("RValue", typeof(double), typeof(MySlider), new PropertyMetadata(0, ValueChanged));

    private static void ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var currentColor = (d as MySlider).Color;
        var newcolor = new Color() { R = (byte)e.NewValue, B = currentColor.B, G = currentColor.G };
        (d as MySlider).Color  = newcolor;
    }

And then for the Green and Blue, and be careful on the casting of the NewValue I do not know if the slider range goes up to 255.

Answer 2

If I understand you correctly you'd like to multi-bind the ColorDefiner.Color property to the sliders inside the ColorDefiner itself. In order to do it in XAML, you'll need to do it using a style (you'll also need to specify fully qualified property name due to the style's target type restriction):

<UserControl ...>
    <UserControl.Style>
        <Style>
            <Setter Property="local:ColorDefiner.Color">
                <MultiBinding Converter="{StaticResource colorConverter}">
                    <Binding ElementName="sdrAlpha" Path="Value" Mode="TwoWay" />
                    <Binding ElementName="sdrRed" Path="Value" Mode="TwoWay" />
                    <Binding ElementName="sdrGreen" Path="Value" Mode="TwoWay" />
                    <Binding ElementName="sdrBlue" Path="Value" Mode="TwoWay" />
                </MultiBinding>
            </Setter>
        </Style>
    <UserControl.Style>
    <!-- sliders -->
</UserControl>

This approach has a huge drawback though - if end user sets a style for the control or sets a custom biding on the Color property, the multi-binding will be lost. On the other hand, if end user sets custom content for the control the sliders will be gone. That's why in this scenario you should really consider using CustomControl together with a template instead of UserControl and combine the output color in code-behind.