如何設置WPF菜單中輸入手勢文本的水平Alignment？

Question

我正在使用 WPF 進行應用程序並有一個Menu 。 在該菜單中，大多數項目都有鍵盤快捷鍵或輸入手勢。 如何設置顯示輸入手勢的文本的水平 alignment？

我想要的是：

它的外觀：

我已經查過了這個問題，但我似乎是唯一關心這個問題的人。

Answer 1

為了改變輸入手勢文本的水平 alignment ，您必須調整MenuItem的控制模板。 您可以從頭開始創建它，也可以使用 Blend 或 Visual Studio創建默認樣式的副本。 我推薦后者。 如果您現在想進一步了解MenuItem控件所需的部分和視覺狀態，可以參考文檔。

在下文中，我提取了默認樣式，僅提取了更改輸入手勢文本 alignment 實際需要的控件模板和資源。 本質的變化是在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,0,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, TypeInTargetAssembly={x:Type MenuItem}}}"/>
         <Setter Property="Padding" Value="6,0"/>
      </Trigger>
      <Trigger Property="Role" Value="SubmenuHeader">
         <Setter Property="Template" Value="{DynamicResource {ComponentResourceKey ResourceId=SubmenuHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}}"/>
      </Trigger>
   </Style.Triggers>
</Style>

您可以通過在Menu中將其作為ItemContainerStyle引用來使用該樣式，或者將樣式分配給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>

另一種選擇是創建一個隱式樣式，該樣式自動應用於 scope 中的所有MenuItem 。

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

這就是結果，輸入的手勢文本向右對齊。