Change Content/Text/Icon of (DropDown) Button

Jul 29, 2010 at 9:35 AM
Edited Jul 29, 2010 at 9:37 AM

Hi.

I know we've had this discussion and I'm sorry for that, but I can't get it working.

 

I'd like to create a FontColor DropDownButton (like the one here on CodePlex for the RichTextBox), where you have that "A" and a colored rectangle with the current color.

 

I got it working so far with this:

 

 <Fluent:DropDownButton SizeDefinition="Small">
                            <Fluent:DropDownButton.ToolTip>
                                <Fluent:ScreenTip Title="Font Color" Text="Change the text color."/>
                            </Fluent:DropDownButton.ToolTip>
                             <Fluent:DropDownButton.Template>
                                <ControlTemplate>
                                    <StackPanel>
                                        <Label Content="A" FontFamily="Times New Roman" FontSize="11"/>
                                        <Polygon   Points="0,0 0,15 15,15 15,0"  Stroke="{Binding Fill}" StrokeThickness="5">
                                            Stretch="Fill"
                                        </Polygon>
                                    </StackPanel>
                                </ControlTemplate>
                            </Fluent:DropDownButton.Template>
                            <ColorSelectorModule:ColorGallery/>
                        </Fluent:DropDownButton>

However, this overrides the Fluent-Button-Style, with them nice Appearances/Behaviours on MouseOver, Click etc.
Then I saw DaVincis answer on this thread: http://fluent.codeplex.com/Thread/View.aspx?ThreadId=212981
But I apparently do sth wrong:

 
<Fluent:DropDownButton SizeDefinition="Small">
                            <Fluent:DropDownButton.ToolTip>
                                <Fluent:ScreenTip Title="Font Color" Text="Change the text color."/>
                            </Fluent:DropDownButton.ToolTip>
                            <Fluent:DropDownButton.Style>
                                <Style TargetType="{x:Type Fluent:DropDownButton}" >
                                    <Setter Property="Icon">
                                    <Setter.Value>
                                            <DrawingImage>
                                                <DrawingImage.Drawing>
                                                    <GeometryDrawing Brush="{Binding Fill}">
                                                        <GeometryDrawing.Geometry>
                                                            <GeometryGroup>
                                                                <RectangleGeometry Rect="0,0,32,32"/>
                                                            </GeometryGroup>
                                                            </GeometryDrawing.Geometry>
                                                    </GeometryDrawing>
                                                </DrawingImage.Drawing>
                                            </DrawingImage> 
                                   </Setter.Value>
                                   </Setter>
                                </Style>
                            </Fluent:DropDownButton.Style>
                            <ColorSelectorModule:ColorGallery/>
                        </Fluent:DropDownButton>

Since I can't see anything, when I try it that way (no button, no hover, no reaction on clicking).
At first I hoped I could simply add my StackPanel from the first code example in there, but apparently you can't add Framework Elements to the Icon Property.
So could somebody please show me how to make this work? Also, how would I add a Label or some sort of text to the DrawingImage so I can get the "A" displayed?
Aug 4, 2010 at 11:31 AM
Edited Aug 4, 2010 at 11:42 AM
Ok, I got it working with DaVincis code snippet from the link posted above:
         <Fluent:DropDownButton SizeDefinition="Small">
                            <Fluent:DropDownButton.ToolTip>
                                <Fluent:ScreenTip Title="Font Color" Text="Change the text color."/>
                            </Fluent:DropDownButton.ToolTip>
                            <Fluent:DropDownButton.Icon>
                                <DrawingImage>
                                    <DrawingImage.Drawing>
                                        <DrawingGroup>
                                            <GeometryDrawing Brush="Black" Geometry="{ViewModels:TextGeometryExtension Text=A}" />
                                            <GeometryDrawing Brush="{Binding Fill}">
                                                <GeometryDrawing.Geometry>
                                                    <RectangleGeometry Rect="0,70,90,25"/>
                                                </GeometryDrawing.Geometry>
                                            </GeometryDrawing>
                                        </DrawingGroup>
                                    </DrawingImage.Drawing>
                                </DrawingImage>
                            </Fluent:DropDownButton.Icon>                          
                            <ColorSelectorModule:ColorGallery/>
                        </Fluent:DropDownButton>

I created a MarkupExtension named TextGeometryExtension so I can create textgeometries:


    public class TextGeometryExtension : MarkupExtension
    {
        public string Text { get; set; }

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return new FormattedText(
                Text,
                CultureInfo.CurrentCulture,
                FlowDirection.LeftToRight,
                new Typeface("Times New Roman"),
                70,
                Brushes.Black).BuildGeometry(new Point(20, 0)); ;
        }
    }


Sry for the formatting, how do you format code in here, when you reply to a thread or edit a post???