Search code examples
c#wpfribbon

Text Cut off in WPF Ribbon Control


I've started playing around with the Microsoft Ribbon control and I ran into an issue with the RibbonButton when there is more than 1 line of text for the label

The code I have for the ribbon is as so:

<Ribbon x:Name="ribMainRibbon" SelectionChanged="ribMainRibbon_SelectionChanged" DockPanel.Dock="Top">
    <Ribbon.QuickAccessToolBar>
        <RibbonQuickAccessToolBar x:Name="ribQuickAccessToolBar">
            <RibbonButton SmallImageSource="/Media/Icons/New.png"/>
            <RibbonButton SmallImageSource="/Media/Icons/Open.png"/>
            <RibbonButton SmallImageSource="/Media/Icons/Save.png"/>
            <RibbonButton SmallImageSource="/Media/Icons/Print.png"/>
        </RibbonQuickAccessToolBar>
    </Ribbon.QuickAccessToolBar>
    <Ribbon.ApplicationMenu>
        <RibbonApplicationMenu Visibility="Collapsed">
        </RibbonApplicationMenu>
    </Ribbon.ApplicationMenu>
    <RibbonTab Header="{DynamicResource MenuDesignOptions}">
        <RibbonGroup>
            <RibbonMenuButton LargeImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Label="{DynamicResource MenuAutoCalc}" x:Name="rmbAutoCalc">
                <RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder2.png" Header="{DynamicResource MenuAutoCalc}" x:Name="rmiAutoCalc" Click="rmiAutoCalc_Click"/>
                <RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Header="{DynamicResource MenuManualCalc}" x:Name="rmiManualCalc" Click="rmiManualCalc_Click"/>
            </RibbonMenuButton>
            <RibbonMenuButton LargeImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Label="{DynamicResource MenuEnglish}" x:Name="rmbUnits">
                <RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder2.png" Header="{DynamicResource MenuEnglish}" x:Name="rmiEnglishUnits" Click="rmiEnglishUnits_Click"/>
                <RibbonMenuItem ImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Header="{DynamicResource MenuMetric}" x:Name="rmiMetricUnits" Click="rmiMetricUnits_Click"/>
            </RibbonMenuButton>
            <RibbonButton LargeImageSource="/Media/Icons/ToolBar/PlaceHolder.png" Label="{DynamicResource MenuReverse}" x:Name="rbtReverse" Click="rbtReverse_Click">
            </RibbonButton>
        </RibbonGroup>
    </RibbonTab>

And the relevant string resources:

<s:String x:Key="MenuReverse">Reverse System</s:String>
<s:String x:Key="MenuEnglish">Imperial Units</s:String>
<s:String x:Key="MenuAutoCalc">Auto Calc</s:String>

But when I run this code it ends up looking like this:

enter image description here

So I can fix it by specifying the Height property of the RibbonButton but that seems like the wrong fix for this. And I know you should be able to have 2 line descriptions on those buttons because both MS Word and Excel have them:

enter image description here


Solution

  • Turns out it was one of my global styles I was applying to all StackPanels

    <Style TargetType="StackPanel">
        <Setter Property="Orientation" Value="Vertical"/>
        <Setter Property="Margin" Value="2"/>
    </Style>
    

    This was adding the margin inside of the Ribbon Buttons causing it to be cut off