HighlightColorPicker picker layout not consistent

[Nick]

Hi, when the palette is populated with a large number of colours it seems every 7th colour (vertically) has a larger gap below it. This produces a messy looking palette.

This applies to our HighlightColorPicker controls but the regular ColorPicker controls in the Table border and background dialogs are fine.

We are only setting a few things as below. Are there some defaults that I am missing which might help? I've tried looking at the objects in debug mode but can't see anything obvious. I've tried adjusting the data template, but it seems this only impacts the item inside each square (i.e. setting margin will produce a space between the containing square and the colour rectangle).

We are running on 2013.2 so let me know if we should update to fix this. Thanks.

Code (table controls):
colorSelector.AutomaticColor = Colors.Transparent;
colorSelector.ColorPropertyPath = "CustomColor";
colorSelector.HeaderPaletteVisibility = Visibility.Collapsed;
colorSelector.StandardPaletteVisibility = Visibility.Collapsed;
colorSelector.NoColorVisibility = Visibility.Collapsed; 
colorSelector.MainPaletteHeaderText = "My Colours";
colorSelector.PaletteItemsTemplate = this.ColorPickerDataTemplate;

XAML (HighlightColorPicker):

<ColorPickers:HighlightColorPicker Name="fontColorPicker"
                                                  ColorPropertyPath="CustomColor"
                                                  HeaderPaletteVisibility="Collapsed"
                                                  StandardPaletteVisibility="Collapsed"
                                                  MainPaletteHeaderText="My Colours"
                                                  NoColorVisibility="Collapsed"
                                                  PaletteItemsTemplate="{StaticResource ColorPickerTemplate}"
                                                  Image="/Telerik.Windows.Controls.RichTextBoxUI;component/Images/MSOffice/16/FontForeColor.png"
                                                  telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding Path=ChangeFontForeColorCommand}"
                                                  />

[Todor]

Hi Nick,

Thank you for writing to us.

I've tried to reproduce the issue, but to no avail. I've attached a screenshot demonstrating what is displayed on our side using your XAML code.

I noticed that you set the PaletteItemsTemplate as well. This is why I wanted to ask you if you can provide us with the  'ColorPickerTemplate' as well for further investigation?

Looking forward to your reply.

Regards,
Todor
Telerik

[Nick]

Hi Todor,

It's basically just a copy of the example on your site for adding the Tooltip, so I don't think it's that.

<UserControl.Resources>
    <DataTemplate x:Name="ColorPickerTemplate" x:Key="ColorPickerTemplate">
      <Rectangle ToolTipService.ToolTip="{Binding ColourName}">
        <Rectangle.Fill>
          <SolidColorBrush Color="{Binding CustomColor}" />
        </Rectangle.Fill>
      </Rectangle>
    </DataTemplate>
  </UserControl.Resources>

I will look into it more on our side. We are using 2013.2 which is older but I can't see any notes around this control being updated in 2013.3. 

[Petar Mladenov]

Hi Nick,

This appears to be a bug in the RadColorPicker (HighlightColorPicker inherits from RadColorPicker) and we managed to reproduce it. We logged it here and we also updated your telerik account points. As a workaround, could you please try to set:

MainPaletteColumnsCount="10"
                          MainPaletteOrientation="Horizontal"

We hope this can help in your scenario.

Regards,
Petar Mladenov
Telerik

[Nick]

Thanks Petar, that workaround fixes the issue.