RadColorSelector with RadRibbonDropDownButton

3 posts, 0 answers
  1. John Hodgson
    John Hodgson avatar
    8 posts
    Member since:
    Sep 2009

    Posted 02 Jun 2011 Link to this post

    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?
  2. John Hodgson
    John Hodgson avatar
    8 posts
    Member since:
    Sep 2009

    Posted 06 Jun 2011 Link to this post

    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();
            }
        }
  3. UI for WPF is Visual Studio 2017 Ready
  4. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 07 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top