WPF ColorCanvas

WPF ColorCanvas

The ColorCanvas allows you to select a color either using an advanced color canvas, by setting the hexa-decimal values, or by setting the ARGB values. The ColorCanvas control comes with the WPF Toolkit Extended. This article demonstrates how to use the ColorCanvas control in a WPF application using C# and XAML.  

Adding Reference to WPF Toolkit Extended Assembly

The ColorCanvas control is a part of the WPF Toolkit Extended and does not come with Visual Studio 2010. To use the ColorCanvas 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 ColorCanvas

The default ColorCanvas looks like Figure 1. Listing 1 creates a simple ColorCanvas control.  

<wpfx:ColorCanvas Name="ColorCanvas1" />

 

Listing 1

Figure 1

Properties

The SelectedColor property represents the currently selected color.

The A, R, G, and B properties represent the alpha, red, green, and blue values of a color respectively.

The HexaDecimalString property represents the hexadecimal value of the selected color.

The SelectedColorChanged event is fired when the color is changed in the ColorCanvas. Listing 2 implements the event and sets the background color of a TextBlock control to the selected color of the ColorCanvas.

<wpfx:ColorCanvas Name="ColorCanvas1" Margin="0,0,190,50"

                    SelectedColorChanged="ColorCanvas1_SelectedColorChanged"/>

 

private void ColorCanvas1_SelectedColorChanged(object sender,

    RoutedPropertyChangedEventArgs<Color> e)

{

    textBlock1.Background = new SolidColorBrush(ColorCanvas1.SelectedColor);

}

 

Listing 2

 

Figure 2

Summary

In this article, I discussed how we can use a ColorCanvas control in a WPF application using C# and XAML.