Events and Commands in .NET MAUI Color Picker

18 Nov 20187 minutes to read

The .NET MAUI Color Picker control provides three events and one command that let you respond to color selection changes from XAML, code-behind, or a view model:

Prerequisites

Before using the SfColorPicker, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Inputs

For a step-by-step setup, refer to the Getting Started documentation.

ColorChanging event

The ColorChanging event is raised continuously while the user is changing the color. The event arguments are of type ColorChangingEventArgs:

Property Type Description
CurrentColor Color The color value before the change.
NewColor Color The newly selected color.
Cancel bool Set to true to veto the change and keep CurrentColor. 
<inputs:SfColorPicker x:Name="colorPicker" 
                      ColorChanging="OnColorChanging"/>
SfColorPicker colorPicker = new SfColorPicker();
colorPicker.ColorChanging += OnColorChanging;
            
this.Content = colorPicker;

The ColorChanging event can be handled in C# as follows:

private void OnColorChanging(object sender, ColorChangingEventArgs e)
{
    // Veto the new selection and keep the current color.
    e.Cancel = true;
}

ColorChanged event

The ColorChanged event is raised when the user commits a color. Its behavior depends on the IsActionButtonsVisible property:

  • When IsActionButtonsVisible is false, the event is raised immediately while the user selects a color.
  • When IsActionButtonsVisible is true, the event is raised only after the user clicks Apply (the picker shows Apply/Cancel action buttons).

The event arguments are of type ColorChangedEventArgs:

Property Type Description
OldColor Color The previously selected color.
NewColor Color The newly selected color. 
<Grid ColumnDefinitions="*,Auto">

    <inputs:SfColorPicker x:Name="colorPicker" 
                          Grid.Column="0"
                          ColorChanged="OnColorChanged"/>

    <Label x:Name="label" 
           Grid.Column="1" 
           Text="Selected Color"
           HorizontalTextAlignment="Center" 
           VerticalTextAlignment="Center"
           TextColor="Black" 
           BackgroundColor="LightGray"/>

</Grid>
private void OnColorChanged(object sender, ColorChangedEventArgs e)
{
    label.BackgroundColor = e.NewColor;
    label.Text = e.NewColor.ToHex();
}

ColorSelected event

The ColorSelected event is raised when the user clicks or taps the selected-color display area in the header. The event arguments are of type ColorSelectedEventArgs:

Property Type Description
SelectedColor Color The color currently selected by the user. 
<Grid ColumnDefinitions="*,Auto">

    <inputs:SfColorPicker x:Name="colorPicker" 
                          Grid.Column="0"
                          ColorSelected="OnColorSelected"/>

    <Label x:Name="label" 
           Grid.Column="1" 
           Text="Selected Color"
           HorizontalTextAlignment="Center" 
           VerticalTextAlignment="Center"
           TextColor="Black" 
           BackgroundColor="LightGray"/>

</Grid>
private void OnColorSelected(object sender, ColorSelectedEventArgs e)
{
    label.BackgroundColor = e.SelectedColor;
    label.Text = e.SelectedColor.ToHex();
}

Commands

The ColorChangedCommand is an ICommand that is invoked when the SelectedColor property of the color picker changes.

Assign a command in code

Use this approach when the color picker lives in a page that has no view model.

SfColorPicker colorPicker = new SfColorPicker();

// Run an inline command when the color changes.
colorPicker.ColorChangedCommand = new Command<Color>(color =>
{
    // Perform actions based on the selected color, e.g., update other UI.
});

Content = colorPicker;

Bind a command from a view model

Use this approach to keep your page free of UI logic. The bound command property on the view model must expose ICommand.

<inputs:SfColorPicker ColorChangedCommand="{Binding ColorChangedCommand}">
    <inputs:SfColorPicker.BindingContext>
        <local:ColorPickerViewModel/>
    </inputs:SfColorPicker.BindingContext>
</inputs:SfColorPicker>
// View model
public class ColorPickerViewModel
{
    public ICommand ColorChangedCommand { get; }

    public ColorPickerViewModel()
    {
        // The command receives the new Color as its parameter.
        ColorChangedCommand = new Command<Color>(color =>
        {
            // Apply business logic, save the value, etc.
        });
    }
}

See also