Getting Started with WPF Color Palette

18 Nov 20187 minutes to read

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

Assembly deployment

Refer to the Control Dependencies section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.

Refer to this documentation to find more details about installing nuget packages in a WPF application.

Creating Application with WPF Color Palette control

In this walk through, user will create a WPF application that contains WPF Color Palette control.

1. Creating project
2. Adding control via designer.
3. Adding control manually in XAML.
4. Adding control manually in C#.

Creating project

Below section provides detailed information to create new project in Visual Studio to display WPF Color Palette.

Adding control via designer

The WPF Color Palette control can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembly will be added automatically.

• Syncfusion.SfColorPalette.WPF
• Syncfusion.SfShared.WPF

Adding control manually in XAML

In order to add WPF Color Palette control manually in XAML, do the below steps,

1. Add the below required assembly references to the project,

   • Syncfusion.SfColorPalette.Wpf

   • Syncfusion.SfShared.Wpf

2. Import Syncfusion^® WPF schema http://schemas.syncfusion.com/wpf or WPF Color Palette namespace Syncfusion.Windows.Controls.Media in XAML page.

3. Declare WPF Color Palette control in XAML page.

   XAML

   <Window
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           xmlns:local="clr-namespace:Check_UG"
           xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="Check_UG.MainWindow"
           mc:Ignorable="d"
           Title="MainWindow" Height="450" Width="800">
   <Grid>
   <syncfusion:SfColorPalette HorizontalAlignment="Left" Margin="90,50,0,0" VerticalAlignment="Top" Height="206" Width="239"/>
      
   </Grid>
   </Window>

Adding control manually in C#

In order to add WPF Color Palette control manually in C#, do the below steps,

1. Add the below required assembly references to the project,

   • Syncfusion.SfColorPalette.Wpf

   • Syncfusion.SfShared.Wpf

2. Import WPF Color Palette namespace Syncfusion.Windows.Controls.Media .

   C#

   using Syncfusion.Windows.Controls.Media;

3. Create WPF Color Palette control instance and add it to the Page.

   C#

   public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();
      
               SfColorPalette colorPalette = new SfColorPalette();
               colorPalette.Height = 300;
               colorPalette.Width = 200;
      
               this.Content = colorPalette;
           }
       }

View Sample in GitHub

Select a Color

You can select any color by clicking the respective color item in the WPF Color Palette. You can get the selected color from the SelectedColor property. When you select a color, the color value is also displayed in a tooltip.

View Sample in GitHub

Binding a selected color

You can bind the selected color of the WPF Color Palette to any UI element by using the SelectedColor property.

In the example below, the SelectedColor of the WPF Color Palette is bound to the Rectangle.Fill property through a color-to-brush value converter.

C#

//ColorToBrushConverter.cs
public class ColorToSolidColorBrushValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (null == value)
            return null;
        Color color = (Color)value;
        return new SolidColorBrush(color);
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return true;
    }
}

The C# converter class above requires the following using directives: System, System.Globalization, System.Windows.Data, and System.Windows.Media.

XAML

<Grid>
    <Grid.Resources>

    <!--Color to brush converter-->
        <local:ColorToSolidColorBrushValueConverter  x:Key="ColorToSolidColorBrush_ValueConverter"/>
    </Grid.Resources>
    <StackPanel>
        <TextBlock Text="SelectedColor"/>
        <Rectangle Fill="{Binding ElementName=SfColorPalette ,
                                  Path= SelectedColor, 
                                  Converter={StaticResource ColorToSolidColorBrush_ValueConverter}}"/>
        <syncfusion:SfColorPalette x:Name="SfColorPalette" />
    </StackPanel>
</Grid>

View Sample in GitHub

Navigate to the list of swatches

You can navigate to and select different colors from the various swatches by clicking the Swatches button, which is placed on the top-right corner of the WPF Color Palette control.

List of swatches

View Sample in GitHub.

Theme

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

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio

View Sample in GitHub.