Question

I have a custom class, “FavoriteColor” that has three properties, R, G and B. Now I want to draw a rectangle and fill it with these R, G and B values (using databinding). I tried the following snippet in my xaml, but gives me a compile time error.

                <Rectangle Width="10" Height="10" Grid.Column="4">
                    <Rectangle.Fill>
                        <SolidColorBrush>
                            <SolidColorBrush.Color>
                                <Color R="{Binding Path=R}" />
                                <Color G="{Binding Path=G}" />
                                <Color B="{Binding Path=B}" />
                            </SolidColorBrush.Color>
                        </SolidColorBrush>
                    </Rectangle.Fill>
                </Rectangle>

It says that the properties R, G and B of Color class are not dependency properties. I know that you can bind data only to dependency properties, but in this case, how do I bind my R, G and B with the rectangle’s fill color.

Is there any other way other than by declaring one more property of type color and then initializing it when R, G and B are set? Also why the R, G and B of the color class are not dependency properties?

Answer 1

Let’s do this using a MultiBinding and an IMultiValueConverter. Here’s a full sample.

First, the xaml for Window1. We’ll set up three Sliders and bind their values to the Window’s Background property via a SolidColorBrush.

<Window x:Class="WpfApplication16.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:WpfApplication16"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <my:RgbConverter x:Key="RgbConverter" />
    </Window.Resources>
    <Window.Background>
        <SolidColorBrush>
            <SolidColorBrush.Color>
                <MultiBinding Converter="{StaticResource RgbConverter}">
                    <Binding Path="Value" ElementName="redSlider" />
                    <Binding Path="Value" ElementName="greenSlider" />
                    <Binding Path="Value" ElementName="blueSlider" />
                </MultiBinding>
            </SolidColorBrush.Color>
        </SolidColorBrush>
    </Window.Background>
    <StackPanel>
        <Slider Minimum="0" Maximum="255" x:Name="redSlider" />
        <Slider Minimum="0" Maximum="255" x:Name="greenSlider" />
        <Slider Minimum="0" Maximum="255" x:Name="blueSlider" />
    </StackPanel>
</Window>

Next, the converter. Note that I’m not doing any error checking here – you really should check that the length of the values array is 3 and that the individual values are valid bytes etc.

public class RgbConverter : IMultiValueConverter
{
    #region IMultiValueConverter Members

    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var r = System.Convert.ToByte(values[0]);
        var g = System.Convert.ToByte(values[1]);
        var b = System.Convert.ToByte(values[2]);

        return Color.FromRgb(r, g, b);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

That’s it! No other code-behind is necessary.