RadColorSelector with RadRibbonDropDownButton

[John Hodgson]

I have found the example where you can add the RadColorSelector to the DropDownContent of the RadRibbonDropDownButton. I would like to be able to display the selected colour in the DropDownButton.

Is this possible?

[John Hodgson]

Ok, I have figured out a way to do this using a Converter.  Firstly, the XAML code to specify the Color Selector inside a DropDown

<telerik:RadRibbonDropDownButton Text="Fill Color" DropDownButtonPosition="Bottom" Size="Large" SmallImage="{Binding ElementName=Color1, Path=SelectedColor, Converter={StaticResource selectedColorConverter}, ConverterParameter=16}" LargeImage="{Binding ElementName=Color1, Path=SelectedColor, Converter={StaticResource selectedColorConverter}}" CollapseToMedium="WhenGroupIsMedium" CollapseToSmall="WhenGroupIsSmall"  >
                            <telerik:RadRibbonDropDownButton.DropDownContent>
                                <StackPanel>
                                    <telerik:RadColorSelector x:Name="Color1" BorderThickness="0" Padding="0" />
                                </StackPanel>
                            </telerik:RadRibbonDropDownButton.DropDownContent>
                        </telerik:RadRibbonDropDownButton>

Secondly, the Converter:

public class selectedColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            int Width = 32;
            int Height = 32;
            Color newcolor = (Color)value;

            if (parameter != null && System.Convert.ToInt32(parameter.ToString()) == 16)
            {
                Width = 16;
                Height = 16;
            }

            DrawingVisual dv = new DrawingVisual();
            using (DrawingContext ctx = dv.RenderOpen())
            {
                SolidColorBrush vb = new SolidColorBrush(newcolor);
                Pen pen = new Pen(new SolidColorBrush(Colors.Black), 1.0f);

                //Add a margin for 32 x 32 so it looks less imposing.
                Rect rect = new Rect(new Point(4, 4), new Size(24, 24));
                if (parameter != null && System.Convert.ToInt32(parameter.ToString()) == 16)
                {
                    //For some reason 16 x 16 was chopping off the edge, probably to do with rounding.
                    rect = new Rect(new Point(1, 1), new Size(14, 14));
                }

                //Prevent Blurred border
                double halfPenWidth = pen.Thickness / 2;
                GuidelineSet guidelines = new GuidelineSet();
                guidelines.GuidelinesX.Add(rect.Left + halfPenWidth);
                guidelines.GuidelinesX.Add(rect.Right + halfPenWidth);
                guidelines.GuidelinesY.Add(rect.Top + halfPenWidth);
                guidelines.GuidelinesY.Add(rect.Bottom + halfPenWidth);

                ctx.PushGuidelineSet(guidelines);
                ctx.DrawRectangle(vb, pen, rect);
                ctx.Pop();
            }

            RenderTargetBitmap rtb = new RenderTargetBitmap(Width, Height, 96, 96, PixelFormats.Pbgra32);
            rtb.Render(dv);
            return rtb;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new System.NotImplementedException();
        }
    }

[Zarko]

Hi John Hodgson,
Your solution works but I think I can give you a easier one - you can put a Rectangle in the Content of the RadRibbonDropDownButton and directly bind its Fill property to the SelectedColor property of the RadColorSelctor with the telerik ColorToBrushConverter like this:

<Grid>
    <Grid.Resources>
        <telerik:ColorToBrushConverter x:Key="myConverter" />
    </Grid.Resources>

    <telerik:RadRibbonDropDownButton Width="200"
                                         CollapseToMedium="WhenGroupIsMedium"
                                         CollapseToSmall="WhenGroupIsSmall"
                                         DropDownButtonPosition="Bottom"
                                         Size="Large">
        <telerik:RadRibbonDropDownButton.Content>
            <StackPanel>
                <Border Width="32"
                            Height="32"
                            BorderBrush="Black"
                            BorderThickness="1">
                    <Rectangle Fill="{Binding ElementName=Color1, Path=SelectedColor, Converter={StaticResource myConverter}}" />
                </Border>
                <TextBlock>Fill Color</TextBlock>
            </StackPanel>
        </telerik:RadRibbonDropDownButton.Content>
        <telerik:RadRibbonDropDownButton.DropDownContent>
            <StackPanel>
                <telerik:RadColorSelector x:Name="Color1"
                                              BorderThickness="0"
                                              Padding="0" />
            </StackPanel>
        </telerik:RadRibbonDropDownButton.DropDownContent>
    </telerik:RadRibbonDropDownButton>
</Grid>

For further references could you please examine the sample attached project and if you have more questions feel free to ask. 

Kind regards,
Zarko
the Telerik team