Appearance in WPF Color Picker Palette

This section explains different UI customization, styling, theming options available in ColorPickerPalette control.

Change flow direction

We can change the flow direction of the ColorPickerPalette layout from right to left by setting the FlowDirection property value as RightToLeft. The Default value of FlowDirection property is LeftToRight.

<syncfusion:ColorPickerPalette FlowDirection="RightToLeft"
                               Name="colorPickerPalette" 
                               Width="60"
                               Height="40">
</syncfusion:ColorPickerPalette>
ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
colorPickerPalette.FlowDirection = FlowDirection.RightToLeft;
colorPickerPalette.Width = 60;
colorPickerPalette.Height = 40;

ColorPickerPalette with Right To Left flow direction

Theme

We can customize the appearance of the ColorPickerPalette control by using the SfSkinManager.SetVisualStyle method. The following are the various built-in visual styles for ColorPickerPalette control.

  • Blend
  • Lime
  • MaterialDark
  • MaterialDarkBlue
  • MaterialLight
  • MaterialLightBlue
  • Metro
  • Office2010Black
  • Office2010Blue
  • Office2010Silver
  • Office2013DarkGray
  • Office2013LightGray
  • Office2013White
  • Office2016Colorful
  • Office2016DarkGray
  • Office2016White
  • Office2019Black
  • Office2019Colorful
  • Office365
  • Saffron
  • VisualStudio2013
  • VisualStudio2015
<Window
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
    <Grid>
        <syncfusion:ColorPickerPalette syncfusionskin:SfSkinManager.VisualStyle="Blend"
                                       Name="colorPickerPalette" />
    </Grid>
</Window>
//Namespace for the SfSkinManager.
using Syncfusion.SfSkinManager;

ColorPickerPalette colorPickerPalette = new ColorPickerPalette();
SfSkinManager.SetVisualStyle(colorPickerPalette, VisualStyles.Blend);

ColorPickerPalette with Blend visual style

Here, the Blend style is applied to the ColorPickerPalette.

NOTE

View Sample in GitHub