如何在 WPF 的菜单中设置输入手势文本的水平对齐方式？

问题描述

我正在使用 WPF 制作一个应用程序并且有一个 Menu。在该菜单中，大多数项目都有键盘快捷键或输入手势。如何设置显示输入手势的文本的水平对齐方式？

我想要的：

外观：

我已经查过这个问题了，但我似乎是唯一关心这个的人。

解决方法

为了改变输入手势文本的水平对齐方式，你必须调整MenuItem的控件模板。您可以从头开始创建它，也可以创建默认样式 using Blend or Visual Studio 的副本。我推荐后者。如果您现在想详细了解 MenuItem 控件所需的部分和视觉状态，可以参考 documentation。

在下面，我提取了默认样式，仅提取了更改输入手势文本对齐实际所需的控件模板和资源。重要的变化在于 menuGestureText TextBlock。

<TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center" HorizontalAlignment="Right"/>

如您所见，我将 HorizontalAlignment 设置为 Right。以下是所需的基本 XAML 标记：

<SolidColorBrush x:Key="Menu.Static.Background" Color="#FFF0F0F0"/>
<SolidColorBrush x:Key="Menu.Static.Border" Color="#FF999999"/>
<SolidColorBrush x:Key="Menu.Static.Foreground" Color="#FF212121"/>
<SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>
<SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Background" Color="#0A000000"/>
<SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Border" Color="#21000000"/>

<Geometry x:Key="Checkmark">F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z</Geometry>

<ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey,TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
   <Border x:Name="templateRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Height="22" SnapsToDevicePixels="true">
      <Grid Margin="-1">
         <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
            <ColumnDefinition Width="13"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="30"/>
            <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
            <ColumnDefinition Width="20"/>
         </Grid.ColumnDefinitions>
         <ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
         <Border x:Name="GlyphPanel" Background="{StaticResource MenuItem.Selected.Background}" BorderThickness="1" BorderBrush="{StaticResource MenuItem.Selected.Border}" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0" VerticalAlignment="Center" Visibility="Hidden" Width="22">
            <Path x:Name="Glyph" Data="{StaticResource Checkmark}" FlowDirection="LeftToRight" Fill="{StaticResource Menu.Static.Foreground}" Height="11" Width="10"/>
         </Border>
         <ContentPresenter x:Name="menuHeaderContainer" ContentSource="Header" Grid.Column="2" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
         <TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center" HorizontalAlignment="Right"/>
      </Grid>
   </Border>
   <ControlTemplate.Triggers>
      <Trigger Property="Icon" Value="{x:Null}">
         <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
      </Trigger>
      <Trigger Property="IsChecked" Value="True">
         <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
         <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
      </Trigger>
      <Trigger Property="IsHighlighted" Value="True">
         <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Background}"/>
         <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
      </Trigger>
      <Trigger Property="IsEnabled" Value="False">
         <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
         <Setter Property="Fill" TargetName="Glyph" Value="{StaticResource Menu.Disabled.Foreground}"/>
      </Trigger>
      <MultiTrigger>
         <MultiTrigger.Conditions>
            <Condition Property="IsHighlighted" Value="True"/>
            <Condition Property="IsEnabled" Value="False"/>
         </MultiTrigger.Conditions>
         <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/>
         <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/>
      </MultiTrigger>
   </ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="MenuItemStyle" TargetType="{x:Type MenuItem}">
   <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
   <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
   <Setter Property="Background" Value="Transparent"/>
   <Setter Property="BorderBrush" Value="Transparent"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
   <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
   <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuItemTemplateKey,TypeInTargetAssembly={x:Type MenuItem}}}"/>
   <Style.Triggers>
      <Trigger Property="Role" Value="TopLevelHeader">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="BorderBrush" Value="Transparent"/>
         <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/>
         <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey,TypeInTargetAssembly={x:Type MenuItem}}}"/>
         <Setter Property="Padding" Value="6,0"/>
      </Trigger>
      <Trigger Property="Role" Value="TopLevelItem">
         <Setter Property="Background" Value="{StaticResource Menu.Static.Background}"/>
         <Setter Property="BorderBrush" Value="{StaticResource Menu.Static.Border}"/>
         <Setter Property="Foreground" Value="{StaticResource Menu.Static.Foreground}"/>
         <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=TopLevelItemTemplateKey,0"/>
      </Trigger>
      <Trigger Property="Role" Value="SubmenuHeader">
         <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey,TypeInTargetAssembly={x:Type MenuItem}}}"/>
      </Trigger>
   </Style.Triggers>
</Style>

您可以通过在 ItemContainerStyle 中将其引用为 Menu 来使用该样式，或者将该样式分配给 MenuItem。

<Menu ItemContainerStyle="{StaticResource MenuItemStyle}">
   <MenuItem Header="File">
      <MenuItem Header="New file" InputGestureText="Ctrl+N"/>
      <MenuItem Header="New template" InputGestureText="Ctrl+Shift+N"/>
   </MenuItem>
</Menu>

另一种选择是创建一个隐式样式，该样式会自动应用于范围内的所有 MenuItem。

<Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MenuItemStyle}"/>

这是结果，输入的手势文本向右对齐。