Getting Started with WPF Color Picker Palette

18 Nov 201817 minutes to read

This section explains how to create a WPF Color Picker Palette and explains about its structure and features.

Control Structure

• The selected color represents the color that you have selected.
• The drop-down represents a button; the WPF Color Picker Palette window opens when you click it.
• The automatic color represents the default color that you can configure.
• The tooltip with color details is shown when the mouse hovers over a color.
• The standard colors store colors such as red, green, and blue.
• The recently used colors store the colors that have been recently selected.
• The more-colors option provides a wide range of colors in addition to those in the palette.
• The theme-variant colors represent the theme colors and their variants.

More Color Window

Assembly deployment

Refer to the control dependencies section to get the list of assemblies or NuGet packages that need to be added as a reference to use the control in any application.

You can find more details about installing the NuGet package in a WPF application in the following link:

How to install nuget packages

Adding WPF Color Picker Palette via designer

You can add the WPF Color Picker Palette control to an application by dragging it from the toolbox onto a view in the designer. The following dependent assemblies will be added automatically:

• Syncfusion.Shared.WPF

Adding WPF Color Picker Palette via XAML

To add the WPF Color Picker Palette control manually in XAML, follow these steps:

1. Create a new WPF project in Visual Studio.

2. Add the following assembly references to the project:

   • Syncfusion.Shared.WPF

3. Import the Syncfusion^® WPF schema http://schemas.syncfusion.com/wpf and declare the WPF Color Picker Palette control on the XAML page.

   XAML

   <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
           x:Class="ColorPickerPaletteSample.MainWindow"
           Title="ColorPickerPalette Sample" Height="350" Width="525">
       <Grid>
           <!--Adding ColorPickerPalette control -->
           <syncfusion:ColorPickerPalette x:Name="colorPickerPalette" 
                                          Width="60" 
                                          Height="40" />
       </Grid>
   </Window>

Adding WPF Color Picker Palette via C#

To add the WPF Color Picker Palette in Visual Studio.

1. Add the following assembly reference to the project:

   • Syncfusion.Shared.WPF

2. Include the required namespace, create an instance of WPF Color Picker Palette, and add it to the window.

3. Declare the WPF Color Picker Palette control using C#.

   C#

   using Syncfusion.Windows.Tools.Controls;
      
   public partial class MainWindow : Window {
       public MainWindow() {
           InitializeComponent();
      
           //Creating an instance of ColorPickerPalette control
           ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
           colorPickerPalette.Width = 60;
           colorPickerPalette.Height = 40;
           //Adding ColorPickerPalette as window content
           this.Content = colorPickerPalette;
       }
   }

You can set or change the selected color of the WPF Color Picker Palette programmatically by setting the Color property. To get the selected color’s name, use the ColorName property, which holds the name of the selected color item. The default value of Color is Black, and the default value of ColorName is the string "Color".

You can also set or change the selected color brush by using the SelectedBrush property. Setting either Color or SelectedBrush updates the other Palette_Color property. If we want know the selected color name, use the ColorName property that holds the name of the selected color item. The default value of Color and ColorName property is Black and Color.

You can also set or changes the selected color brush by using the SelectedBrush property.

XAML

<syncfusion:ColorPickerPalette Color="Red"
                               Name="colorPickerPalette" 
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>

C#

ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
colorPickerPalette.Color = Colors.Red;
colorPickerPalette.Width = 60;
colorPickerPalette.Height = 40;

Here, Red color is selected color in the WPF Color Picker Palette.

Select color from color palette

You can select different colors from the Theme Color and Standard Color panels. You can show or hide the variant colors of the base Theme Colors and Standard Colors by setting the GenerateThemeVariants and GenerateStandardVariants properties to true or false.

XAML

<syncfusion:ColorPickerPalette GenerateThemeVariants="True"
                               GenerateStandardVariants="True"
                               Name="colorPickerPalette" 
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>

C#

ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
colorPickerPalette.GenerateThemeVariants = true;
colorPickerPalette.GenerateStandardVariants = true;
colorPickerPalette.Width = 60;
colorPickerPalette.Height = 40;

Add your own color in the palette

To allow the user to select from your own colors, add the color and its name using CustomColor.ColorName and CustomColor.Color to the CustomColorsCollection, and set the SetCustomColors property to true. The CustomColor.ColorName is shown in the tooltip when the mouse hovers over the color item. You can change the custom-color panel header text and its visibility by using the CustomHeaderText and CustomHeaderVisibility properties. The default value of CustomHeaderText is CustomColors, and the default value of CustomHeaderVisibility is Visible.

C#

// Required usings:
// using System.Collections.ObjectModel;
// using Syncfusion.Windows.Shared;  // for NotificationObject

public class ViewModel : NotificationObject {
    private ObservableCollection<CustomColor> newColorCollection;
    public ObservableCollection<CustomColor> NewColorCollection {
        get {
            return newColorCollection;
        }
        set {
            newColorCollection = value;
            this.RaisePropertyChanged("NewColorCollection");
        }
    }
    public ViewModel() {
        NewColorCollection = new ObservableCollection<CustomColor>();
    }
}

XAML

<Window.Resources>
    <local:ViewModel x:Key="viewModel">
        <local:ViewModel.NewColorCollection>

            <!-- Defining the color details -->
            <syncfusion:CustomColor Color="#FF11EBF8" ColorName="Aqua" />
            <syncfusion:CustomColor Color="#FFF80FA6" ColorName="Deep Pink" />
            <syncfusion:CustomColor Color="#FF8BA7C2" ColorName="Dark Gray" />
            <syncfusion:CustomColor Color="#F53CDF07" ColorName="Lime Green" />
            <syncfusion:CustomColor Color="#C2929545" ColorName="Olive Drab" />
            <syncfusion:CustomColor Color="#2E956145" ColorName="Sienna" />
            <syncfusion:CustomColor Color="#78458E95" ColorName="Steel Blue" />
            <syncfusion:CustomColor Color="#8B8220E4" ColorName="Blue Violet" />
        </local:ViewModel.NewColorCollection>
    </local:ViewModel>
</Window.Resources>

<syncfusion:ColorPickerPalette CustomColorsCollection="{Binding NewColorCollection}"
                               CustomHeaderText="New Colors"
                               CustomHeaderVisibility="Visible"
                               SetCustomColors="True"
                               DataContext="{StaticResource viewModel}"
                               Name="colorPickerPalette"
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>

N> The `local:` xmlns used above refers to the namespace of your `ViewModel` class. Add `xmlns:local="clr-namespace:YourNamespace"` to the root element of your XAML.

Click here to download the sample that showcases how to add your own color items into the palette.

Recently used color items

The recently selected color items are displayed in the RecentlyUsedPanel. If we want to choose a color which are previously selected, use the RecentlyUsedPanel.

XAML

<syncfusion:ColorPickerPalette RecentlyUsedPanelVisibility="Visible"
                               Name="colorPickerPalette" 
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>

C#

ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
colorPickerPalette.RecentlyUsedPanelVisibility = Visibility.Visible;
colorPickerPalette.Width = 60;
colorPickerPalette.Height = 40;
To choose from a wider range of standard and custom colors, click the **More Color** option and select a color from either the Standard Colors tab or the Custom Colors tab, then click **OK**.

Choosing a color from MoreColor window

If we wants more standard and custom colors to select, click the more color option and select the color from standard color tab or custom color tab and click the Ok button.

XAML

<syncfusion:ColorPickerPalette MoreColorOptionVisibility="Visible"
                               Name="colorPickerPalette" 
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>

C#

ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
colorPickerPalette.MoreColorOptionVisibility = Visibility.Visible;
colorPickerPalette.Width = 60;
colorPickerPalette.Height = 40;

We can show or hide all color panels. Refer the Dealing with ColorPickerPalette page that explains the panel visibility support.

Reset selected color

To reset the selected color to Transparent, click the No Color button. The No Color button is displayed only when the NoColorVisibility property is set to Visible. The default value of NoColorVisibility property is Collapsed.

XAML

<syncfusion:ColorPickerPalette NoColorVisibility="Visible"
                               Name="colorPickerPalette"/>

C#

colorPickerPalette.NoColorVisibility = Visibility.Visible;

View Sample in GitHub

Selected brush or color changed notification

The selected brush or color in WPF Color Picker Palette can be observed using the SelectedBrushChanged event. The SelectedBrushChangedEventArgs contains the old and newly selected brush and its color values in the OldBrush, NewBrush, OldColor, and NewColor properties.

XAML

<syncfusion:ColorPickerPalette SelectedBrushChanged="ColorPickerPalette_SelectedBrushChanged"
                               Name="ColorPickerPalette" 
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>

C#

ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
colorPickerPalette.SelectedBrushChanged += ColorPickerPalette_SelectedBrushChanged;
colorPickerPalette.Width = 60;
colorPickerPalette.Height = 40;

C#

//Invoked when the selected color or brush is changed
private void ColorPickerPalette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e) {
    //Old and newly selected brushes
    var OldBrush = e.OldBrush ;
    var newBrush = e.NewBrush;

    //Old and newly selected colors
    var oldColor = e.OldColor;
    var newColor = e.NewColor;            
}

Click here to download the sample that showcases different type of color items with its panel visibility customization.

Localization support

Localization is the process of translating the application resources into different language for the specific cultures. You can localize the WPF Color Picker Palette control by adding resource file for each language.

Refer Localization page to know more about how to provide a localization support for the WPF Color Picker Palette.

Theme

The WPF Color Picker Palette supports various built-in themes. Refer to the links below to apply themes,

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio