Color Picker Controls

ColorPicker

The ColorPicker control allows users to select a color from a list of colors, from a themed palette, or by choosing RGB values using sliders. The control displays the color using a compact swatch and name. When the user taps the control, the control displays a page for the user to select a new value. The selection UI is determined by the ColorPickerMode property.

The SelectedColor property contains the selected color, and SelectedColorName contains the name or string representation of the selected color.

The ColorPicker control requires certain resources that must be supplied by your application. See Required Resources for details.

Standard Mode – Named Color List

When ColorPickerMode is set to Standard, the user can select from a vertical list of swatches, each with the color name shown next to it.

The list of colors shown is determined by the NamedColors property. The default is the list of ten colors seen in the Windows Phone 7 operating system color picker. You can override this with your own collection of NamedColor objects.

Mixer Mode

When ColorPickerMode is set to Mixer, the user can choose any RGB color by specifying the red, green and blue channel values. When editing, these channel values are displayed as sliders. Custom colors do not have names and are therefore displayed using RGB notation.

Palette Mode

When ColorPickerMode is set to Palette, the user can select from a compact set of swatches laid out in columns of related colors.

The color palette shown is determined by the Palette property. The default is a themed palette based on the color palettes in Microsoft Office applications. See the StandardPalettes class for built-in palettes or create your own. If you create your own, it should be a list of NamedColor objects. The ColorPicker expects this list to be arranged as follows:

10 “theme” colors.
For each “theme” color, 5 variants of that color. Each block of variants must be contiguous and the blocks must appear in the same order as the “theme” colors. For example, elements 10-14 of the list would be the variants on theme color 0, elements 15-19 the variants of theme color 1, etc.
10 “standard” colors.

Custom Mode

When ColorPickerMode is set to Custom, you can specify your own editing page using the PickerPageUri property. The page must derive from ColorPickerPageBase.

Accessing the Selected Color

To access the selected color, use the SelectedColor property. You can use the ColorToSolidColorBrushConverter to convert this color to a brush. The example shows how to bind the Background of another element to the ColorPicker selection.

CopyExample Usage

<UserControl.Resources>
  <ms:ColorToSolidColorBrushConverter x:Key="scb" />
</UserControl.Resources>

<StackPanel>
  <ms:ColorPicker Name="cp" />
  <Border Width="40" Height="40" 
          Background="{Binding SelectedColor, ElementName=cp, Converter={StaticResource scb}}" 
          />
</StackPanel>