Class SfColorPicker

Represents a color picker control that allows users to select colors in various formats.

Inheritance

System.Object

SfView

SfColorPicker

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.ArrangeContent(Rect)

SfView.ArrangeOverride(Rect)

SfView.Children

SfView.ClipToBounds

SfView.GetSemanticsNodesCore(Double, Double)

SfView.IDrawableLayout.DrawingOrder

SfView.IDrawableLayout.InvalidateDrawable()

SfView.MeasureContent(Double, Double)

SfView.MeasureOverride(Double, Double)

SfView.OnBindingContextChanged()

SfView.OnDraw(ICanvas, RectF)

SfView.Padding

SfView.PaddingProperty

Namespace: Syncfusion.Maui.Inputs

Assembly: Syncfusion.Maui.Inputs.dll

Syntax

public class SfColorPicker : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, IColorPicker, IParentThemeElement, IThemeElement

Constructors

SfColorPicker()

Initializes a new instance of the SfColorPicker class.

Declaration

public SfColorPicker()

Fields

ApplyButtonBackgroundProperty

Identifies the ApplyButtonBackground bindable property.

Declaration

public static readonly BindableProperty ApplyButtonBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ApplyButtonLabelStyleProperty

Identifies the ApplyButtonLabelStyle bindable property.

Declaration

public static readonly BindableProperty ApplyButtonLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

CancelButtonBackgroundProperty

Identifies the CancelButtonBackground bindable property.

Declaration

public static readonly BindableProperty CancelButtonBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

CancelButtonLabelStyleProperty

Identifies the CancelButtonLabelStyle bindable property.

Declaration

public static readonly BindableProperty CancelButtonLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ColorChangedCommandProperty

Identifies the ColorChangedCommand bindable property.

Declaration

public static readonly BindableProperty ColorChangedCommandProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ColorModeProperty

Identifies the ColorMode bindable property.

Declaration

public static readonly BindableProperty ColorModeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

DisplayViewHeightProperty

Identifies the DisplayViewHeight bindable property.

Declaration

public static readonly BindableProperty DisplayViewHeightProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

DisplayViewStrokeProperty

Identifies the DisplayViewStroke bindable property.

Declaration

public static readonly BindableProperty DisplayViewStrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

DisplayViewStrokeThicknessProperty

Identifies the DisplayViewStrokeThickness bindable property.

Declaration

public static readonly BindableProperty DisplayViewStrokeThicknessProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

DropDownButtonTemplateProperty

Identifies the DropDownButtonTemplate bindable property.

Declaration

public static readonly BindableProperty DropDownButtonTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

DropDownWidthProperty

Identifies the DropDownWidth bindable property.

Declaration

public static readonly BindableProperty DropDownWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

FlowDirectionProperty

Identifies the FlowDirection bindable property.

Declaration

public static readonly BindableProperty FlowDirectionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsActionButtonsVisibleProperty

Identifies the IsActionButtonsVisible bindable property.

Declaration

public static readonly BindableProperty IsActionButtonsVisibleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsColorModeSwitcherVisibleProperty

Identifies the IsColorModeSwitcherVisible bindable property.

Declaration

public static readonly BindableProperty IsColorModeSwitcherVisibleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsInlineProperty

Identifies the IsInline bindable property.

Declaration

public static readonly BindableProperty IsInlineProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsOpenProperty

Identifies the IsOpen bindable property.

Declaration

public static readonly BindableProperty IsOpenProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteCellCornerRadiusProperty

Identifies the PaletteCellCornerRadius bindable property.

Declaration

public static readonly BindableProperty PaletteCellCornerRadiusProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteCellShapeProperty

Identifies the PaletteCellShape bindable property.

Declaration

public static readonly BindableProperty PaletteCellShapeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteCellSizeProperty

Identifies the PaletteCellSize bindable property.

Declaration

public static readonly BindableProperty PaletteCellSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteColorsProperty

Identifies the PaletteColors bindable property.

Declaration

public static readonly BindableProperty PaletteColorsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteColumnCountProperty

Identifies the PaletteColumnCount bindable property.

Declaration

public static readonly BindableProperty PaletteColumnCountProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteColumnSpacingProperty

Identifies the PaletteColumnSpacing bindable property.

Declaration

public static readonly BindableProperty PaletteColumnSpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteRowCountProperty

Identifies the PaletteRowCount bindable property.

Declaration

public static readonly BindableProperty PaletteRowCountProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PaletteRowSpacingProperty

Identifies the PaletteRowSpacing bindable property.

Declaration

public static readonly BindableProperty PaletteRowSpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PopupBackgroundProperty

Identifies the PopupBackground bindable property.

Declaration

public static readonly BindableProperty PopupBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PopupRelativePositionProperty

Identifies the PopupRelativePosition bindable property.

Declaration

public static readonly BindableProperty PopupRelativePositionProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

RecentColorsLabelStyleProperty

Identifies the RecentColorsLabelStyle bindable property.

Declaration

public static readonly BindableProperty RecentColorsLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectedColorIconProperty

Identifies the SelectedColorIcon bindable property.

Declaration

public static readonly BindableProperty SelectedColorIconProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectedColorIconSizeProperty

Identifies the SelectedColorIconSize bindable property.

Declaration

public static readonly BindableProperty SelectedColorIconSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectedColorProperty

Identifies the SelectedColor bindable property.

Declaration

public static readonly BindableProperty SelectedColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectedColorTemplateProperty

Identifies the SelectedColorTemplate bindable property.

Declaration

public static readonly BindableProperty SelectedColorTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionIndicatorRadiusProperty

Identifies the SelectionIndicatorRadius bindable property.

Declaration

public static readonly BindableProperty SelectionIndicatorRadiusProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionIndicatorStrokeProperty

Identifies the SelectionIndicatorStroke bindable property.

Declaration

public static readonly BindableProperty SelectionIndicatorStrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SelectionIndicatorStrokeThicknessProperty

Identifies the SelectionIndicatorStrokeThickness bindable property.

Declaration

public static readonly BindableProperty SelectionIndicatorStrokeThicknessProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowAlphaSliderProperty

Identifies the ShowAlphaSlider bindable property.

Declaration

public static readonly BindableProperty ShowAlphaSliderProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowInputAreaProperty

Identifies the ShowInputArea bindable property.

Declaration

public static readonly BindableProperty ShowInputAreaProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowNoColorProperty

Identifies the ShowNoColor bindable property.

Declaration

public static readonly BindableProperty ShowNoColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShowRecentColorsProperty

Identifies the ShowRecentColors bindable property.

Declaration

public static readonly BindableProperty ShowRecentColorsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SliderThumbFillProperty

Identifies the SliderThumbFill bindable property.

Declaration

public static readonly BindableProperty SliderThumbFillProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SliderThumbRadiusProperty

Identifies the SliderThumbRadius bindable property.

Declaration

public static readonly BindableProperty SliderThumbRadiusProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SliderThumbStrokeProperty

Identifies the SliderThumbStroke bindable property.

Declaration

public static readonly BindableProperty SliderThumbStrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SliderThumbStrokeThicknessProperty

Identifies the SliderThumbStrokeThickness bindable property.

Declaration

public static readonly BindableProperty SliderThumbStrokeThicknessProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

SpectrumInputViewLabelStyleProperty

Identifies the SpectrumInputViewLabelStyle bindable property.

Declaration

public static readonly BindableProperty SpectrumInputViewLabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

ApplyButtonBackground

Gets or sets the background brush for the Apply button.

Declaration

public Brush ApplyButtonBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A Microsoft.Maui.Controls.Brush value. The default is null.

Examples

<!-- Set Apply button background -->
<syncfusion:SfColorPicker ApplyButtonBackground="Green" />

var colorPicker = new SfColorPicker();

// Set Apply button background
colorPicker.ApplyButtonBackground = new SolidColorBrush(Colors.Green);

ApplyButtonLabelStyle

Gets or sets the text style for the Apply button.

Declaration

public LabelStyle ApplyButtonLabelStyle { get; set; }

Property Value

Type	Description
LabelStyle	A LabelStyle instance. The default is null.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.ApplyButtonLabelStyle>
        <syncfusion:LabelStyle FontSize="16" TextColor="White" FontAttributes="Bold" />
    </syncfusion:SfColorPicker.ApplyButtonLabelStyle>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set Apply button text style
colorPicker.ApplyButtonLabelStyle = new LabelStyle
{
    FontSize = 16,
    TextColor = Colors.White,
    FontAttributes = FontAttributes.Bold
};

CancelButtonBackground

Gets or sets the background brush for the Cancel button.

Declaration

public Brush CancelButtonBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A Microsoft.Maui.Controls.Brush value. The default is null.

Examples

<!-- Set Cancel button background -->
<syncfusion:SfColorPicker CancelButtonBackground="Red" />

var colorPicker = new SfColorPicker();

// Set Cancel button background
colorPicker.CancelButtonBackground = new SolidColorBrush(Colors.Red);

CancelButtonLabelStyle

Gets or sets the text style for the Cancel button.

Declaration

public LabelStyle CancelButtonLabelStyle { get; set; }

Property Value

Type	Description
LabelStyle	A LabelStyle instance. The default is null.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.CancelButtonLabelStyle>
        <syncfusion:LabelStyle FontSize="16" TextColor="White" FontAttributes="Bold" />
    </syncfusion:SfColorPicker.CancelButtonLabelStyle>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set Cancel button text style
colorPicker.CancelButtonLabelStyle = new LabelStyle
{
    FontSize = 16,
    TextColor = Colors.White,
    FontAttributes = FontAttributes.Bold
};

ColorChangedCommand

Gets or sets the command to execute when the Apply button is clicked.

Declaration

public ICommand ColorChangedCommand { get; set; }

Property Value

Type	Description
System.Windows.Input.ICommand	An System.Windows.Input.ICommand instance. The default is null.

Examples

<!-- Bind to view model command -->
<syncfusion:SfColorPicker ColorChangedCommand="{Binding ColorChangedCommand}" />

var colorPicker = new SfColorPicker();

// Set a command to execute when color changes
colorPicker.ColorChangedCommand = new Command<Color>(color =>
{
    // Handle color change
    Debug.WriteLine($"Color changed to: {color}");
});

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

ColorMode

Gets or sets the color picker mode (Spectrum or Palette).

Declaration

public ColorPickerMode ColorMode { get; set; }

Property Value

Type	Description
ColorPickerMode	A ColorPickerMode value. The default is Spectrum.

Examples

<!-- Set to spectrum mode for continuous color selection -->
<syncfusion:SfColorPicker ColorMode="Spectrum" />

var colorPicker = new SfColorPicker();

// Set to spectrum mode for continuous color selection
colorPicker.ColorMode = ColorPickerMode.Spectrum;

DisplayViewHeight

Gets or sets a value that defines the height of the display view in the color picker.

Declaration

public double DisplayViewHeight { get; set; }

Property Value

Type	Description
System.Double	A double value representing the height in device-independent units. The default is 32.0.

Examples

<!-- Set taller display view -->
<syncfusion:SfColorPicker DisplayViewHeight="48" />

var colorPicker = new SfColorPicker();

// Set taller display view
colorPicker.DisplayViewHeight = 48;

DisplayViewStroke

Gets or sets the stroke color for the display view border.

Declaration

public Color DisplayViewStroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color that represents the stroke color of the display view border. The default value is Microsoft.Maui.Graphics.Colors.LightGray.

Examples

<syncfusion:SfColorPicker DisplayViewStroke="Red" />

var colorPicker = new SfColorPicker(); 
colorPicker.DisplayViewStroke = Colors.Red;

DisplayViewStrokeThickness

Gets or sets the stroke thickness for the display view border.

Declaration

public double DisplayViewStrokeThickness { get; set; }

Property Value

Type	Description
System.Double	A double value representing the stroke thickness in device-independent units. The default value is 1.0.

Examples

<syncfusion:SfColorPicker DisplayViewStrokeThickness="3" />

var colorPicker = new SfColorPicker();
colorPicker.DisplayViewStrokeThickness = 3;

DropDownButtonTemplate

Gets or sets the content template for the dropdown button of the color picker.

Declaration

public DataTemplate DropDownButtonTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	A Microsoft.Maui.Controls.DataTemplate that defines the visual structure of the dropdown button.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.DropDownButtonTemplate>
        <DataTemplate>
            <Border StrokeThickness="2" Stroke="Gray" BackgroundColor="{Binding .}">
                <Label Text="Color" HorizontalOptions="Center" VerticalOptions="Center" />
            </Border>
        </DataTemplate>
    </syncfusion:SfColorPicker.DropDownButtonTemplate>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set custom template for selected color display
colorPicker.DropDownButtonTemplate = new DataTemplate(() =>
{
    var border = new Border
    {
        StrokeThickness = 2,
        Stroke = Colors.Gray,
        BackgroundColor = Colors.White
    };
    border.SetBinding(Border.BackgroundColorProperty, ".");
    return border;
});

DropDownWidth

Gets or sets the width of the dropdown button in the color picker display view.

Declaration

public double DropDownWidth { get; set; }

Property Value

Type	Description
System.Double	A double value representing the width in device-independent units. The default is 32.0.

Examples

<syncfusion:SfColorPicker DropDownWidth="48" />

var colorPicker = new SfColorPicker();

colorPicker.DropDownWidth = 48;

FlowDirection

Gets or sets the flow direction for the color picker layout, determining whether the content is laid out from left to right or right to left.

Declaration

public FlowDirection FlowDirection { get; set; }

Property Value

Type	Description
Microsoft.Maui.FlowDirection	A FlowDirection value. The default is Microsoft.Maui.FlowDirection.LeftToRight.

Examples

<!-- Set flow direction to right-to-left for RTL languages -->
<syncfusion:SfColorPicker FlowDirection="RightToLeft" />

var colorPicker = new SfColorPicker();

// Set flow direction to right-to-left
colorPicker.FlowDirection = FlowDirection.RightToLeft;

IsActionButtonsVisible

Gets or sets a value indicating whether the action buttons (Apply/Cancel) are visible.

Declaration

public bool IsActionButtonsVisible { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is true.

Examples

<!-- Hide action buttons for immediate color application -->
<syncfusion:SfColorPicker IsActionButtonsVisible="False" />

var colorPicker = new SfColorPicker();

// Hide action buttons for immediate color application
colorPicker.IsActionButtonsVisible = false;

IsColorModeSwitcherVisible

Gets or sets a value indicating whether to show the color palette.

Declaration

public bool IsColorModeSwitcherVisible { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is true.

Examples

<syncfusion:SfColorPicker IsColorModeSwitcherVisible="False" />

var colorPicker = new SfColorPicker();

// Hide the mode switcher to lock to current mode
colorPicker.IsColorModeSwitcherVisible = false;

IsInline

Gets or sets a value that indicates whether the color picker is displayed inline (embedded in the UI) instead of showing in a popup or flyout.

Declaration

public bool IsInline { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is false.

Examples

<!-- Display inline within the page layout -->
<syncfusion:SfColorPicker IsInline="True" />

var colorPicker = new SfColorPicker();

// Display inline within the page layout
colorPicker.IsInline = true;

IsOpen

Gets or sets a value indicating whether the color picker popup is open.

Declaration

public bool IsOpen { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is false.

Examples

<syncfusion:SfColorPicker IsOpen="True" />

var colorPicker = new SfColorPicker();

// Open the popup programmatically
colorPicker.IsOpen = true;

PaletteCellCornerRadius

Gets or sets the corner radius of the square color cells when ColorPaletteType is Default.

Declaration

public CornerRadius PaletteCellCornerRadius { get; set; }

Property Value

Type	Description
Microsoft.Maui.CornerRadius	A double value representing the cell size in device-independent units. The default is 0.

Examples

<!-- Set larger palette cells -->
<syncfusion:SfColorPicker PaletteCellCornerRadius="15, 12, 15, 7" />

var colorPicker = new SfColorPicker();

// Set larger palette cells
colorPicker.PaletteCellCornerRadius = new CornerRadius(15, 12, 15, 7);

PaletteCellShape

Gets or sets the type of color palette display (Circle or Rectangle).

Declaration

public PaletteCellShape PaletteCellShape { get; set; }

Property Value

Type	Description
PaletteCellShape	A PaletteCellShape value. The default is Default.

Examples

<!-- Set circular palette cells -->
<syncfusion:SfColorPicker PaletteCellShape="Circle" />

var colorPicker = new SfColorPicker();

// Set circular palette cells
colorPicker.PaletteCellShape = PaletteCellShape.Circle;

PaletteCellSize

Gets or sets the width of rectangular color cells when ColorPaletteType is Rectangle.

Declaration

public double PaletteCellSize { get; set; }

Property Value

Type	Description
System.Double	A double value representing the cell size in device-independent units. The default is 30.0.

Examples

<!-- Set larger palette cells -->
<syncfusion:SfColorPicker PaletteCellSize="40" />

var colorPicker = new SfColorPicker();

// Set larger palette cells
colorPicker.PaletteCellSize = 40;

PaletteColors

Gets or sets the collection of colors to display in the color palette.

Declaration

public List<Color> PaletteColors { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<Microsoft.Maui.Graphics.Color>	A System.Collections.Generic.List<> containing the colors to display. The default includes basic colors like Black, Red, Blue, Yellow, etc.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.PaletteColors>
        <x:Array Type="{x:Type Color}">
            <x:Static Member="Colors.Red" />
            <x:Static Member="Colors.Green" />
            <x:Static Member="Colors.Blue" />
            <x:Static Member="Colors.Yellow" />
        </x:Array>
    </syncfusion:SfColorPicker.PaletteColors>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set custom palette colors
colorPicker.PaletteColors = new List<Color>
{
    Colors.Red, Colors.Green, Colors.Blue,
    Colors.Yellow, Colors.Purple, Colors.Orange
};

// Add a color to existing palette
colorPicker.PaletteColors.Add(Colors.Pink);

PaletteColumnCount

Gets or sets the number of columns in the color palette grid.

Declaration

public int PaletteColumnCount { get; set; }

Property Value

Type	Description
System.Int32	An integer value greater than 0. The default is 10.

Examples

<!-- Set a 8-column palette -->
<syncfusion:SfColorPicker PaletteColumnCount="8" />

var colorPicker = new SfColorPicker();

// Set a 8-column palette
colorPicker.PaletteColumnCount = 8;

PaletteColumnSpacing

Gets or sets the spacing between columns in the color palette grid.

Declaration

public double PaletteColumnSpacing { get; set; }

Property Value

Type	Description
System.Double	A double value representing the spacing in device-independent units. The default is 0.0.

Examples

<!-- Add spacing between palette columns -->
<syncfusion:SfColorPicker PaletteColumnSpacing="5" />

var colorPicker = new SfColorPicker();

// Add spacing between palette columns
colorPicker.PaletteColumnSpacing = 5;

PaletteRowCount

Gets or sets the number of rows in the color palette grid.

Declaration

public int PaletteRowCount { get; set; }

Property Value

Type	Description
System.Int32	An integer value greater than 0. The default is 10.

Examples

<!-- Set a 5x5 palette grid -->
<syncfusion:SfColorPicker PaletteRowCount="5" PaletteColumnCount="5" />

var colorPicker = new SfColorPicker();

// Set a 5x5 palette grid
colorPicker.PaletteRowCount = 5;
colorPicker.PaletteColumnCount = 5;
.

PaletteRowSpacing

Gets or sets the spacing between rows in the color palette grid.

Declaration

public double PaletteRowSpacing { get; set; }

Property Value

Type	Description
System.Double	A double value representing the spacing in device-independent units. The default is 0.0.

Examples

<!-- Add spacing between palette rows -->
<syncfusion:SfColorPicker PaletteRowSpacing="5" />

var colorPicker = new SfColorPicker();

// Add spacing between palette rows
colorPicker.PaletteRowSpacing = 5;

PopupBackground

Gets or sets the background brush for the color picker popup.

Declaration

public Brush PopupBackground { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A Microsoft.Maui.Controls.Brush value. The default is Microsoft.Maui.Controls.Brush.Transparent.

Examples

<!-- Set solid color background -->
<syncfusion:SfColorPicker PopupBackground="LightGray" />
.

var colorPicker = new SfColorPicker();

// Set solid color background
colorPicker.PopupBackground = new SolidColorBrush(Colors.LightGray);

PopupRelativePosition

Gets or sets a value to open the popup relative to a view.

Declaration

public PopupRelativePosition PopupRelativePosition { get; set; }

Property Value

Type	Description
PopupRelativePosition	A PopupRelativePosition value. The default is AlignBottomLeft.

Examples

<!-- Open popup above the color picker -->
<syncfusion:SfColorPicker PopupRelativePosition="AlignTopLeft" />

var colorPicker = new SfColorPicker();

// Open popup above the color picker
colorPicker.PopupRelativePosition = PopupRelativePosition.AlignTopLeft;

RecentColorsLabelStyle

Gets or sets the text style for the recent colors label.

Declaration

public LabelStyle RecentColorsLabelStyle { get; set; }

Property Value

Type	Description
LabelStyle	A LabelStyle instance. The default is a new LabelStyle instance.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.RecentColorsLabelStyle>
        <syncfusion:LabelStyle FontSize="14" TextColor="DarkGray" FontAttributes="Italic" />
    </syncfusion:SfColorPicker.RecentColorsLabelStyle>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set recent colors label style
colorPicker.RecentColorsLabelStyle = new LabelStyle
{
    FontSize = 14,
    TextColor = Colors.DarkGray,
    FontAttributes = FontAttributes.Italic
};

SelectedColor

Gets or sets the currently selected color.

Declaration

public Color SelectedColor { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color value representing the selected color. The default is Microsoft.Maui.Graphics.Colors.Red.

Examples

<syncfusion:SfColorPicker SelectedColor="Blue" />

var colorPicker = new SfColorPicker();
colorPicker.SelectedColor = Colors.Blue;

SelectedColorIcon

Gets or sets the icon displayed for the selected color in the color picker display view.

Declaration

public FontImageSource SelectedColorIcon { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.FontImageSource	A Microsoft.Maui.Controls.FontImageSource instance. The default is null.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.SelectedColorIcon>
        <FontImageSource FontFamily="MaterialIcons" Glyph="" Color="Black" Size="20" />
    </syncfusion:SfColorPicker.SelectedColorIcon>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set a custom icon for the selected color display
colorPicker.SelectedColorIcon = new FontImageSource
{
    FontFamily = "MaterialIcons",
    Glyph = "\ue40a", // Color palette icon
    Color = Colors.Black,
    Size = 20
};

SelectedColorIconSize

Gets or sets the size of the selected color icon.

Declaration

public double SelectedColorIconSize { get; set; }

Property Value

Type	Description
System.Double	A double value representing the icon size in device-independent units. The default is 24.0.

Examples

<!-- Set larger icon size -->
<syncfusion:SfColorPicker SelectedColorIconSize="32" />

var colorPicker = new SfColorPicker();

// Set larger icon size
colorPicker.SelectedColorIconSize = 32;

SelectedColorTemplate

Gets or sets the data template used to customize the appearance of the selected color display view.

Declaration

public DataTemplate SelectedColorTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	A Microsoft.Maui.Controls.DataTemplate instance. The default is null.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.SelectedColorTemplate>
        <DataTemplate>
            <Border StrokeThickness="2" Stroke="Gray" BackgroundColor="{Binding .}">
                <Label Text="Color" HorizontalOptions="Center" VerticalOptions="Center" />
            </Border>
        </DataTemplate>
    </syncfusion:SfColorPicker.SelectedColorTemplate>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set custom template for selected color display
colorPicker.SelectedColorTemplate = new DataTemplate(() =>
{
    var border = new Border
    {
        StrokeThickness = 2,
        Stroke = Colors.Gray,
        BackgroundColor = Colors.White
    };
    border.SetBinding(Border.BackgroundColorProperty, ".");
    return border;
});

SelectionIndicatorRadius

Gets or sets the radius of the spectrum selection indicator.

Declaration

public double SelectionIndicatorRadius { get; set; }

Property Value

Type	Description
System.Double	A double value representing the radius in device-independent units. The default is 10.0.

Examples

<!-- Set larger selection indicator -->
<syncfusion:SfColorPicker SelectionIndicatorRadius="15" />

var colorPicker = new SfColorPicker();

// Set larger selection indicator
colorPicker.SelectionIndicatorRadius = 15;

SelectionIndicatorStroke

Gets or sets the stroke color of the selection indicator.

Declaration

public Color SelectionIndicatorStroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color value. The default is Microsoft.Maui.Graphics.Colors.Black.

Examples

<!-- Set white stroke for better visibility on dark backgrounds -->
<syncfusion:SfColorPicker SelectionIndicatorStroke="White" />

var colorPicker = new SfColorPicker();

// Set white stroke for better visibility on dark backgrounds
colorPicker.SelectionIndicatorStroke = Colors.White;

SelectionIndicatorStrokeThickness

Gets or sets the stroke thickness of the selection indicator.

Declaration

public double SelectionIndicatorStrokeThickness { get; set; }

Property Value

Type	Description
System.Double	A double value representing the thickness in device-independent units. The default is 2.0.

Examples

<!-- Set thicker stroke for selection indicator -->
<syncfusion:SfColorPicker SelectionIndicatorStrokeThickness="3" />

var colorPicker = new SfColorPicker();

// Set thicker stroke for selection indicator
colorPicker.SelectionIndicatorStrokeThickness = 3;

ShowAlphaSlider

Gets or sets a value indicating whether to show the alpha slider.

Declaration

public bool ShowAlphaSlider { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is true.

Examples

<syncfusion:SfColorPicker ShowAlphaSlider="False" />

var colorPicker = new SfColorPicker();

// Hide the alpha slider for opaque colors only
colorPicker.ShowAlphaSlider = false;

ShowInputArea

Gets or sets a value indicating whether to show the input fields.

Declaration

public bool ShowInputArea { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is true.

Examples

<syncfusion:SfColorPicker ShowInputArea="False" />

var colorPicker = new SfColorPicker();

// Hide input fields for a simplified UI
colorPicker.ShowInputArea = false;

ShowNoColor

Gets or sets a value indicating whether to show the "No Color" option.

Declaration

public bool ShowNoColor { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is false.

Examples

<!-- Show "No Color" option to allow transparent selection -->
<syncfusion:SfColorPicker ShowNoColor="True" />

var colorPicker = new SfColorPicker();

// Show "No Color" option to allow transparent selection
colorPicker.ShowNoColor = true;

ShowRecentColors

Gets or sets a value indicating whether to show recent colors.

Declaration

public bool ShowRecentColors { get; set; }

Property Value

Type	Description
System.Boolean	A Boolean value. The default is true.

Examples

<!-- Hide recent colors section -->
<syncfusion:SfColorPicker ShowRecentColors="False" />

var colorPicker = new SfColorPicker();

// Hide recent colors section
colorPicker.ShowRecentColors = false;

SliderThumbFill

Gets or sets the fill brush for the slider thumb.

Declaration

public Brush SliderThumbFill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	A Microsoft.Maui.Controls.Brush value. The default is Microsoft.Maui.Controls.Brush.Transparent.

Examples

<!-- Set solid color fill for slider thumb -->
<syncfusion:SfColorPicker SliderThumbFill="Blue" />

var colorPicker = new SfColorPicker();

// Set solid color fill for slider thumb
colorPicker.SliderThumbFill = new SolidColorBrush(Colors.Blue);

SliderThumbRadius

Gets or sets the radius for the slider thumb.

Declaration

public double SliderThumbRadius { get; set; }

Property Value

Type	Description
System.Double	A double value representing the radius in device-independent units. The default is 8.0.

Examples

<!-- Set larger slider thumb -->
<syncfusion:SfColorPicker SliderThumbRadius="12" />

var colorPicker = new SfColorPicker();

// Set larger slider thumb
colorPicker.SliderThumbRadius = 12;

SliderThumbStroke

Gets or sets the stroke brush for the slider thumb.

Declaration

public Color SliderThumbStroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Color	A Microsoft.Maui.Graphics.Color value. The default is Microsoft.Maui.Graphics.Colors.White.

Examples

<!-- Set slider thumb stroke color -->
<syncfusion:SfColorPicker SliderThumbStroke="Black" />

var colorPicker = new SfColorPicker();

// Set slider thumb stroke color
colorPicker.SliderThumbStroke = Colors.Black;

SliderThumbStrokeThickness

Gets or sets the stroke thickness for the slider thumb.

Declaration

public double SliderThumbStrokeThickness { get; set; }

Property Value

Type	Description
System.Double	A double value representing the thickness in device-independent units. The default is 2.0.

Examples

<!-- Set thicker stroke for slider thumb -->
<syncfusion:SfColorPicker SliderThumbStrokeThickness="3" />

var colorPicker = new SfColorPicker();

// Set thicker stroke for slider thumb
colorPicker.SliderThumbStrokeThickness = 3;

SpectrumInputViewLabelStyle

Gets or sets the text style for the spectrum input view.

Declaration

public LabelStyle SpectrumInputViewLabelStyle { get; set; }

Property Value

Type	Description
LabelStyle	A LabelStyle instance. The default is a new LabelStyle instance.

Examples

<syncfusion:SfColorPicker>
    <syncfusion:SfColorPicker.SpectrumInputViewLabelStyle>
        <syncfusion:LabelStyle FontSize="14" TextColor="Black" FontFamily="Arial" />
    </syncfusion:SfColorPicker.SpectrumInputViewLabelStyle>
</syncfusion:SfColorPicker>

var colorPicker = new SfColorPicker();

// Set spectrum input view text style
colorPicker.SpectrumInputViewLabelStyle = new LabelStyle
{
    FontSize = 14,
    TextColor = Colors.Black,
    FontFamily = "Arial"
};

Methods

ClearRecentColors()

Method to clear the recent colors.

Declaration

public void ClearRecentColors()

GetThemeDictionary()

Gets the theme dictionary for the SfColorPicker control.

Declaration

public ResourceDictionary GetThemeDictionary()

Returns

Type	Description
Microsoft.Maui.Controls.ResourceDictionary	The ResourceDictionary containing theme resources for the control.

OnCommonThemeChanged(String, String)

Called when the common theme changes.

Declaration

public void OnCommonThemeChanged(string oldTheme, string newTheme)

Parameters

Type	Name	Description
System.String	oldTheme	The old theme.
System.String	newTheme	The new theme.

OnControlThemeChanged(String, String)

Called when the control theme changes.

Declaration

public void OnControlThemeChanged(string oldTheme, string newTheme)

Parameters

Type	Name	Description
System.String	oldTheme	The old theme.
System.String	newTheme	The new theme.

OnHandlerChanged()

Called when the handler changes.

Declaration

protected override void OnHandlerChanged()

Overrides

SfView.OnHandlerChanged()

Events

ColorChanged

Occurs when the selected color has changed.

Declaration

public event EventHandler<ColorChangedEventArgs> ColorChanged

Event Type

Type
System.EventHandler<ColorChangedEventArgs>

ColorChanging

Occurs when the selected color is in the process of changing.

Declaration

public event EventHandler<ColorChangingEventArgs> ColorChanging

Event Type

Type
System.EventHandler<ColorChangingEventArgs>

ColorSelected

Occurs when the selected color button is tapped.

Declaration

public event EventHandler<ColorSelectedEventArgs> ColorSelected

Event Type

Type
System.EventHandler<ColorSelectedEventArgs>

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement