Loading...
Loading...
Guide for implementing Syncfusion WinUI DropDown Color Picker control for interactive color selection with dropdown functionality. Use this skill when implementing color selection with dropdown, color editing modes (RGB/HSV/HSL/CMYK/Hex), customizable dropdown placement, split button modes, or color picker flyout customization in WinUI applications.
npx skill4agent add syncfusion/winui-ui-components-skills syncfusion-winui-dropdown-color-pickerSfDropDownColorPickerSyncfusion.Editors.WinUISyncfusion.Editors.WinUISyncfusion.UI.Xaml.Editors<Page xmlns:editors="using:Syncfusion.UI.Xaml.Editors">
<Grid>
<editors:SfDropDownColorPicker x:Name="colorPicker"
SelectedBrush="Blue" />
</Grid>
</Page>using Syncfusion.UI.Xaml.Editors;
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
SfDropDownColorPicker colorPicker = new SfDropDownColorPicker();
colorPicker.SelectedBrush = new SolidColorBrush(Colors.Blue);
grid.Children.Add(colorPicker);
}
}// Subscribe to color change event
colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged;
private void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
var oldColor = e.OldBrush;
var newColor = e.NewBrush;
// Apply the selected color
myElement.Background = newColor;
}// User selects a color → apply to app background
SfDropDownColorPicker themeColorPicker = new SfDropDownColorPicker();
themeColorPicker.SelectedBrushChanged += (s, e) =>
{
Window.Current.Content.Background = e.NewBrush;
};<editors:SfDropDownColorPicker DropDownMode="Split"
Command="{x:Bind ApplyColorCommand}" /><editors:SfDropDownColorPicker>
<FlyoutBase.AttachedFlyout>
<editors:DropDownFlyout>
<editors:SfColorPicker BrushTypeOptions="LinearGradientBrush"
Width="250" />
</editors:DropDownFlyout>
</FlyoutBase.AttachedFlyout>
</editors:SfDropDownColorPicker><editors:SfDropDownColorPicker DropDownPlacement="TopEdgeAlignedRight" />| Property | Type | Purpose | Common Values |
|---|---|---|---|
| | Currently selected color | |
| | Dropdown behavior | |
| | Position of dropdown | |
| | Command triggered on button click | Custom ICommand implementation |
// When color is selected, immediately apply to target element
void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
targetRectangle.Fill = e.NewBrush;
}void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e)
{
// Validate color meets requirements
if (IsValidColor(e.NewBrush))
{
ApplyColor(e.NewBrush);
}
else
{
colorPicker.SelectedBrush = e.OldBrush; // Revert
}
}public ICommand QuickApplyCommand => new RelayCommand(() =>
{
// Apply current selected color without opening dropdown
ApplySelectedColorToTextSelection();
});