Customization in .NET MAUI Color Picker (SfColorPicker)

26 Jun 20256 minutes to read

Selected color

The SelectedColor property of the Color Picker is used to display a default color during initial load. You can also select a color value in the UI using built-in elements like the color spectrum, sliders, palette, or HEX input.

<inputs:SfColorPicker SelectedColor="DodgerBlue"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    SelectedColor = Colors.DodgerBlue
};

SelectedColor

Show recent colors

You can display the recently selected colors in the Color Picker when in Palette mode by enabling the ShowRecentColors property. By default, it is set to True.

<inputs:SfColorPicker ShowRecentColors="True"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    ShowRecentColors = true
};

Recent color

Show input area

You can show or hide the input area of the Color Picker by adjusting the ShowInputArea property. By default, it is set to True.

<inputs:SfColorPicker ShowInputArea="False"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    ShowInputArea = false
};

Input area

Alpha slider

The alpha slider is used to control the transparency of the selected color. You can show or hide the alpha slider by adjusting the ShowAlphaSlider property. By default, it is set to True.

<inputs:SfColorPicker ShowAlphaSlider="True"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    ShowAlphaSlider = true
};

Alpha slider

Action buttons

You can render the Color Picker without the Apply and Cancel buttons for a seamless color selection experience. When the control buttons are hidden, the selected color is applied instantly, and the Color Picker popup closes automatically upon selection. To enable this, simply set the IsActionButtonsVisible property to False.

<inputs:SfColorPicker IsActionButtonsVisible="False"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    IsActionButtonsVisible = false
};

Action buttons

Customize action buttons

You can customize the background color for the action buttons by specifying a suitable color for the ApplyButtonBackground and CancelButtonBackground properties.

<inputs:SfColorPicker ApplyButtonBackground="Navy"
                      CancelButtonBackground="LightGrey">
</inputs:SfColorPicker>
SfColorPicker colorPicker = new SfColorPicker()
{
    ApplyButtonBackground = Colors.Navy,
    CancelButtonBackground = Colors.LightGrey
};

Action buttons customization

No color option

The ShowNoColor property determines whether the No Color option is displayed in the Color Picker UI. This option allows users to clear their selection from the palette, effectively choosing no color. By default, this property is set to False.

<inputs:SfColorPicker ShowNoColor="True"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    ShowNoColor = true
};

No color

Palette count

The PaletteColumnCount and PaletteRowCount properties define the number of columns and rows displayed in the palette grid. By default, both are set to 10.

<inputs:SfColorPicker PaletteColumnCount="6" PaletteRowCount="5"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    PaletteColumnCount = 6,
    PaletteRowCount = 5
};

Palette row and column

Palette spacing

The PaletteColumnSpacing property defines the horizontal spacing between columns, while the PaletteRowSpacing property defines the vertical spacing between rows in Palette mode. By default, both properties are set to 0, meaning the swatches are placed directly next to each other without any spacing.

<inputs:SfColorPicker PaletteColumnSpacing="10"
                      PaletteRowSpacing="10"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    PaletteColumnSpacing = 10,
    PaletteRowSpacing = 10
};

Palette row spacing

IsOpen

The IsOpen property in the Color Picker control allows you to programmatically open the popup by setting it to True. By default, this property is set to False.

<inputs:SfColorPicker x:Name="colorPicker" IsOpen="True"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    IsOpen = true
};

The PopupBackground property specifies the background color of the popup panel in the Color Picker control.

<inputs:SfColorPicker x:Name="colorPicker" PopupBackground="Thistle"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    PopupBackground = Colors.Thistle
};

Popup background

The PopupRelativePosition property specifies the placement of the popup in the Color Picker control. It supports the following eight positioning options:

The default position is AlignBottom.

<inputs:SfColorPicker x:Name="colorPicker" PopupRelativePosition="AlignTop"/>
SfColorPicker colorPicker = new SfColorPicker()
{
    PopupRelativePosition = PopupRelativePosition.AlignTop
};

Align top