RibbonButton is wasting too much space, how to change it?

Dec 23, 2009 at 4:53 PM

Hi, I've been working with WPF for some weeks, and now I'm having an issue with the ribbon button, because it's wasting a lot of space in the top portion before displaying the text, please look the next image:



Even though I make the button smaller, there's always a fixed wasted space at the top, is there any way to modify the ribbon button in order to make the text appear at the top of the object instead at the button? Is there any way to remove this blank space?

Note: I actually have been able to fix this issue by using templates, but I have had to discard it because if I do it I loos the capability of modifying the object properties during runtime.  I


Dec 29, 2009 at 6:30 PM

Hi, nobody answered me so I have had to figure it by myself. To have the behavior I wanted for the ribbon buttons I ended replacing the button object from scratch using the next code:


<Style x:Key="RibbonStyle" TargetType="{x:Type r:RibbonButton }">

        <Setter Property="BorderBrush" Value="Transparent" />

        <Setter Property="BorderThickness" Value="1" />

        <Setter Property="Template">




                        <Border x:Name="LightBorder" CornerRadius="1" BorderThickness="1" Margin="1,1,0,0" Opacity="1"  Background="Transparent"/>

                        <Border x:Name="Overlay" BorderBrush="#B0042D5B" BorderThickness="1.5,1.5,0,0" Margin="2,2,3,3" CornerRadius="1" Visibility="Collapsed" >


                                <BlurBitmapEffect Radius="9" />



                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                    <GradientStop Color="#10FFFFFF" Offset="0" />

                                    <GradientStop Color="#00FFFFFF" Offset="1" />




                        <Border x:Name="DarkBorder" CornerRadius="1" BorderThickness="1" Margin="0,0,1,1" />

                        <StackPanel Name="stackpanel" Margin="6">                       


                                Background="{TemplateBinding Background}"

                                Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Command.LabelTitle}">                               






                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter TargetName="LightBorder" Property="BorderBrush" Value="{StaticResource Brush_RibbonOverLightBorder}" />

                            <Setter TargetName="LightBorder" Property="Background" Value="{StaticResource Brush_RibbonOverLightBackground}" />

                            <Setter TargetName="DarkBorder" Property="BorderBrush" Value="{StaticResource Brush_RibbonOverDarkBorder}" />








But it was a funny experience at last. The highlighted text I had to add it to allow modifying the background property in hot mode, which wasn’t working after applying this template but it’s working now thanks to that. I hope this can be useful to anyone.