Implementing Syncfusion WinUI DropDown Color Palette

SfDropDownColorPalette

When to Use This Skill

• Add color selection to your WinUI application
• Let users choose from theme and standard color palettes
• Customize available colors for your brand
• Implement a split-mode button with color selection
• Track recently selected colors
• Show color tooltips on hover
• Allow users to pick any color from a spectrum

Control Overview

Documentation and Navigation Guide

Getting Started

• Install NuGet package (Syncfusion.Editors.WinUI)
• Install NuGet package (Syncfusion.Editors.WinUI)
• Note: ensure the NuGet package is updated to the latest

  Syncfusion.Editors.WinUI

  version via the NuGet package manager.
• Add control in XAML and C#
• Set selected color programmatically (SelectedBrush)
• Handle SelectedBrushChanged event
• Access color value in code

Control Structure

• Understand each color section (selected, automatic, theme, standard, recent)
• Learn about color tooltips
• Discover More Colors option
• Understand theme variant behavior

Dropdown Customization

• Change dropdown alignment (DropDownPlacement)
• Convert to split-mode button (DropDownMode = Split)
• Bind commands for button click action
• Customize header UI with templates
• Handle dropdown open/close events

Palette Customization

• Add custom colors to palette
• Define custom theme color groups
• Add custom standard colors
• Remove unwanted color sections
• Integrate SfColorPalette for advanced customization

More Colors Dialog

• Let users pick any color from spectrum
• Track recently used colors
• Differentiate recent colors from palette colors
• Customize color spectrum behavior

Quick Start

Basic Implementation (XAML)

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
    <Grid>
        <editors:SfDropDownColorPalette x:Name="colorPalette" />
    </Grid>
</Page>

Basic Implementation (C#)

using Syncfusion.UI.Xaml.Editors;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        var colorPalette = new SfDropDownColorPalette();
        grid.Children.Add(colorPalette);
    }
}

Common Patterns

Pattern 1: Set and Get Selected Color

<editors:SfDropDownColorPalette SelectedBrush="Yellow" x:Name="palette" />

// Get the selected color
var selectedBrush = palette.SelectedBrush as SolidColorBrush;
if (selectedBrush != null)
{
    Color selectedColor = selectedBrush.Color;
}

// Set a new color
palette.SelectedBrush = new SolidColorBrush(Colors.Red);

Pattern 2: Respond to Color Selection Changes

<editors:SfDropDownColorPalette 
    SelectedBrushChanged="Palette_SelectedBrushChanged"
    x:Name="palette" />

private void Palette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
    var oldBrush = e.OldBrush as SolidColorBrush;
    var newBrush = e.NewBrush as SolidColorBrush;
    
    // Apply color somewhere
    textBlock.Foreground = newBrush;
}

Pattern 3: Split Mode with Command

<editors:SfDropDownColorPalette 
    DropDownMode="Split"
    Command="{x:Bind ApplyColorCommand}"
    x:Name="palette" />

private ICommand applyColorCommand;
public ICommand ApplyColorCommand => applyColorCommand;

public void ApplyColorToSelectedText(object param)
{
    // Apply the currently selected color
    richTextBox.Document.Selection.CharacterFormat.BackgroundColor = 
        (palette.SelectedBrush as SolidColorBrush).Color;
}

Pattern 4: Dropdown Alignment

<editors:SfDropDownColorPalette 
    DropDownPlacement="BottomEdgeAlignedRight"
    x:Name="palette" />

• Auto

  - Best available position (default)

• BottomEdgeAlignedLeft

  - Below, left-aligned

• BottomEdgeAlignedRight

  - Below, right-aligned

• TopEdgeAlignedLeft

  - Above, left-aligned

• TopEdgeAlignedRight

  - Above, right-aligned

Pattern 5: Detect Palette Open/Close

<editors:SfDropDownColorPalette 
    DropDownOpened="Palette_DropDownOpened"
    DropDownClosed="Palette_DropDownClosed"
    x:Name="palette" />

private void Palette_DropDownOpened(object sender, EventArgs e)
{
    // Palette opened
}

private void Palette_DropDownClosed(object sender, EventArgs e)
{
    // Palette closed
}

Key Properties

SelectedBrush

Brush

DropDownPlacement

FlyoutPlacementMode

DropDownMode

DropDownMode

Command

ICommand

ContentTemplate

DataTemplate

DropDownButtonTemplate

DataTemplate

Reference Files

• getting-started.md - Setup and basic implementation
• palette-structure.md - Understanding color sections
• dropdown-customization.md - Button and dropdown customization
• color-palette-customization.md - Custom color definitions
• more-colors-dialog.md - Spectrum picker and recent colors