Syncfusion AI Assistant

How can I help you?

Display View Customization

17 Apr 20266 minutes to read

Selected color customization

Selected color icon

You can customize the selected color icon in the Color Picker using the SelectedColorIcon property.

<inputs:SfColorPicker x:Name="colorPicker">
    <inputs:SfColorPicker.SelectedColorIcon>
        <FontImageSource FontFamily="MauiMaterialAssets" Glyph="&#xe760;" Color="{Binding Source={x:Reference colorPicker},Path=SelectedColor}"/>
    </inputs:SfColorPicker.SelectedColorIcon>
</inputs:SfColorPicker>
var fontIcon = new FontImageSource
{
    FontFamily = "MauiMaterialAssets",
    Glyph = "\ue760", 
    Color = colorPicker.SelectedColor 
};

colorPicker.SelectedColorIcon = fontIcon;

colorPicker.ColorChanged += (s, e) =>
{
    fontIcon.Color = e.NewColor;
};

SelectedColorIcon

Selected color icon size

You can customize the size of the selected color icon displayed in the Color Picker using the SelectedColorIconSize property.

<syncfusion:SfColorPicker SelectedColorIconSize="32" />
SfColorPicker colorPicker = new SfColorPicker()
{
    SelectedColorIconSize = 32
};

Selected color template

To customize the appearance of the selected color, use the SelectedColorTemplate property to define a custom template.

<inputs:SfColorPicker x:Name="colorPicker">
    <inputs:SfColorPicker.SelectedColorTemplate>
        <DataTemplate>
            <VerticalStackLayout WidthRequest="70" Background="White">
                <Label Text="A" HorizontalOptions="Center" TextColor="Black"/>
                <BoxView HeightRequest="5" WidthRequest="30" Background="{Binding Source={x:Reference colorPicker},Path=SelectedColor}" />
            </VerticalStackLayout>
        </DataTemplate>
    </inputs:SfColorPicker.SelectedColorTemplate>
</inputs:SfColorPicker>
colorPicker.SelectedColorTemplate = new DataTemplate(() =>
{
    var label = new Label
    {
        Text = "A",
        HorizontalOptions = LayoutOptions.Center,
        TextColor = Colors.Black
    };

    // Create the box view and bind its Background to colorPicker.SelectedColor
    var boxView = new BoxView
    {
        HeightRequest = 5,
        WidthRequest = 30
    };

    boxView.SetBinding(BoxView.BackgroundProperty, new Binding
    {
        Source = colorPicker,
        Path = "SelectedColor",
        Mode = BindingMode.OneWay
    });

    // Create the layout
    var stackLayout = new VerticalStackLayout
    {
        WidthRequest = 70,
        BackgroundColor = Colors.White,
        Children = { label, boxView }
    };

    return stackLayout;
});

Content = colorPicker;

SelectedColorTemplate

The drop-down icon of the Color Picker can be customized using the DropDownButtonTemplate property.

<inputs:SfColorPicker x:Name="colorPicker">
    <inputs:SfColorPicker.DropDownButtonTemplate>
        <DataTemplate>
            <Label Text="&#xe705;" FontFamily="MauiMaterialAssets" FontSize="14" TextColor="Black" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" />
        </DataTemplate>
    </inputs:SfColorPicker.DropDownButtonTemplate>
</inputs:SfColorPicker>
var dropDownTemplate = new DataTemplate(() =>
{
    return new Label
    {
        Text = "\ue705", 
        FontFamily = "MauiMaterialAssets",
        TextColor = Colors.Black,
        FontSize = 14,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center
    };
});

SfColorPicker colorPicker = new SfColorPicker
{
    DropDownButtonTemplate = dropDownTemplate
};

Content = colorPicker;

DropDownButtonTemplate

DisplayViewHeight

You can control the height of the display view shown in the Color Picker using the DisplayViewHeight property.

<syncfusion:SfColorPicker DisplayViewHeight="48" />
SfColorPicker colorPicker = new SfColorPicker()
{
    DisplayViewHeight = 48
};

DisplayViewStroke

You can customize the border color of the display view in the Color Picker using the DisplayViewStroke property.

<syncfusion:SfColorPicker DisplayViewStroke="Red" />
SfColorPicker colorPicker = new SfColorPicker()
{
    DisplayViewStroke = Colors.Red
};

DisplayViewStrokeThickness

You can define the thickness of the display view border using the DisplayViewStrokeThickness property.

<syncfusion:SfColorPicker DisplayViewStrokeThickness="3" />
SfColorPicker colorPicker = new SfColorPicker()
{
    DisplayViewStrokeThickness = 3
};

You can set the width of the drop-down button displayed in the Color Picker using the DropDownWidth property.

<syncfusion:SfColorPicker DropDownWidth="48" />
SfColorPicker colorPicker = new SfColorPicker()
{
    DropDownWidth = 48
};