How to set text at the head of a RibbonApplicationMenu

user_210778 0
Viewed 12580

I'm trying to have text in the top level of a RibbonApplicationMenu (trying to the get the word File there similar to Word or Outlook). It seems the Microsoft.Windows.Controls.Ribbon.RibbonApplicationMenu

MSDN

supports a SmallImageSource but no text property. Setting the Label property doesn't work for this problem.

xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"    
<ribbon:RibbonApplicationMenu Label="File"><!--doesn't set the label -->
</ribbon:RibbonApplicationMenu>

The goal is to have the word "File" appear in the circled area below.

RibbonApplicationMenu

ribboncontrolslibrary ribbon-control ribbon wpf
6 Answers

Right. If you want no code-behind and no complex glyph computations, use the following XAML:

<RibbonApplicationMenu.SmallImageSource>
  <DrawingImage>
    <DrawingImage.Drawing>
      <GeometryDrawing>
        <GeometryDrawing.Geometry>
          <RectangleGeometry Rect="0,0,20,20"></RectangleGeometry>
        </GeometryDrawing.Geometry>
        <GeometryDrawing.Brush>
          <VisualBrush Stretch="Uniform">
            <VisualBrush.Visual>
                <TextBlock Text="File" FontSize="16" Foreground="White" />
            </VisualBrush.Visual>
          </VisualBrush>
        </GeometryDrawing.Brush>
      </GeometryDrawing>
    </DrawingImage.Drawing>
  </DrawingImage>
</RibbonApplicationMenu.SmallImageSource>

Advantages of this approach:

  • XAML-only, no code-behind
  • No glyph measurement
  • Easy to change label
user_11371990

The following solution was posted on an MSDN forum. It involves altering the style used in the default (?) theme.

I checked the source code of the Ribbon controls (please download the MicrosoftRibbonForWPFSourceAndSamples from web site). In the theme file (\MicrosoftRibbonForWPFSourceAndSamples\RibbonControlsLibrary\Themes\Generic.xaml) of the ribbon, you could find this style "&#220;" is used to the RibbonApplicationMenu. In this style, there is no element to display the Text, it only has one Image element to display the image.

Fortunately, we could modify the style code and add some controls in the "&#220;" style. Please below code:

line 7264, change the code:

 <!--<Image IsHitTestVisible="False"
    Source="{Binding RelativeSource ={RelativeSource FindAncestor, AncestorType ={x:Type ribbon:RibbonApplicationMenu}},

Path=SmallImageSource}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Height="16" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" />-->

line 7433, add code Label="{TemplateBinding Label}" in the end of the RibbonToggleButton element:

 ......
 <ControlTemplate TargetType="{x:Type ribbon:RibbonApplicationMenu}">
   <Grid Focusable="False"
      x:Name="OuterGrid"
      SnapsToDevicePixels="True">
     <ribbon:RibbonToggleButton x:Name="PART_ToggleButton" 
       BorderBrush="{TemplateBinding BorderBrush}"
       Background="{TemplateBinding Background}"
       BorderThickness="{TemplateBinding BorderThickness}"                       
       Style="{StaticResource &#220;}"
       FocusVisualStyle="{TemplateBinding FocusVisualStyle}"
       Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
       Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
       ToolTipTitle="{TemplateBinding ToolTipTitle}"
       ToolTipDescription="{TemplateBinding ToolTipDescription}"
       ToolTipImageSource="{TemplateBinding ToolTipImageSource}"
       ToolTipFooterTitle="{TemplateBinding ToolTipFooterTitle}"
       ToolTipFooterDescription="{TemplateBinding ToolTipFooterDescription}"
       ToolTipFooterImageSource="{TemplateBinding ToolTipFooterImageSource}"
       SmallImageSource="{TemplateBinding SmallImageSource}"
       IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"
       Label="{TemplateBinding Label}"/>

line 7564, add code Label="{TemplateBinding Label}" in the end of the RibbonToggleButton element:

......
<Canvas>
  <ribbon:RibbonToggleButton x:Name="PART_PopupToggleButton"
    AutomationProperties.Name="{Binding RelativeSource={RelativeSource TemplatedParent},

Path=(AutomationProperties.Name)}" Canvas.Top="-24" Canvas.Left="3" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"
Style="{StaticResource Ü}" Focusable="False" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}" Label="{TemplateBinding Label}"/> And in the RibbonWindow, we could set the Label property of the RibbonApplicationMenu as:

<ribbon:RibbonApplicationMenu Label="File">

The forum post did include a ZIP of the modified sources, but the link no longer works.

user_31954770
Related