Click here to Skip to main content
Click here to Skip to main content

Small ColorPicker for WPF

, 22 Mar 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Two basic color pickers for WPF. Small size, limited color palette, and easy to use.

Sample Image

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.

License

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

Share

About the Author

objo

Norway Norway
No Biography provided

Comments and Discussions

 
GeneralMy vote 5 PinmemberMember 790864317-Mar-12 5:51 
QuestionOnly WPF code? PinmemberMember 30824871-Feb-10 0:19 
AnswerRe: Only WPF code? Pinmemberobjo2-Feb-10 5:06 
QuestionCustom Colors Pinmemberjpbochi6-Nov-09 9:32 
AnswerRe: Custom Colors Pinmemberobjo9-Nov-09 22:54 
Questionhow to bind the SelectedColor to a property on the ViewModel PinmemberShafique Kassam27-Aug-09 11:07 
AnswerRe: how to bind the SelectedColor to a property on the ViewModel Pinmemberobjo7-Sep-09 23:14 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150129.1 | Last Updated 22 Mar 2009
Article Copyright 2009 by objo
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid