Click here to Skip to main content
15,795,791 members
Articles / Desktop Programming / WPF

Small ColorPicker for WPF

Rate me:
Please Sign up or sign in to vote.
4.30/5 (7 votes)
22 Mar 2009CPOL1 min read 61.8K   2.5K   20   7
Two basic color pickers for WPF. Small size, limited color palette, and easy to use.

Sample Image


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:


and add the control like:

<osc:SmallColorPicker x:Name="ColorPicker1" SelectedColor="Red" 


<osc:ComboColorPicker x:Name="ColorPicker2" SelectedColor="Red" 

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}" 


  • SelectedColor
  • SelectedBrush (returns a SolidColorBrush)


  • ColorChanged


  • 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.

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

A WrapPanel is used for the ItemsPanel template:

        <WrapPanel Width="111" Margin="0 2 0 2"/>

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">
            <Rectangle Fill="{Binding ElementName=ThisColorPicker, Path=CheckerBrush}" 
              Stroke="Black" SnapsToDevicePixels="True" 
              Width="14" Height="14"/>
            <Rectangle Fill="{Binding Path=Brush}" Stroke="Black" 
              Width="14" Height="14"/>
        <TextBlock Text="{Binding Path=Name}" 
            Margin="4 0 4 0" VerticalAlignment="Center"/>

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.


  • March 21, 2009 - First post.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Norway Norway
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

GeneralMy vote 5 Pin
Member 790864317-Mar-12 5:51
Member 790864317-Mar-12 5:51 
QuestionOnly WPF code? Pin
Thornik1-Feb-10 0:19
Thornik1-Feb-10 0:19 
AnswerRe: Only WPF code? Pin
objo2-Feb-10 5:06
objo2-Feb-10 5:06 
QuestionCustom Colors Pin
jpbochi6-Nov-09 9:32
professionaljpbochi6-Nov-09 9:32 
I think I'll use these controls in a little game I'm developing.

I noticed that the set of available colors are somewhat hard-coded in the controls. Is there a way to make the list of color customizable? I guess I could do it myself, but I don't have much time for it. Anyways, I think this is a good feature to have in a future release.

A second question. Do you have a newer version of these controls?

They very good, by the way.

AnswerRe: Custom Colors Pin
objo9-Nov-09 22:54
objo9-Nov-09 22:54 
Questionhow to bind the SelectedColor to a property on the ViewModel Pin
Shafique Kassam27-Aug-09 11:07
Shafique Kassam27-Aug-09 11:07 
AnswerRe: how to bind the SelectedColor to a property on the ViewModel Pin
objo7-Sep-09 23:14
objo7-Sep-09 23:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.