Modify the size of ColorPicker palette

Question

Due to some GUI size constraints, I would like to modify the size of the Color Palette of the XCeed ColorPicker. The width of the button is smaller than the dropdown popup; I just want to change the width of the popup (or the height) to impose a layout of the available standard colors. By default we have 10 columns of colors, I would like to have 6 or 8 columns of colors. Is there any mean to do that?

Answer 1

In the default template for the ColorPicker, you will notice a ListBox with the name "PART_AvailableColors". That ListBox uses a Style called "ColorListStyle". In that Style, we set the ItemsPanel property to be a WrapPanel with a width of 200.

<Style x:Key="ColorListStyle" TargetType="ListBox">
    <!-- ... --->
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <WrapPanel Width="200" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <!-- ... --->
</Style>

Unfortunately, there is currently no built-in way to easily change the layout of the ColorPicker, so for now the only option I can offer is to redo the Template/Style in your code to set a different width on the WrapPanel.

The default Templates and Styles can be found in the source code that comes with the Toolkit.

Edit: the property MaxDropDownWidth was added on the ColorPicker to customize the width of the popup (new in version 3.1).