
John Hodgson
Top achievements
Rank 2
John Hodgson
asked on 02 Jun 2011, 03:30 PM
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?
Is this possible?
2 Answers, 1 is accepted
0

John Hodgson
Top achievements
Rank 2
answered on 06 Jun 2011, 09:42 AM
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
Secondly, the Converter:
<
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();
}
}
0
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:
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
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
>
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