Click here to Skip to main content
11,716,938 members (85,095 online)
Click here to Skip to main content

Small ColorPicker for WPF

, 21 Mar 2009 CPOL 35.8K 1.8K 18
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

You may also be interested in...

Comments and Discussions

 
GeneralMy vote 5 Pin
Member 790864317-Mar-12 4:51
memberMember 790864317-Mar-12 4:51 
QuestionOnly WPF code? Pin
Member 308248731-Jan-10 23:19
memberMember 308248731-Jan-10 23:19 
AnswerRe: Only WPF code? Pin
objo2-Feb-10 4:06
memberobjo2-Feb-10 4:06 
QuestionCustom Colors Pin
jpbochi6-Nov-09 8:32
memberjpbochi6-Nov-09 8:32 
AnswerRe: Custom Colors Pin
objo9-Nov-09 21:54
memberobjo9-Nov-09 21:54 
Questionhow to bind the SelectedColor to a property on the ViewModel Pin
Shafique Kassam27-Aug-09 10:07
memberShafique Kassam27-Aug-09 10:07 
AnswerRe: how to bind the SelectedColor to a property on the ViewModel Pin
objo7-Sep-09 22:14
memberobjo7-Sep-09 22: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
Web04 | 2.8.150901.1 | Last Updated 22 Mar 2009
Article Copyright 2009 by objo
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid