How to Customize the Selected Color in the .NET MAUI Color Picker?

This article demonstrates how to customize the selected color appearance in the Syncfusion® .NET MAUI Color Picker within a .NET MAUI application.

The SfColorPicker control offers flexibility with the SelectedColorTemplate property, which allows you to define a custom layout for displaying the selected color.

Refer to the code snippet below to customize the selected color appearance using a Label and a BoxView:

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">
        <inputs:SfColorPicker.SelectedColorTemplate>
            <DataTemplate>
                <VerticalStackLayout WidthRequest="60" Background="White" Spacing="-4">
                    <Label Text="A" FontSize="20" FontAttributes="Bold" HorizontalOptions="Center" TextColor="Black"/>
                    <BoxView HeightRequest="4" WidthRequest="30" Background="{Binding Source={x:Reference colorPicker},Path=SelectedColor}" />
                </VerticalStackLayout>
            </DataTemplate>
        </inputs:SfColorPicker.SelectedColorTemplate>
   </inputs:SfColorPicker>

</ContentPage>

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to customize the selected color appearance 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!