The borders around the color visuals (RadColorPaletteViewItem) in the palette view are shown at the wrong visuals when the MainPaletteItemsSource and MainPaletteColumnsCount properties are changed at runtime.

To work this around, re-adjust the PositionState values of the RadColorPaletteViewItems. For example:

private void ChangePalette()
{
	this.colorSelector.MainPaletteItemsSource = MyGetSourceMethod();
	this.colorSelector.MainPaletteColumnsCount = 10;	
	UpdatePaletteItems();
}

private void UpdatePaletteItems()
{
	var mainPalette = colorSelector.ChildrenOfType<RadColorPaletteView>().First(x => x.Name == "MainPalette");
	var paletteItems = mainPalette.ChildrenOfType<RadColorPaletteViewItem>();
	var paletteItemsCount = paletteItems.Count();
	var columnsCount = mainPalette.PaletteColumnsCount;
	var orientation = mainPalette.PaletteOrientation;

	for (int i = 0; i < paletteItemsCount; i++)
	{
		var paletteItem = paletteItems.ElementAt(i);

		if ((columnsCount == paletteItemsCount) || (paletteItemsCount / columnsCount == 0))
		{
			paletteItem.PositionState = PositionState.Single;
			return;
		}

		if (orientation == Orientation.Horizontal)
		{
			if (i < columnsCount)
			{
				paletteItem.PositionState = PositionState.Top;
			}
			else if (i > (paletteItemsCount - columnsCount - 1))
			{
				paletteItem.PositionState = PositionState.Bottom;
			}
			else
			{
				paletteItem.PositionState = PositionState.Middle;
			}
		}
		else
		{
			if (i % (paletteItemsCount / columnsCount) == 0)
			{
				paletteItem.PositionState = PositionState.Top;
			}
			else if (((i + 1) % (paletteItemsCount / columnsCount)) == 0)
			{
				paletteItem.PositionState = PositionState.Bottom;
			}
			else
			{
				paletteItem.PositionState = PositionState.Middle;
			}
		}
	}
}

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.

A NullReferenceException is thrown when the drop down part of the ColorPicker control is opened initially. For example, this can happen if the IsDropDownOpen property is set to True in XAML. 

This bug is actually related to the RadSplitButton used inside the ControlTemplate of the ColorPicker. It is reproducible also if you use RadSplitButton only. 

The issue reproduces with the Office2016 and Office2019 themes, but probably appears also in other themes (Green and later). The error is gone if you use an older theme like the default Office_Black.

To work this around, set the IsDropDownOpen property of the RadColorPicker in its Loaded event handler.

private void RadColorPicker_Loaded(object sender, RoutedEventArgs e)
{
	var picker = (RadColorPicker)sender;
	picker.IsDropDownOpen = true;
}

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.

Available in LIB version: 2015.2.713

Setting the RadColorPicker's / RadColorSelector's PaletteItemsTemplate has no effect in RecentColorsPaletteView. This is the section which appears when the RecentColors funtionality in the ColorPicker is active.

Available in LIB version: 2015.1.0309

Add a text field to the Color Picker so be displayed alongside the A.

REASON FOR DECLINATION:
This Feature Request is declined because the requirement can be easily achieved with the current implementation of the control. You can follow the steps described in this article:
http://docs.telerik.com/devtools/wpf/controls/radcolorpicker/howto/how-to-set-custom-content.html

A design time error occurs when the control have a custom style based on the default RadColorPickerStyle. This is reproducible only if the project references NoXaml assemblies and it uses the resource dictionaries with the themes locally (the files are copied in the project and then merged in the Resources).

The error is the following:
'This feature requires service 'Microsoft.Windows.Design.Services.ValueTranslationService' to be present, but it could not be located.	'

As a workaround you can merge the resources directly from the .dll file of the theme as demonstrated in the Setting a Theme help article.
http://www.telerik.com/help/wpf/styling-apperance-implicit-styles-overview.html

Available in LIB version: 2015.1.0604

Set SelectedColor = Red in XAML or code behind or via databinding. Open the color Picker - the red color in Standard Colors is NOT selected but it should be.

A possible workaround could be:

   <Style TargetType="telerik:RadColorPaletteView">
         <Setter Property="SelectedItem" Value="{Binding MediaColor, Mode=OneWay, RelativeSource={RelativeSource AncestorType=telerik:RadColorSelector}}" />
   </Style>


Available in LIB version: 2014.3.1208

RecentColors functionality doesn't work when you set RecentColorsItemsSource. The recent colors are not shown at all but they should be.

When using this property the user should be able to customize the recent colors functionality on his own. Showing the recent colors is a must when setting non-empty colletion via RecentColorsItemSource.

Implicit styles are set via refering included XAML files. Set Style targetting RadColorPicker and BasedOn RadColorPickerStyle. Set this stye in App.xaml after the resource dictionaries. In desinger - MS exception is thrown "This feature requires Microsoft.Windows.Design.Sevices.valueTranslationService".

Note that this is only reproducible when xaml fiels are included in the project. This is NOT reproducible when you reference xaml files from the style dll (for example Telerik.Windows.Themes.Office_Black).

The fix will be available in our official release Q2 2015 SP.

You can't customize ButtonPart ot TogglePart of SplitButton in ColorPicker as SplitButtonStyle doesn't get applied with this property.

If you bind the SelectedIndex or the SelectedItem properties to your ViewModel and change them from code, the UI will not be updated. This is both reproducible in ColorPicker, ColorSelector and ColorPaletteView. 

The issue is fixed in Q2 2014 Release.

Setting MainPaletteItemsSource to collection of > 20 Colors creates additional borders between the PaletteViewItems.
The Workaround is to set MainPaletteOrientation = Horizontal and MainPaletteColumnsCount = 10.

The XAML team has recently reviewed this issue and will not be addressing it as at this time the team is focusing on the bugs impacting the highest number of developers. If you have encountered this issue and it is blocking for your work please contact us through the support ticketing system with details on your setup and a reference to this item.

If you bind the SelectedIndex or the SelectedItem properties to your ViewModel and change them from code, the UI will not be updated.
This is both reproducible in ColorPicker, ColorSelector and ColorPaletteView.

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