Click here to Skip to main content
Click here to Skip to main content

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

, 29 May 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Sample WPF application to demonstrate Color Canvas , Color Picker using Extended WPF Toolkit.

Introduction

Some days back I got a chance 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

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

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

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

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 the https://wpftoolkit.codeplex.com/

Once you have extracted the downloaded file to a folder.

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

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

Now we have got the reference added in our application.

If you thought to install 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 )

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.

<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,

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

and color canvas control as below

<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,

<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 run the application.

Color Picker Sample

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

<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,

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

and color picker control as below

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

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

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.

<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 same as below,

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 the see the below code you can see that I have added the Text binding with Color Canvas control and property HexadecimalString.

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

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.

License

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

Share

About the Author

Shemeer NS
Software Developer (Senior)
India India
Technology Specialist | CodeProject MVP | Visual Studio Gallery 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 Gallery and Code Project
 
Technical Blog: http://www.shemeerns.com
Facebook: http://facebook.com/shemeernsblog
Twitter : http://twitter.com/shemeerns
Google+ : http://google.com/+Shemeernsblog
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionAnd one more PinmemberEugene Lepekhin20-Aug-14 12:20 
QuestionColor pickers are fun PinmvpSacha Barber19-Aug-14 6:05 
AnswerRe: Color pickers are fun PinmvpShemeer NS19-Aug-14 6:45 
QuestionHow to show the colorpicker dialog in sour, if no XAML? Pinmemberleelike26-Jul-14 6:06 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 29 May 2014
Article Copyright 2014 by Shemeer NS
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid