I was in need of a WPF color picker control and settled on the Extended WPF Toolkit.  Note that I didn’t say that I settled for – simply put, the controls in this collection are amazing for the price.

By default, the color picker allows the user to choose from 140 different colors – that is, if we don’t count the myriad of colors available in the Advanced portion of the control.  Either way, this was way too many colors to present to my users for selection.  I needed a way to filter the number of available colors.  The control thankfully has an “AvailableColors” property, but I couldn’t find any documentation regarding how to configure this property – that is to say, exactly what was the control expecting?

I tried binding the “AvailableColors” property to a List<Color>, List<SolidColorBrush>, and List<Brush> – all to no avail.  Each time, the control would simply render its 140+ available colors – way too many for a user to peruse and quickly choose.  At this point I broke out the handy Snoop utility.  Among other features, Snoop has the ability to show me which items in my visual tree are suffering from binding errors.  Snooping my color control showed a binding error that couldn’t properly cast between Color and Xceed.Wpf.Toolkit.ColorItem.

A-ha!  This pointed me in the right direction.  It appears the color picker control is looking for a list (or collection) of Xceed.Wpf.Toolkit.ColorItem types.  So I created an ObservableCollection of Xceed.Wpf.Toolkit.ColorItems, bound my color picker’s AvailableColors property to this collection, and was warmly greeted with a color picker that showed a limited array of colors from which to choose.

In my code-behind, I populate my ObservableCollection with the desired colors:

private void PopulateColorList()
{
    ColorList = new ObservableCollection<Xceed.Wpf.Toolkit.ColorItem>();
    ColorList.Add(new ColorItem(Colors.Beige, "Beige"));
    ColorList.Add(new ColorItem(Colors.Black, "Black"));
    ColorList.Add(new ColorItem(Colors.Blue, "Blue"));
    ColorList.Add(new ColorItem(Colors.Pink, "Pink"));
    ColorList.Add(new ColorItem(Colors.Red, "Red"));
    ColorList.Add(new ColorItem(Colors.White, "White"));
    ColorList.Add(new ColorItem(Colors.Yellow, "Yellow"));
}

And in my XAML, I bind the control’s AvailableColors property to ColorList:

<xctk:ColorPicker Height="24" VerticalAlignment="Top" Margin="12,40,0,0" HorizontalAlignment="Left" Width="243" ShowAdvancedButton="False" DisplayColorAndName="True" StandardColors="{Binding ColorList}" AvailableColors="{Binding ColorList}" Name="ColorPicker"/>

Please note the xctk namespace – this is a reference to the necessary namespace to use the WPF Extended Toolkit.

xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

Also, you’ll need to add the toolkit’s namespace to your usings declaration in code-behind:

using Xceed.Wpf.Toolkit;