如何在 RibbonApplicationMenu 的顶部设置文本

Question

我试图在 RibbonApplicationMenu 的顶层添加文本（尝试在此处获取单词 File ，类似于 Word 或 Outlook）。似乎是 Microsoft.Windows.Controls.Ribbon.RibbonApplicationMenu

MSDN

支持 SmallImageSource 但不支持文本属性。设置 Label 属性无法解决此问题。

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

目标是让“文件”一词出现在下面的圆圈区域中。

Answer 1

最简单的解决方案（对我来说）是插入 DrawingImage 带有 GlyphRun 内。在单独的帖子上询问如何获取 GlyphRun 的 AdvanceWidths 和 GlyphIndicies 。结果位于

<ribbon:RibbonApplicationMenu.SmallImageSource>
    <DrawingImage>
        <DrawingImage.Drawing>
            <GlyphRunDrawing ForegroundBrush="White">
                <GlyphRunDrawing.GlyphRun>
                    <GlyphRun
                            CaretStops="{x:Null}" 
                            ClusterMap="{x:Null}" 
                            IsSideways="False" 
                            GlyphOffsets="{x:Null}" 
                            GlyphIndices="41 76 79 72" 
                            FontRenderingEmSize="12" 
                            DeviceFontName="{x:Null}" 
                            AdvanceWidths="5.859375 2.90625 2.90625 6.275390625">
                        <GlyphRun.GlyphTypeface>
                            <GlyphTypeface FontUri="C:\WINDOWS\Fonts\SEGOEUI.TTF"/>
                        </GlyphRun.GlyphTypeface>
                    </GlyphRun>
                </GlyphRunDrawing.GlyphRun>
            </GlyphRunDrawing>
        </DrawingImage.Drawing>
    </DrawingImage>
</ribbon:RibbonApplicationMenu.SmallImageSource>

结果功能区下方：

Answer 2

删除可视化树中不需要的元素，并将它们替换为从 Label 属性获取文本的 TextBlock。您必须对主视觉树上的按钮和弹出窗口的视觉树上的按钮执行此操作。最后，由于文本比典型图像更复杂，因此减少航空突出效果会很有帮助。

要使用以下代码，请在 XAML 中为应用程序菜单分配一个名称，并从窗口的 Loaded 事件处理程序中使用该名称调用 ReplaceRibbonApplicationMenuButtonContent。

/// <summary>
/// Replaces the image and down arrow of a Ribbon Application Menu Button with the button's Label text.
/// </summary>
/// <param name="menu">The menu whose application button should show the label text.</param>
/// <remarks>
/// The method assumes the specific visual tree implementation of the October 2010 version of <see cref="RibbonApplicationMenu"/>.
/// Fortunately, since the application menu is high profile, breakage due to version changes should be obvious.
/// Hopefully, native support for text will be added before the implementation breaks.
/// </remarks>
void ReplaceRibbonApplicationMenuButtonContent(RibbonApplicationMenu menu)
{
    Grid outerGrid = (Grid)VisualTreeHelper.GetChild(menu, 0);
    RibbonToggleButton toggleButton = (RibbonToggleButton)outerGrid.Children[0];
    ReplaceRibbonToggleButtonContent(toggleButton, menu.Label);

    Popup popup = (Popup)outerGrid.Children[2];
    EventHandler popupOpenedHandler = null;
    popupOpenedHandler = new EventHandler(delegate
    {
        Decorator decorator = (Decorator)popup.Child;
        Grid popupGrid = (Grid)decorator.Child;
        Canvas canvas = (Canvas)popupGrid.Children[1];
        RibbonToggleButton popupToggleButton = (RibbonToggleButton)canvas.Children[0];
        ReplaceRibbonToggleButtonContent(popupToggleButton, menu.Label);
        popup.Opened -= popupOpenedHandler;
    });
    popup.Opened += popupOpenedHandler;
}

void ReplaceRibbonToggleButtonContent(RibbonToggleButton toggleButton, string text)
{
    // Subdues the aero highlighting to that the text has better contrast.
    Grid grid = (Grid)VisualTreeHelper.GetChild(toggleButton, 0);
    Border middleBorder = (Border)grid.Children[1];
    middleBorder.Opacity = .5;

    // Replaces the images with the label text.
    StackPanel stackPanel = (StackPanel)grid.Children[2];
    UIElementCollection children = stackPanel.Children;
    children.RemoveRange(0, children.Count);
    TextBlock textBlock = new TextBlock(new Run(text));
    textBlock.Foreground = Brushes.White;
    children.Add(textBlock);
}

Answer 3

正确的。如果您不需要隐藏代码且不需要复杂的字形计算，请使用以下 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>

此方法的优点：

• 仅 XAML，无代码隐藏
• 无字形测量
• 易于更改标签

Answer 4

棘手！您可能必须将模板的 PART_ToggleButton 替换为您自己的版本才能设置文本。

使用WPF Vizualizer显示模板包含一个带有图像和路径（DownArrow）的StackPanel，但没有TextBlock，所以我怀疑当前控件中有一个地方可以指定标签文本。

当然，您也可以创建包含所需文本的图像。

Answer 5

另一种方法是使用网格并在正确的位置绘制 TextBlock。请务必使 TextBlock 不为​​ HitTestVisible。

<Grid>
    <DockPanel>
         <ribbon:Ribbon DockPanel.Dock="Top">
             <!-- your ribbon stuff -->
         </ribbon:Ribbon>
         <!-- your other stuff -->
    </DockPanel>
    <TextBlock Margin="3,26" Foreground="White"
               IsHitTestVisible="False"
               Text="{LocalizeExtension:LocText Key=FILE, Dict=Strings, Assembly=YourAssembly}"/>
</Grid>

优点：

• 更少的 xaml
• 方式更容易本地化

缺点：
- 在 Windows XP 上看起来不太好

Answer 6

发布了以下解决方案 MSDN 论坛。它涉及更改默认（？）主题中使用的样式。

我检查了Ribbon控件的源代码（请下载
来自网站的 MicrosoftRibbonForWPFSourceAndSamples ）。在
主题文件
(<代码>\MicrosoftRibbonForWPFSourceAndSamples\RibbonControlsLibrary\Themes\Generic.xaml)
的功能区，你会发现这种样式“Ü”用于
RibbonApplicationMenu。在这种风格中，没有任何元素可以显示
Text，它只有一个 Image 元素来显示图像。

幸运的是，我们可以修改样式代码并添加一些控件
“Ü”样式。请输入以下代码：

第7264行，更改代码：

 

第7433行，在末尾添加代码Label="{TemplateBinding Label}"

  RibbonToggleButton 元素：
<前><代码>......

 

   <网格焦点=“假”

      x:名称=“外部网格”

      SnapsToDevicePixels="True">

     <功能区:RibbonToggleButton x:Name="PART_ToggleButton"

       BorderBrush =“{TemplateBinding BorderBrush}”

       背景=“{TemplateBinding背景}”

       BorderThickness =“{TemplateBinding BorderThickness}”

       样式 =“{StaticResource Ü}”

       FocusVisualStyle="{TemplateBinding FocusVisualStyle}"

       高度=“{绑定RelativeSource = {RelativeSource TemplatedParent}，路径=高度}”

       宽度=“{绑定RelativeSource={RelativeSource TemplatedParent}，路径=宽度}”

       ToolTipTitle="{模板绑定ToolTipTitle}"

       ToolTipDescription="{模板绑定ToolTipDescription}"

       ToolTipImageSource="{模板绑定ToolTipImageSource}"

       ToolTipFooterTitle="{模板绑定ToolTipFooterTitle}"

       ToolTipFooterDescription="{TemplateBinding ToolTipFooterDescription}"

       ToolTipFooterImageSource="{TemplateBinding ToolTipFooterImageSource}"

       SmallImageSource="{TemplateBinding SmallImageSource}"

       IsChecked =“{绑定RelativeSource = {RelativeSource TemplatedParent}，路径= IsDropDownOpen，模式= TwoWay}”

       标签=“{TemplateBinding标签}”/>


第7564行，在末尾添加代码Label="{TemplateBinding Label}"

  RibbonToggleButton 元素：
<前><代码>......

<画布>

  <功能区:RibbonToggleButton x:Name="PART_PopupToggleButton"

    AutomationProperties.Name =“{绑定RelativeSource = {RelativeSource TemplatedParent}，
路径=(AutomationProperties.Name)}"

          画布.Top =“-24”

          画布.左=“3”

          IsChecked =“{绑定RelativeSource = {RelativeSource TemplatedParent}，Path = IsDropDownOpen}”

          BorderBrush =“{TemplateBinding BorderBrush}”

          背景=“{TemplateBinding背景}”

          BorderThickness="{TemplateBinding BorderThickness}"

          样式=“{StaticResource Ü}”

          可聚焦=“假”

          高度=“{绑定RelativeSource={RelativeSource TemplatedParent}，路径=高度}”

          宽度=“{绑定RelativeSource={RelativeSource TemplatedParent}，路径=宽度}”

          标签=“{TemplateBinding标签}”/>

      在 RibbonWindow 中，我们可以将 RibbonApplicationMenu 的 Label 属性设置为：

论坛帖子确实包含修改后的源的 ZIP，但链接不再有效。