wpf - Cómo establecer texto en la cabeza de un RibbonApplicationMenu

ribbon-control ribboncontrolslibrary

Question

Estoy tratando de tener texto en el nivel superior de un RibbonApplicationMenu (tratando de obtener la palabra "Archivo" similar a Word o Outlook). Parece que Microsoft.Windows.Controls.Ribbon.RibbonApplicationMenu http://msdn.microsoft.com/en-us/library/microsoft.windows.controls.ribbon.ribbonapplicationmenu.aspx admite una SmallImageSource pero ninguna propiedad de texto. Establecer la propiedad Label no funciona para este problema.

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

</ribbon:RibbonApplicationMenu>

El objetivo es que la palabra "Archivo" aparezca en el área circulada a continuación.

Answer 1

¡Difícil! Es posible que deba reemplazar el PART_ToggleButton de la plantilla con su propia versión para poder configurar el texto.

El uso de WPF Vizualizer muestra que la plantilla contiene un StackPanel con una imagen y una ruta (DownArrow), pero no TextBlock, así que dudo que haya un lugar en el control actual para especificar el texto de la etiqueta.

Por supuesto, también puede crear una imagen que contenga el texto deseado .

Answer 2

Derecha. Si no desea ningún código subyacente ni cálculos complejos de glifos, use el siguiente 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>

Ventajas de este enfoque:

• Solo XAML, sin código detrás
• Ninguna medida de glifo
• Etiqueta fácil de cambiar

Answer 3

Elimine los elementos no deseados para el árbol visual y reemplácelos con un TextBlock que toma el texto de la propiedad Label. Debe hacer esto tanto para el botón en el árbol visual principal como en el árbol visual del menú emergente. Finalmente, dado que el texto es más intrincado que la imagen típica, es útil retroceder en los efectos de resaltado aerodinámico.

Para usar el siguiente código, asigne un nombre al menú de la aplicación en la XAML y llame a ReplaceRibbonApplicationMenuButtonContent desde el controlador de eventos Loaded de la ventana.

/// <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 4

La solución más simple (para mí) fue insertar una DrawingImage con un GlyphRun dentro. En una publicación separada se pregunta cómo obtener los Anticipos de Avance y Glyph para el GlyphRun. El resultado esta abajo

<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>

Cinta resultante:

Answer 5

Otra forma de hacerlo es simplemente utilizando una cuadrícula y pintar un TextBlock en el lugar correcto. Asegúrate de hacer el TextBlock NOT 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>

Ventajas:

• menos xaml
• mucho más fácil de localizar

Desventaja: - se ve menos agradable en Windows XP