WPF ColorPicker
The ColorPicker allows you to pick a color from the color palette. The ColorPicker control comes with the WPF Toolkit Extended. This article demonstrates how to use the ColorPicker control in a
WPF application using
C# and
XAML.
Adding Reference to WPF Toolkit Extended Assembly
The ColorPicker control is a part of the WPF Toolkit Extended and does not come with Visual Studio 2010. To use the ColorPicker control in your application, you must add reference to the WPFToolkit.Extended.dll assembly. You can download Extended WPF Tookit from the CodePlex or you can use the WPFToolkit.Extended.dll available with this download. All you need is the DLL. See Downloads section of this article. You can find more details in my blog
Adding Reference to WPF Toolkit Extended.
Creating a ColorPicker
The default ColorPicker is a DropDown list with a black color. By setting the DisplayColorAndName property to true, the drop down also shows the name that looks like Figure 1. Listing 1 creates a simple ColorPicker control.
<wpfx:ColorPicker Name="ColorPicker1" Height="30" DisplayColorAndName="True"
Margin="26,20,369,261" />
|
Listing 1
Figure 1
Click on the drop down loads the standard color palette that looks like Figure 2.
Figure 2
The Advanced button loads a color canvas looks like Figure 3.
Figure 3
Properties
The following is a list of some ColorPicker properties.
The AvailableColors property represents all colors that are available to the user for selection.
The AvailableColorsHeader property represents the header text of the Available Colors section.
The IsOpen property represents if dropdown is open.
The SelectedColor represents the currently selected color.
The SelectedColorText returns the known color name, or the color hexadecimal string of the SelectedColor.
The ShowAdvancedButton property represents if the Advanced is visible.
The ShowStandardColors property represents if the StandardColors is visible.
Listing 2 sets some of these properties at run-time.
ColorPicker1.IsOpen = true;
ColorPicker1.SelectedColor = Colors.Red;
ColorPicker1.ShowAdvancedButton = true;
colorPicker2.IsOpen = false; |
Listing 2
Application
Let's create an application that shows the usage of a ColorPicker control. I create an application with two ColorPicker controls and one TextBlock control as you can see in Figure 4. The ColorPicker controls are used to select the Foreground and Background colors of the TextBlock control.
Figure 4
On the SelectedColorChanged event handler of both the ColorPicker controls, I set the Foreground and Background colors of the TextBlock. See Listing 3.
private void ColorPicker1_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<Color> e) { textBlock1.Foreground = new SolidColorBrush(ColorPicker1.SelectedColor); } private void colorPicker2_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<Color> e) { textBlock1.Background = new SolidColorBrush(colorPicker2.SelectedColor);}
|
Listing 3
Summary
In this article, I discussed how we can use a ColorPicker control in a
WPF application using
C# and
XAML.