Loading...
Loading...
Implements the Syncfusion WPF Color Palette (SfColorPalette) control for color selection interfaces with swatches. Use this when implementing color picker functionality, color swatches, or color binding in WPF applications. Covers setup, color selection, data binding, swatch navigation, appearance customization, and theming.
npx skill4agent add syncfusion/wpf-ui-components-skills syncfusion-wpf-color-paletteSfColorPaletteColor<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
Title="Color Palette Example" Height="400" Width="500">
<Grid>
<StackPanel Margin="20">
<TextBlock Text="Select a Color:" FontSize="14" Margin="0,0,0,10"/>
<syncfusion:SfColorPalette
x:Name="colorPalette"
Height="250"
Width="300"
HorizontalAlignment="Left"/>
<TextBlock Text="Selected Color:" FontSize="14" Margin="0,20,0,10"/>
<Rectangle
Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"
Height="50"
Width="300"
HorizontalAlignment="Left"/>
</StackPanel>
</Grid>
</Window>// Create and add the control
SfColorPalette colorPalette = new SfColorPalette();
colorPalette.Height = 300;
colorPalette.Width = 200;
this.Content = colorPalette;
// Get the selected color
Color selectedColor = colorPalette.SelectedColor;<Grid.Resources>
<local:ColorToSolidColorBrushValueConverter x:Key="ColorToBrushConverter"/>
</Grid.Resources>
<Rectangle Fill="{Binding ElementName=colorPalette, Path=SelectedColor, Converter={StaticResource ColorToBrushConverter}}"/>
<syncfusion:SfColorPalette x:Name="colorPalette"/>public class ColorToSolidColorBrushValueConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is Color color)
return new SolidColorBrush(color);
return null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return true;
}
}<syncfusion:SfColorPalette
x:Name="colorPalette"
Foreground="Blue"
Background="AliceBlue"
FlowDirection="LeftToRight"
Height="250"
Width="300"/>| Property | Type | Default | Purpose |
|---|---|---|---|
| | — | Gets the currently selected color |
| | Gray | Foreground color of the palette UI |
| | Snow | Background color of the palette |
| | LeftToRight | Layout direction (LTR or RTL) |