Customization of Color Palette in WinUI DropDown Color Palette

18 Nov 20188 minutes to read

This section describes how to customize the Color Palette in WinUI DropDown Color Palette control.

Customizing control in the dropdown

You can customize the control displayed in the dropdown of DropDown Color Palette by using AttachedFlyout and DropDownFlyout properties.

You can refer to the Color Palette documentation page to know more about all customization available in the Color Palette control.

The following properties of the SfColorPalette and its palette models are used in the example below:

  • ShowMoreColorsButton - Shows or hides the More Colors button at the bottom of the SfColorPalette.
  • ShowColors - Shows or hides the colors in a palette.
  • ShowColorShades - Shows or hides the color shades for each color in a palette.
  • Header - Sets the header text of a palette.
<editors:SfDropDownColorPalette Name="sfDropDownColorPalette">
    <FlyoutBase.AttachedFlyout>
        <editors:DropDownFlyout>
            <editors:SfColorPalette ShowMoreColorsButton="False" Width="250" >
                <editors:SfColorPalette.PaletteColors>
                    <editors:ColorPaletteModel ShowColors="True" 
                                               ShowColorShades="True"
                                               Header="Custom Theme Colors" >
                        <editors:ColorPaletteModel.Colors>
                            <editors:ColorCollection>
                                <editors:ColorModel Color="#FF11EBF8" Tooltip="Custom Aqua" />
                                <editors:ColorModel Color="#FFF80FA6" Tooltip="Custom Deep Pink" />
                                <editors:ColorModel Color="#FF8BA7C2" Tooltip="Custom Dark Gray" />
                                <editors:ColorModel Color="#F53CDF07" Tooltip="Custom Lime Green" />
                                <editors:ColorModel Color="#C2929545" Tooltip="Custom Olive Drab" />
                                <editors:ColorModel Color="#2E956145" Tooltip="Custom Sienna" />
                                <editors:ColorModel Color="#78458E95" Tooltip="Custom Steel Blue" />
                                <editors:ColorModel Color="#8B8220E4" Tooltip="Custom Blue Violet" />
                                <editors:ColorModel Color="#FF352722" Tooltip="Custom Dark Slate Gray" />
                                <editors:ColorModel Color="#FF318B86" Tooltip="Custom Sea Green" />
                            </editors:ColorCollection>
                        </editors:ColorPaletteModel.Colors>
                    </editors:ColorPaletteModel>
                </editors:SfColorPalette.PaletteColors>

                <editors:SfColorPalette.StandardColors>
                    <editors:StandardPaletteModel ShowColors="True" 
                                                   ShowColorShades="True"
                                                   Header="Custom Standard Colors" >
                        <editors:StandardPaletteModel.Colors>
                            <editors:ColorCollection>
                                <editors:ColorModel Color="Blue" Tooltip="Custom Blue" />
                                <editors:ColorModel Color="Orchid" Tooltip="Custom Orchid" />
                                <editors:ColorModel Color="Gray" Tooltip="Custom Gray" />
                                <editors:ColorModel Color="Gold" Tooltip="Custom Gold" />
                                <editors:ColorModel Color="SandyBrown" Tooltip="Custom SandyBrown" />
                                <editors:ColorModel Color="Pink" Tooltip="Custom Pink" />
                                <editors:ColorModel Color="Violet" Tooltip="Custom Violet" />
                                <editors:ColorModel Color="Yellow" Tooltip="Custom Yellow" />
                                <editors:ColorModel Color="Orange" Tooltip="Custom Orange" />
                                <editors:ColorModel Color="Red" Tooltip="Custom Red" />
                            </editors:ColorCollection>
                        </editors:StandardPaletteModel.Colors>
                    </editors:StandardPaletteModel>
                </editors:SfColorPalette.StandardColors>
            </editors:SfColorPalette>
        </editors:DropDownFlyout>
    </FlyoutBase.AttachedFlyout>
</editors:SfDropDownColorPalette>

Color palette embedded inside the dropdown color palette

Download demo application from GitHub