Subject

A RadColorSelector placed in a RadTabControl as content of an RadDropDown button flickers on first opening and shows a wrong arrangement of the color palette for a moment. Custom colors are data bound.

Attached Files

The attached files contain a demo application, which is a minimal sample to reproduce the problem. Due to the file upload size limitation, the referenced Telerik DLLs for the sample project are not contained.

There are short clips that show the correct behavior when there is no RadTabControl and the faulty behavior with it.

Description

Exemplary Scenario

There is an application containing two drop-down buttons, with the following structure:

• RadDropDownButton 1
  • RadColorSelector
• RadDropDownButton 2
  • RadTabControl
    • RadTabItem
      • RadColorSelector

The colors for the RadColorSelector are generated in code and data bound. The first drop-down is for comparison and does not show the faulty behavior.

Steps to Reproduce

• Open the application.
• Click drop-down button 2.

The issue is only reproducible on the first opening of the drop-down.

Result

The color selector flickers for a noticeable short time between two arrangements of the color palette. First, it seems that all colors are placed below one another and continue in the second column of the palette when there is an overflow in vertical space. Then, the layout changes and the palette is displayed as intended. Sometimes instead of vertical misalignment, the colors are aligned correctly, but seem to pop-up one after another quickly.

Expectation

The color selector displays the color palette correctly arranged each time the drop-down is opened. There is no flicker and no misarrangement in between.

Issue Characteristics

• The issue is reliably reproducible most of the time, but not always. It occurs both in debug and release mode. If it does not show, try to increase or decrease the ColorPerColumnCount property (15 to 30 always worked for us).
• The behavior can be reproduced with e.g a value of 21, then after multiple tries it may disappear and changing the number makes it appear again, even the same number on multiple tries in the demo application. In our product it is permanently reproducible.
• Without the RadTabControl in the drop-down content, the issue does not appear.

Currently, you can select a color in the RadColorSelector element only with a mouse click. Add a support to navigate and select items via the arrow keys.

Original title: "RadColorPicker should have a built in custom colour selector"

I'm aware that I can add a custom colour selector to the RadColorPicker myself and an example is given in the Telerik WPF demos, but rather than having to implement this myself, I'd really expect this to be built in so I could just set a ShowCustomColors="True" flag and it'd be done. Other UI control vendors I have worked with have supported this functionality without making me do so much work.

This feature should include:

   1. When focused, pressing down arrow key should open the picker, like in WORD's color picker

   2. Automatic button should go into keyboard focused state when down arrow is pressed and the focus is in the split button.

   3.Arrow keys should move the focus to colors in the pallete views. Space/Enter should select the current color.

Feature is mixture of Keyboard logic, new Focus states in PalleteViewItems, PalleteView, ColorSelector, ColorPicker.

Like in Ribbon (when keyboard navigation was implemented) some controls might need additional keyboard focused states.

Cannot edit a copy of the ColorPicker Style in Blend. Also, cannot edit the Additional ColorButtonStyle.

As a workaround use an implicit style approach. You can have folder with your XAML files and edit the Style of RadColorPicker in them.
http://docs.telerik.com/devtools/wpf/styling-and-appearance/styling-apperance-implicit-styles-overview