Events and Commands in .NET MAUI Color Picker (SfColorPicker)

17 Apr 20264 minutes to read

The SfColorPicker control provides three built-in events to handle color selection changes:

• ColorChanging
• ColorChanged
• ColorSelected

ColorChanging event

The ColorChanging event is triggered while the color is being changed. The event arguments are of type ColorChangingEventArgs and provide the following properties:

• CurrentColor : Gets the current color value before the change.
• NewColor : Gets the newly selected color.
• Cancel: Determines whether the color selection should be canceled.

XAML

<inputs:SfColorPicker x:Name="colorPicker" ColorChanging="OnColorChanging"/>

C#

private void OnColorChanging(object sender, ColorChangingEventArgs e)
{
    // To cancel the color picker change.
    e.Cancel = true;
}

ColorChanged event

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

• If IsActionButtonsVisible is set to false, the event is triggered immediately while selecting a color.
• If IsActionButtonsVisible is set to true, the event is triggered only when the selected color is applied.

The event arguments are of type ColorChangedEventArgs and include the following properties:

• OldColor : The previously selected color.
• NewColor : The newly selected color.

XAML

<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>

C#

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

ColorSelected event

The ColorSelected event is triggered when the user selects a color by clicking or tapping on the selected color view. The event arguments are of type ColorSelectedEventArgs and include the following property:

• SelectedColor : The color currently selected by the user.

XAML

<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>

C#

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

Commands

The ColorChangedCommand is executed when the SelectedColor property of the Color Picker changes.

XAML

<syncfusion:SfColorPicker ColorChangedCommand="{Binding ColorChangedCommand}" />

C#

SfColorPicker colorPicker = new SfColorPicker();

// Set a command to execute when the color changes
colorPicker.ColorChangedCommand = new Command<Color>(color =>
{
    // Perform functions based on the selected color
});

// Bind to view model command
colorPicker.SetBinding(SfColorPicker.ColorChangedCommandProperty, "ColorChangedCommand");