Question

I’m working with the WPF Extended Toolkit’s Property Editor, and I need to add support for editing System.Drawing.Color using the color editor that comes with this Toolkit.

The current color editor does its job via a Color Picker component, and seems to use data binding to wire up the Color Picker’s SelectedColor property directly to the edited object’s color property. Unfortunately the Toolkit’s editors are implemented by returning a DependencyProperty to bind to, rather than by being asked to bind it themselves, so it doesn’t seem I can insert the (absolutely trivial) type conversion there.

I see only two other ways of doing this:

• duplicate the entire Color Picker, changing the type of the property it edits. This is the last thing I want to do for obvious reasons.
• expose a second Color property from the Color Picker, of the type System.Drawing.Color, so that my new color editor can tell the property grid to bind to that one. But I’ve been told that having two dependency properties with the same underlying value is a terrible idea.

Is there a better way?

If I really should expose two kinds of Color properties in the Color Picker component, what’s the correct way to keep them “in sync”?

Answer 1

You can data bind to a System.Drawing.Color using a value converter. This works in my test environment.

public class SystemDrawingColorConverter : IValueConverter
{
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        System.Windows.Media.Color color = (System.Windows.Media.Color)value;
        return System.Drawing.Color.FromArgb(color.A, color.R, color.G, color.B);
    }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        System.Drawing.Color color = (System.Drawing.Color)value;
        return System.Windows.Media.Color.FromArgb(color.A, color.R, color.G, color.B);
    }
}

The XAML:

<Grid>
    <Grid.Resources>
        <local:SystemDrawingColorConverter x:Key="converter" />
    </Grid.Resources>
    <Grid.DataContext>
        <local:VM />
    </Grid.DataContext>
    <tk:ColorPicker SelectedColor="{Binding Color, Converter={StaticResource converter}}" />
</Grid>

code for the test view model:

public class VM
{
    private System.Drawing.Color _color;

    public System.Drawing.Color Color
    {
        get { return _color; }
        set { _color = value; }
    }

}