Main Pallette Populate

[Ez]

Is there a way to populate the main pallete with a list of shades corresponding to the header pallete without verbosely defining each color?
I have used another 3rd party color picker where the programmer elects the "header colors" and the main pallete is populted accordingly.

Is there anything similar to this in the telerik color picker?

Thanks,
Ez

[Bobi]

Hello Ez,

You can achieve this in several ways:

1. Using the OfficeColorPalette class. This means that if you want to define an Office kind of palette i.e. with exactly 10 header items and based on them, the main palette is generated automatically.
(Note: If you want to have office-like main palette please set   this.colorPicker.MainPaletteOrientation = Orientation.Vertical otherwise the items will be arranged horizontally!)

Example:

public Page2()
        {
            InitializeComponent();
           this.colorPicker.MainPaletteOrientation = Orientation.Vertical;
           this.colorPicker.HeaderPaletteItemsSource = GetColors();
            this.colorPicker.MainPaletteItemsSource =    OfficeColorPalette.GetPaletteFromBaseColors(GetColors());
      }

//this method generates the base 10 header colors.
private List<Color> GetBaseColors()
        {
            List<Color> colors = new List<Color>();
            colors.Add(Colors.White);
            colors.Add(Colors.Red);
            colors.Add(Colors.Green);
            colors.Add(Colors.Red);
            colors.Add(Colors.Blue);
            colors.Add(Colors.Yellow);
            colors.Add(Colors.Purple);
            colors.Add(Colors.Magenta);
            colors.Add(Colors.LightGray);
            colors.Add(Colors.Orange);

            return colors;
        }

2. The second option is to directly inherit OfficeColorPalette :

public  class MyPalette : OfficeColorPalette
    {

        public override IEnumerable<Color> GetColors()
        {
            List<Color> colors = new List<Color>();
            colors.AddRange(this.GetHeaderColors());
            colors.AddRange(this.GetGeneratedColors());
            return colors;
        }


        public override IEnumerable<Color> GetHeaderColors()
        {
            List<Color> colors = new List<Color>();
            colors.Add(Colors.White);
            colors.Add(Colors.Black);
            colors.Add(HexStringToColor("#FFC9C2D1"));
            colors.Add(HexStringToColor("#FF69676D"));
            colors.Add(HexStringToColor("#FFCEB966"));
            colors.Add(HexStringToColor("#FF9CB084"));
            colors.Add(HexStringToColor("#FF6BB1C9"));
            colors.Add(HexStringToColor("#FF6585CF"));
            colors.Add(HexStringToColor("#FF7E6BC9"));
            colors.Add(HexStringToColor("#FFA379BB"));
            return colors;
        }

        public override IEnumerable<Color> GetGeneratedColors()
        {
            return GetPaletteFromBaseColors(this.GetHeaderColors());
        }
    }

And after that just add something like:

public Page2()
        {
            InitializeComponent();
            MyPalette palette = new MyPalette();
            this.colorPicker.MainPaletteOrientation = Orientation.Vertical;
            this.colorPicker.HeaderPaletteItemsSource = palette.GetHeaderColors();
            this.colorPicker.MainPaletteItemsSource = palette.GetGeneratedColors();
       }

Let me know if this solves your issue.

All the best,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ez]

Thank you very much for your help,

This solves my issue - part of the way.

What do I do if I want more or less than 10 colors in the pallete.

At the moment, If I enter say 6 colors into the header pallete - I then set the MainPalleteColumnsCount to 6, and then generate the mainPallete - the colors are correct, but the color choices of the Main Pallete stretch across the palette's width (they are no longer little squares, but are rather long rectangles).

My Standard Pallete is set to 10 colors. Is this a bug in the color picker? Is there a way to fix it?

Thanks again,
Ez

[Miroslav]

Hi Ez,

Unfortunately, this is seems to be a bug in the ColorPicker ControlTemplate. If this is a blocking issue for you, we can send you the updated Style once it is ready. We have logged this as a bug and will be fixing it in a coming release (possibly SP or Internal Build)

Your Telerik points have been updated for your feedback.

All the best,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.