How to Handle Events in the .NET MAUI Color Picker?

This article guides you through handling events in the Syncfusion® .NET MAUI Color Picker.

The SfColorPicker control offers three built-in events to track and respond to color selection changes:

• ColorChanging
• ColorChanged
• ColorSelected

ColorChanging Event

The ColorChanging event is triggered while the color is being changed. It allows you to preview or validate the color before it’s finalized. The event arguments are of type ColorChangingEventArgs and provide the following properties:

• CurrentColor: The color before the change.
• NewColor: The color currently being selected.
• Cancel: Determines whether the color selection should be canceled.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
             x:Class="ColorPickerSample.MainPage">

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

</ContentPage>

C#

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

Output:

ColorChanged Event

The ColorChanged event is triggered after a color is selected. The event arguments are of type ColorChangedEventArgs and include the following properties:

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

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
             x:Class="ColorPickerSample.MainPage">

    <inputs:SfColorPicker x:Name="colorPicker" ColorChanged="OnColorChanged"/>

</ContentPage>

C#

private void OnColorChanged(object sender, ColorChangedEventArgs e)
{
    DisplayAlert("Color Changed", $"Changed from {e.OldColor.ToHex()} to {e.NewColor.ToHex()}", "OK");
}

Output:

ColorSelected Event

The ColorSelected event is triggered when the user taps or clicks 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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
             x:Class="ColorPickerSample.MainPage">

    <Grid RowDefinitions="20,80">

        <Label x:Name="label" Grid.Row="0" Text="Selected Color" TextColor="Black" 
               HeightRequest="30" WidthRequest="150" BackgroundColor="LightGray"
               HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
    
        <inputs:SfColorPicker x:Name="colorPicker" Grid.Row="1" ColorSelected="OnColorSelected"/>

    </Grid>

</ContentPage>

C#

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

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to handle events in the .NET MAUI Color Picker (SfColorPicker).

Refer to our .NET MAUI Color Picker feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our Support Forums, Direct-Trac, or Feedback Portal. We are always happy to assist you!