Control Customization in WinUI Color Palette

This section explains the different types of colors available in the ColorPalette and how to choose the colors and its panel customizations.

Accessing a Color programmatically

You can set or change the selected color of the ColorPalette programmatically by setting the value to SelectedBrush property. You can also get the selected color by using the SelectedBrush property. The default value of SelectedBrush property is Transparent(#00FFFFFF).

<syncfusion:SfColorPalette SelectedBrush="Yellow"
                           Name="colorPalette" />
colorPalette.SelectedBrush = new SolidColorBrush(Colors.Yellow);

ColorPalette programmatically picked the yellow color

Here, Yellow color is selected color in the ColorPalette.


Download demo application from GitHub

Setting null value programmatically

You can set a null color value for the selected color by setting the color code #00000000 or Colors.Transparent for SelectedBrush property to indicate the null value.

<syncfusion:SfColorPalette SelectedBrush="Transparent"
colorPalette.SelectedBrush = new SolidColorBrush(Colors.Transparent);

ColorPalette with selected transparent color

Reset the selected color

If you want to reset the selected color as No color or Transparent, click the No Color button. You can display the
No color button only by setting the ShowNoColorButton property value as true. The default value of ShowNoColorButton property is false.

<syncfusion:SfColorPalette ShowNoColorButton="True"
colorPalette.ShowNoColorButton = true;

ColorPalette resets selected color


Download demo application from GitHub

Setting default color

If you want to change the default selected color on application launching, set the value for DefaultBrush property. If you changed the selected color, then you can easily make the default color as selected color by clicking the default color button. The default value of DefaultBrush property is Black.

<syncfusion:SfColorPalette AutomaticBrush="Red"
                           Name="colorPalette" />
colorPalette.AutomaticBrush = new SolidColorBrush(Colors.Red);

ColorPalette with automatic color


Download demo application from GitHub

Hide default color button

You can hide the default color button visibility by setting the ShowDefaultColorButton property value as Collapsed. The default value of ShowDefaultColorButton property is true.

<syncfusion:SfColorPalette AutomaticBrush="Green"
                           Name="colorPalette" />
colorPalette.AutomaticBrush = new SolidColorBrush(Colors.Red);
colorPalette.ShowDefaultColorButton = false;

ColorPalette with automatic color

Selected color changed notification

You will be notified when selected color changed in ColorPalette by using SelectedBrushChanged event. The SelectedBrushChanged event contains the old and newly selected color values in the OldBrush and NewBrush properties.

<syncfusion:SfColorPalette SelectedBrushChanged="ColorPalette_SelectedBrushChanged"
                           Name="colorPalette" />
colorPalette.SelectedBrushChanged += ColorPalette_SelectedBrushChanged;

You can handle the event as follows,

//Invoked when the selected color is changed
private void ColorPalette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e) {
    var oldBrush= e.OldBrush;
    var newBrush= e.NewBrush;


Tooltip support

Tooltip is used to show the information about the segment, when you mouse over on the segment. You can show information about name of the color item using tooltip when hovering the mouse on the specific color item.

ColorPalette with tooltip support

Recently used color items

The recently selected color items are displayed in the Recent Colors panel. If you want to choose a color which are previously selected, use the Recent Colors panel. You can get the recently selected color list by using the RecentColors collection property.

<syncfusion:SfColorPalette Name="colorPalette"/>
SfColorPalette colorPalette = new SfColorPalette();

//Recently selected color list 
var recentColors = colorPalette.RecentColors;

ColorPalette displaying the recently used color items

Setting the foreground

You can change the foreground color of the ColorPalette by using the Foreground property. The default value of Foreground property is Black.

<syncfusion:SfColorPalette Foreground="Red"
                           Name="colorPalette" />
colorPalette.Foreground = new SolidColorBrush(Colors.Red);

ColorPalette foreground color changed


Download demo application from GitHub

Setting the background

You can change the background color of the ColorPalette by using the Background property. The default value of Background property is null.

<syncfusion:SfColorPalette Background="LightYellow"
                           Name="colorPalette" />
colorPalette.Background = new SolidColorBrush(Colors.LightYellow);

ColorPalette background color changed


Download demo application from GitHub

Change flow direction

You can change the flow direction of the ColorPalette layout from right to left by setting the FlowDirection property value as RightToLeft. The default value of FlowDirection property is LeftToRight.

<syncfusion:SfColorPalette FlowDirection="RightToLeft"
                           Name="colorPalette" />
colorPalette.FlowDirection = FlowDirection.RightToLeft;

ColorPalette with right to left flow direction


Download demo application from GitHub

Change color palette size

You can change the color palette size by using the Width and Height properties. Based on the color palette size, the color items are resized. The default value of Width and Height properties is Auto.

<syncfusion:SfColorPalette Width="200" 
colorPalette.Width = 200;
colorPalette.Height = 300;

ColorPalette size changed


Download demo application from GitHub

Hide the ColorPalette

You can hide the ColorPalette by setting the Visibility property value as Collapsed. The default value of Visibility property is Visible.

<syncfusion:SfColorPalette Visibility="Collapsed"
colorPalette.Visibility = Visibility.Collapsed;