Small ColorPicker for WPF

• Download demo project - 29.3 KB

Introduction

This article describes two basic color pickers for WPF. These pickers are suited for user interfaces where you want to select a color from a limited palette. Two clicks should be enough to change the color, and the control should be limited in size as a combobox button. The objective is not to support all possible colors and opacities. Extra colors can be added to the palette using the AddColor methods.

The SmallColorPicker contains only the color values, and uses a WrapPanel for the dropdown.

The ComboColorPicker contains both the color value and the name of the color. The constant colors from the Colors class are enumerated for the color list.

Using the controls

Add this namespace to the Window element:

xmlns:osc="clr-namespace:OpenSourceControls"

and add the control like:

<osc:SmallColorPicker x:Name="ColorPicker1" SelectedColor="Red" 
      ColorChanged="ColorPicker1_ColorChanged"/>

or:

<osc:ComboColorPicker x:Name="ColorPicker2" SelectedColor="Red" 
      ColorChanged="ColorPicker2_ColorChanged"/>

You can bind to the selected color or brushlike:

<Rectangle Fill="{Binding ElementName=ColorPicker1, Path=SelectedBrush}" 
      Stroke="Black" Width="48" Height="20"/>

or you can bind the picker to a Color property:

<osc:SmallColorPicker x:Name="ColorPicker1" SelectedColor="{Binding Path=Color}" 
      ColorChanged="ColorPicker1_ColorChanged"/>

Properties

• SelectedColor
• SelectedBrush (returns a SolidColorBrush)

Events

• ColorChanged

Methods

• AddColor(Color color) - adds a color to the ComboBox list (for the SmallColorPicker)
• AddColor(Color color, string name) - adds a color to the ComboBox list (for the ComboColorPicker)

Points of interest for the SmallColorPicker

The ItemTemplate of the ComboBox contains a Rectangle. The items of the ComboBox are of type Color, so a Color to Brush converter is necessary for the Fill property.

<ComboBox.ItemTemplate>
    <DataTemplate>
        <Rectangle Width="16" Height="16" HorizontalAlignment="Center"
            Fill="{Binding Converter={StaticResource ColorToBrushConverter}}" 
            Stroke="Black" Margin="0 1 0 1"/>
    </DataTemplate>
</ComboBox.ItemTemplate>

A WrapPanel is used for the ItemsPanel template:

<ComboBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel Width="111" Margin="0 2 0 2"/>
    </ItemsPanelTemplate>
</ComboBox.ItemsPanel>

Points of interest for the ComboColorPicker

The color and names are contained in a ColorViewModel class:

public class ColorViewModel
{
    public Color Color { get; set; }
    public Brush Brush { get { return new SolidColorBrush(Color); } }
    public string Name { get; set; }
}

A DataTemplate is defined in the User Control resources:

<DataTemplate DataType="{x:Type local:ColorViewModel}">
    <StackPanel Orientation="Horizontal" Margin="2">
        <Grid>
            <Rectangle Fill="{Binding ElementName=ThisColorPicker, Path=CheckerBrush}" 
              Stroke="Black" SnapsToDevicePixels="True" 
              Width="14" Height="14"/>
            <Rectangle Fill="{Binding Path=Brush}" Stroke="Black" 
              SnapsToDevicePixels="True" 
              Width="14" Height="14"/>
        </Grid>
        <TextBlock Text="{Binding Path=Name}" 
            Margin="4 0 4 0" VerticalAlignment="Center"/>
    </StackPanel>
</DataTemplate>

Future enhancements

• Add a "More colors..." button that opens a color dialog.
• Is the notification mechanism OK? Please comment.
• Localizing of color names for the ComboColorPicker.

History

• March 21, 2009 - First post.