Click here to Skip to main content
15,867,686 members
Articles / Desktop Programming / WPF

WPF: Using Color Canvas and Color Picker from Extended WPF Toolkit

Rate me:
Please Sign up or sign in to vote.
3.38/5 (6 votes)
29 May 2014CPOL4 min read 94.9K   3.5K   14   5
Sample WPF application to demonstrate Color Canvas, Color Picker using Extended WPF Toolkit
In this article, I will demonstrate the implementation of Color Canvas, Color Picker from the Extended WPF Toolkit.

Introduction

Some days ago, I got an opportunity to work on WPF with Extended WPF Toolkit and I really got impressed with the controls they have offered. I am using this article to demonstrate the implementation of Color Canvas, Color Picker from the Extended WPF Toolkit. I hope this will be useful to you if you are planning to add a color picker functionality in your WPF application.

Extended WPF Toolkit

Extended WPF Toolkit™ contains a collection of WPF controls, components and utilities for creating next generation Windows applications. Use it to build professional looking, modern, and easy to use line of business applications. The free, open source Community Edition comes with many useful controls and Plus version comes with some additional controls.

If you want to explore the Extended WPF Toolkit, then Live Explorer app is available online as a Click Once app. Try it now!

In this article, we will go through the Color Canvas and Color Picker controls.

Color Canvas

Image 1

The Color Canvas allows you to select a color either by using an advanced color canvas, by setting the HexadecimalString, or by setting the ARGB values.

Click here to read about Color Canvas control's properties and events.

Color Picker

Image 2Image 3

The Color Picker is an editor that allows a user to pick a color from predefined color palettes. By default, there are 140 available colors and 10 predefined standard colors. You can use your own custom color palettes by setting the AvailableColors and StandardColors properties accordingly. You can also get/set the recently used colors by using the RecentColors property.

Click here to read about Color Picker control's properties and events.

Sample WPF Application

Let us create a new WPF application to experience the implementation. I have used Visual Studio 2010 and Extended WPF Toolkit - 2.1.0. In this sample code, I'm going to explain the Color Canvas, Color Picker implementation from a beginner's perspective.

Create a New WPF Application using Visual Studio

Image 4

To start with, I'm going to create a WPF application named 'ColorPickerSample'.

Image 5

Once the project is created, then we need to get that Toolkit DLL referenced in our application. This can be achieved by adding a reference directly in our application or else using NuGet.

If you are going to add the reference by Add Reference menu, then make sure that you have the WPF Toolkit binaries with you.

You can download the binaries from https://wpftoolkit.codeplex.com/.

Image 6

Once you have extracted the downloaded file to a folder.

Image 7

Go to Add Reference menu in the newly created project (right click on the References folder):

Image 8

Select the Xceed.Wpf.Toolkit.dll from the extracted folder:

Image 9

Now we have got the reference added in our application.

Image 10

If you thought of installing via NuGet, then go to Manage NuGet Packages for Solution under Tools menu or right click on Solution's References folder, (or Type Install-Package Extended.Wpf.Toolkit in Package Manager Console).

Image 11

Now we are good to start with our sample application.

Color Canvas Sample

I'm going to add a new WPF window to the application. I have named the file name as 'ColorCanvasSample.xaml' and replace the XAML code with the below code:

XAML
<Window x:Class="ColorPickerSample.ColorCanvasSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="Color Canvas Sample" Height="300" Width="275">
    <Grid>
        <xctk:ColorCanvas  />
    </Grid>
</Window> 

Simple, we added a fully functional color canvas to the window.

To make it work, I have added an xmlns as below:

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

and color canvas control as below:

XML
<xctk:ColorCanvas  /> 

Now we can run this application to see the output, before running, we need to make this window as start up window. For that, we need to update the App.xaml like below:

XAML
<Application x:Class="ColorPickerSample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="ColorCanvasSample.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application> 

We will get the below screen if you run the application:

Image 12

Color Picker Sample

Now let us add another WPF Window named as 'ColorPickerDropdownSample.xaml'. Just replace the XAML content with below codes:

XAML
<Window x:Class="ColorPickerSample.ColorPickerDropdownSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="ColoerPickerDropdownSample" Height="300" Width="300">
    <Grid>
        <xctk:ColorPicker x:Name="_colorPicker"
                           VerticalAlignment="Top" />
    </Grid>
</Window> 

To make it work, I have added an xmlns as below:

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

and color picker control as below:

XML
<xctk:ColorPicker x:Name="_colorPicker"
                           VerticalAlignment="Top" /> 

make this window as start up and run to see the below output:

Image 13

Combined Sample

Now, I have added a new WPF window named 'ColorCanvasAndPicker.xaml', and I'm going to add the sample code provided in Extended WPF Toolkit to understand main properties and events.

XAML
<Window x:Class="ColorPickerSample.ColorCanvasAndPicker"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:sys="clr-namespace:System;assembly=mscorlib"
                xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
                Title="Color Canvas and Color Picker">
    <Window.Resources>
        <Style x:Key="controlInError"
             TargetType="xctk:IntegerUpDown">
            <Style.Triggers>
                <Trigger Property="Validation.HasError"
                     Value="true">
                    <Setter Property="ToolTip"
                       Value="{Binding RelativeSource={x:Static RelativeSource.Self},
                            Path=(Validation.Errors).CurrentItem.ErrorContent}" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <ObjectDataProvider x:Key="ColorModeOptions" MethodName="GetValues"
                          ObjectType="{x:Type sys:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="xctk:ColorMode" />
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0"
            Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <GroupBox Grid.Column="0"
                   Grid.Row="0"
                   Header="ColorCanvas Features"
                   HorizontalAlignment="Stretch">
                <Grid>
                    <Grid.Resources>
                        <Style x:Key="alignStyle"
                         TargetType="{x:Type FrameworkElement}">
                            <Setter Property="Margin"
                             Value="5" />
                        </Style>
                        <Style TargetType="{x:Type TextBlock}"
                         BasedOn="{StaticResource alignStyle}" />
                        <Style TargetType="{x:Type TextBox}"
                         BasedOn="{StaticResource alignStyle}" />
                        <Style TargetType="{x:Type CheckBox}"
                         BasedOn="{StaticResource alignStyle}" />
                        <Style TargetType="{x:Type xctk:IntegerUpDown}"
                         BasedOn="{StaticResource alignStyle}">
                            <Setter Property="Width"
                             Value="45" />
                            <Setter Property="Minimum"
                             Value="0" />
                            <Setter Property="Maximum"
                             Value="255" />
                        </Style>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Row="0"
                           Grid.Column="0"
                           Grid.ColumnSpan="2"
                           HorizontalAlignment="Stretch"
                           Orientation="Horizontal">
                        <TextBlock Text="R:" />
                        <xctk:IntegerUpDown x:Name="_R"
                                      Value="{Binding ElementName=_colorCanvas, 
                                              Path=R, Mode=TwoWay}"
                                      Minimum="0"
                                      Maximum="255"
                                      Style="{StaticResource controlInError}" />
                        <TextBlock Text="G:"
                             Margin="5" />
                        <xctk:IntegerUpDown x:Name="_G"
                                      Value="{Binding ElementName=_colorCanvas, 
                                              Path=G, Mode=TwoWay}"
                                      Minimum="0"
                                      Maximum="255"
                                      Style="{StaticResource controlInError}" />
                        <TextBlock Text="B:"
                             Margin="5" />
                        <xctk:IntegerUpDown x:Name="_B"
                                      Value="{Binding ElementName=_colorCanvas, 
                                              Path=B, Mode=TwoWay}"
                                      Minimum="0"
                                      Maximum="255"
                                      Style="{StaticResource controlInError}" />
                        <TextBlock Text="A:"
                             Margin="5" />
                        <xctk:IntegerUpDown x:Name="_A"
                                      Value="{Binding ElementName=_colorCanvas, 
                                              Path=A, Mode=TwoWay}"
                                      Minimum="0"
                                      Maximum="255"
                                      Style="{StaticResource controlInError}" />
                    </StackPanel>
                    <TextBlock Grid.Column="0"
                          Grid.Row="1"
                          Text="UsingAlphaChannel: " />
                    <CheckBox Grid.Column="1"
                         Grid.Row="1"
                         x:Name="_usingAlphaChannel"
                         IsChecked="{Binding ElementName=_colorCanvas, 
                                     Path=UsingAlphaChannel, Mode=TwoWay}" />
                    <TextBlock Grid.Column="0"
                          Grid.Row="2"
                          Text="HexadecimalString: " />
                    <TextBox Grid.Column="1"
                        Grid.Row="2"
                        IsEnabled="False"
                        Text="{Binding ElementName=_colorCanvas, 
                               Path=HexadecimalString}" />
                </Grid>
            </GroupBox>
            <TextBlock Text="ColorCanvas Usage: "
                    Grid.Row="1"
                    Margin="0,10,0,0"
                    />
            <xctk:ColorCanvas x:Name="_colorCanvas"
                           Grid.Row="2"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Stretch" 
                           SelectedColorChanged="_colorCanvas_SelectedColorChanged" />
        </Grid>
        <Grid Grid.Column="1"
            Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <GroupBox Grid.Column="0"
                   Grid.Row="0"
                   Header="ColorPicker Features"
                   HorizontalAlignment="Stretch"
                   Margin="10">
                <Grid>
                    <Grid.Resources>
                        <Style TargetType="{x:Type TextBlock}">
                            <Setter Property="Margin"
                             Value="3" />
                            <Setter Property="VerticalAlignment"
                             Value="Center" />
                        </Style>
                        <Style TargetType="{x:Type TextBox}">
                            <Setter Property="Margin"
                             Value="3" />
                        </Style>
                        <Style TargetType="{x:Type CheckBox}">
                            <Setter Property="Margin"
                             Value="3" />
                        </Style>
                        <Style TargetType="{x:Type ComboBox}">
                            <Setter Property="Margin"
                             Value="3" />
                        </Style>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0"
                          Grid.Row="0"
                          Text="ColorMode:" />
                    <ComboBox Grid.Column="1"
                         Grid.Row="0"
                         ItemsSource="{Binding Source={StaticResource ColorModeOptions}}"
                         SelectedItem="{Binding ElementName=_colorPicker, 
                                        Path=ColorMode, Mode=TwoWay}"
                         Height="22"/>
                    <TextBlock Grid.Column="0"
                          Grid.Row="1"
                          Text="AvailableColorsHeader:" />
                    <TextBox Grid.Column="1"
                        Grid.Row="1"
                        Text="{Binding ElementName=_colorPicker, 
                               Path=AvailableColorsHeader, Mode=TwoWay}" />
                    <TextBlock Grid.Column="0"
                          Grid.Row="2"
                          Text="RecentColorsHeader:" />
                    <TextBox Grid.Column="1"
                        Grid.Row="2"
                        Text="{Binding ElementName=_colorPicker, 
                               Path=RecentColorsHeader, Mode=TwoWay}" />
                    <TextBlock Grid.Column="0"
                          Grid.Row="3"
                          Text="StandardColorsHeader:" />
                    <TextBox Grid.Column="1"
                        Grid.Row="3"
                        Text="{Binding ElementName=_colorPicker, 
                               Path=StandardColorsHeader, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="5"
                         Grid.ColumnSpan="2"
                         Content="DisplayColorAndName"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=DisplayColorAndName, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="6"
                         Grid.ColumnSpan="2"
                         Content="ShowAdvancedButton"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=ShowAdvancedButton, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="7"
                         Grid.ColumnSpan="2"
                         Content="ShowAvailableColors"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=ShowAvailableColors, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="8"
                         Grid.ColumnSpan="2"
                         Content="ShowDropDownButton"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=ShowDropDownButton, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="9"
                         Grid.ColumnSpan="2"
                         Content="ShowRecentColors"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=ShowRecentColors, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="10"
                         Grid.ColumnSpan="2"
                         Content="ShowStandardColors"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=ShowStandardColors, Mode=TwoWay}" />
                    <CheckBox Grid.Column="0"
                         Grid.Row="11"
                         Grid.ColumnSpan="2"
                         Content="UsingAlphaChannel"
                         IsChecked="{Binding ElementName=_colorPicker, 
                                     Path=UsingAlphaChannel, Mode=TwoWay}" />
                    <TextBlock Grid.Column="0"
                          Grid.Row="12"
                          Text="SelectedColorText:" />
                    <TextBox Grid.Column="1"
                        Grid.Row="12"
                        IsEnabled="False"
                        Text="{Binding ElementName=_colorPicker, 
                               Path=SelectedColorText}" />
                </Grid>
            </GroupBox>
            <TextBlock Text="ColorPicker Usage: "
                    Grid.Row="1" />
            <xctk:ColorPicker x:Name="_colorPicker"
                           Grid.Row="2"
                           VerticalAlignment="Top" 
                           SelectedColorChanged="_colorPicker_SelectedColorChanged"  />
        </Grid>
    </Grid>
</Window> 

and the xaml.cs file is the same as below:

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace ColorPickerSample
{
    /// <summary>
    /// Interaction logic for ColorCanvasAndPicker.xaml
    /// </summary>
    public partial class ColorCanvasAndPicker : Window
    {
        public ColorCanvasAndPicker()
        {
            InitializeComponent();
        }
        private void _colorCanvas_SelectedColorChanged
                (object sender, RoutedPropertyChangedEventArgs<Color> e)
        {
            _colorPicker.SelectedColor = _colorCanvas.SelectedColor;
        }
        private void _colorPicker_SelectedColorChanged
                (object sender, RoutedPropertyChangedEventArgs<Color> e)
        {
            _colorCanvas.SelectedColor = _colorPicker.SelectedColor;
        }
    }
} 

In xaml.cs, I have added the SelectedColorChanged event for color canvas and color picker, so that both will reflect the same color. The Window Output is given below.

All other controls are added to demo the properties and their usage. If you see the below code, you can see that I have added the Text binding with Color Canvas control and property HexadecimalString.

XAML
<TextBox Grid.Column="1"
                        Grid.Row="2"
                        IsEnabled="False"
                        Text="{Binding ElementName=_colorCanvas, Path=HexadecimalString}" /> 

Image 14

Summary

In this article, I have explained Color Canvas and Color Picker from Extended WPF Toolkit. If I have missed anything or need any correction, then please let me know. I hope you have enjoyed this article and got some value addition to your knowledge.

History

  • 29th May 2014: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
India India
Technical Manager/ Software Architect | CodeProject MVP | Visual Studio Marketplace Contributor | Author | Geek | Netizen | Husband | ChessPlayer

Most of my articles are listed on top 5 of the respective 'Best articles of the month' and some of my articles are published on ASP.NET WebSite's Article of the Day section.

Check my contributions in Visual Studio Marketplace and Code Project

Technical Blog: https://shemeerns.wordpress.com/
Facebook: http://facebook.com/shemeernsblog
Twitter : http://twitter.com/shemeerns
Google+ : http://google.com/+Shemeernsblog

Comments and Discussions

 
GeneralGeneral feedback Pin
Member 1324197713-Aug-18 19:52
Member 1324197713-Aug-18 19:52 
QuestionAnd one more Pin
Eugene Lepekhin20-Aug-14 11:20
Eugene Lepekhin20-Aug-14 11:20 
QuestionColor pickers are fun Pin
Sacha Barber19-Aug-14 5:05
Sacha Barber19-Aug-14 5:05 
AnswerRe: Color pickers are fun Pin
Shemeer NS19-Aug-14 5:45
professionalShemeer NS19-Aug-14 5:45 
QuestionHow to show the colorpicker dialog in sour, if no XAML? Pin
leelike26-Jul-14 5:06
leelike26-Jul-14 5:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.