Solid Color Selection in WinUI Color Picker

15 Jul 20267 minutes to read

This section explains how to select a solid color from different color models, how to modify their individual properties in Color Picker.

What is solid color?

Solid color comprises a single color with its alpha value. It contains different color channels such as RGB, HSV, HSL and CMYK color channels.

Select solid brush programmatically

You can select the solid color brush programmatically by setting the solid color brush value to the SelectedBrush property of type Brush. The XAML Brush type converter accepts standard color names (e.g., Yellow). You can also choose solid color brushes from different standard color models such as RGB, HSV, HSL, and CMYK. The default value of the SelectedBrush property is SolidColorBrush(Colors.Blue).

XAML

<editors:SfColorPicker x:Name="colorPicker"
                        SelectedBrush="Yellow"/>

C#

using Syncfusion.UI.Xaml.Editors;
using Microsoft.UI;
using Microsoft.UI.Xaml.Media;
using Windows.UI;

SfColorPicker colorPicker = new SfColorPicker();
colorPicker.SelectedBrush = new SolidColorBrush(Colors.Yellow);

NOTE

Download demo application from GitHub

Select solid brush interactively

You can select any solid color brush at runtime by clicking on the respective solid color brush area. You can enable only the solid color brush mode by setting the BrushTypeOptions property value to SolidColorBrush.

XAML

<editors:SfColorPicker Name="colorPicker"/>

C#

using Syncfusion.UI.Xaml.Editors;

SfColorPicker colorPicker = new SfColorPicker();
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

NOTE

Download demo application from GitHub

Change opacity of solid brush

You can change the opacity of the selected solid color brush by using the alpha value editor or dedicated slider in the Color Picker. You can hide the alpha slider by setting the AlphaInputOptions property to TextInput, SliderInput, or None. The default value of the AlphaInputOptions property is All.

XAML

<editors:SfColorPicker BrushTypeOptions="SolidColorBrush"
                       AlphaInputOptions="TextInput"
                       Name="colorPicker"/>

C#

using Syncfusion.UI.Xaml.Editors;

colorPicker.AlphaInputOptions = ColorInputOptions.TextInput;
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

NOTE

Download demo application from GitHub

Switch between color channels

The Color Picker contains different color channels, namely RGB, HSV, HSL, and CMYK. You can select any color model by setting the ColorChannelOptions property or by selecting it from the drop-down list. The default value of the ColorChannelOptions property is RGB.

XAML

<editors:SfColorPicker BrushTypeOptions="SolidColorBrush"
                        x:Name="colorPicker"
                        ColorChannelOptions="HSV"/>

C#

using Syncfusion.UI.Xaml.Editors;

SfColorPicker colorPicker = new SfColorPicker();
colorPicker.ColorChannelOptions = ColorChannelOptions.HSV;
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

NOTE

Download demo application from GitHub

Choose color-channel input mode

You can change the value of the selected color channel components by using either a text editor, a slider, or both. If you want to restrict the input to a text editor or a slider only, use the ColorChannelInputOptions property value of TextInput or SliderInput. The default value of the ColorChannelInputOptions property is All.

XAML

<editors:SfColorPicker BrushTypeOptions="SolidColorBrush"
                       ColorChannelInputOptions="TextInput"
                       Name="colorPicker"/>

C#

using Syncfusion.UI.Xaml.Editors;

colorPicker.ColorChannelInputOptions = ColorInputOptions.TextInput;
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

NOTE

Download demo application from GitHub

Hexadecimal editor

You can select a solid color brush by entering a hexadecimal color value in the hexadecimal value editor. You can also read the selected color’s hexadecimal value from this editor. You can hide the hexadecimal value editor by setting the IsHexInputVisible property to false. The default value of the IsHexInputVisible property is true.

XAML

<editors:SfColorPicker BrushTypeOptions="SolidColorBrush"
                       IsHexInputVisible="False"
                       Name="colorPicker"/>

C#

using Syncfusion.UI.Xaml.Editors;

colorPicker.IsHexInputVisible = false;
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

NOTE

Download demo application from GitHub

Expand or collapse the Color Editors visibility

You can change the visibility of the hexadecimal value editor and color channel editors to an expandable or collapsed state by setting the ColorEditorsVisibilityMode property. The supported values are:

• Inline (default) - editors are always visible.
• Expandable - editors are collapsed by default and can be expanded.
• Collapsed - editors are always collapsed.

XAML

<editors:SfColorPicker BrushTypeOptions="SolidColorBrush"
                       ColorEditorsVisibilityMode="Expandable"
                       Name="colorPicker"/>

C#

using Syncfusion.UI.Xaml.Editors;

colorPicker.ColorEditorsVisibilityMode = ColorEditorsVisibilityMode.Expandable;
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

NOTE

Download demo application from GitHub

Selected brush changed notification

You will be notified when the selected solid color brush changes in Color Picker by using the SelectedBrushChanged event. You can get the old and newly selected brush by using the OldBrush and NewBrush properties of the SelectedBrushChangedEventArgs class.

XAML

<editors:SfColorPicker BrushTypeOptions="SolidColorBrush"
                       SelectedBrushChanged="ColorPicker_SelectedBrushChanged"
                       Name="colorPicker"/>

C#

using Syncfusion.UI.Xaml.Editors;

colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged;
colorPicker.BrushTypeOptions = BrushTypeOptions.SolidColorBrush;

You can handle the event as follows.

C#

private void ColorPicker_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs args)
{
    var oldSelectedBrush = args.OldBrush;
    var newSelectedBrush = args.NewBrush;
}