WPF：上下文菜單項中的兩列

Question

我正在嘗試創建具有兩列的上下文菜單，如下所示：

項目的文本綁定到項目的Name屬性，快捷鍵綁定到GestureText屬性。 但是，似乎沒有遵守列定義，我看到了這一點：

我的XAML如下：

<Window x:Class="ContextMenu2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Margin="0,2,0.4,-2.2">
        <TextBlock Text="RightClickMe" HorizontalAlignment="Left" VerticalAlignment="Top">
            <TextBlock.ContextMenu>
                <ContextMenu ItemsSource="{Binding Items}">
                    <ContextMenu.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50*"/>
                                    <ColumnDefinition Width="70*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Name}" />
                                <TextBlock Grid.Column="1" Text="{Binding GestureText}"/>
                            </Grid>
                        </DataTemplate>
                    </ContextMenu.ItemTemplate>
                </ContextMenu>
            </TextBlock.ContextMenu>
        </TextBlock>
    </Grid>
</Window>

C＃

using System;
using System.Collections.ObjectModel;
using System.Globalization;
using System.Windows;
using System.Windows.Input;

namespace ContextMenu2
{
    public class CMenu
    {
        public String Name { get; set; }
        public string GestureText { get; set; }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        public  ObservableCollection<CMenu> Items { get; set; }= new ObservableCollection<CMenu>
        {
            new CMenu()
            {
                Name = "Press me",
                GestureText =
                    new KeyGesture(Key.Q, ModifierKeys.Control).GetDisplayStringForCulture(CultureInfo.CurrentUICulture)
            },
            new CMenu()
            {
                Name = "Press me too",
                GestureText =
                    new KeyGesture(Key.R, ModifierKeys.Control).GetDisplayStringForCulture(CultureInfo.CurrentUICulture)
            }
        };
    }
}

怎么了

Answer 1

您可以將ItemContainerStyle InputGestureText綁定到GestureText ：

<ContextMenu ItemsSource="{Binding Items}" HorizontalContentAlignment="Stretch">
    <ContextMenu.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ContextMenu.ItemTemplate>
    <ContextMenu.ItemContainerStyle>
        <Style TargetType="MenuItem">
            <Setter Property="InputGestureText" Value="{Binding GestureText}"/>
        </Style>
    </ContextMenu.ItemContainerStyle>
</ContextMenu>

另請注意，設置HorizontalAlighnment或HorizontalContentAlignment不會有幫助。 請注意默認樣式的這一部分：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"
                        SharedSizeGroup="Icon" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto"
                        SharedSizeGroup="Shortcut" />
    <ColumnDefinition Width="13" />
</Grid.ColumnDefinitions>

第三列中的TextBlock的邊距為Margin="5,2,2,2" 。

Answer 2

我沒有測試過，但是我猜想是包含您的列的MenuItems本身並沒有占據整個寬度（它們可能保持對齊）。 因此，也許嘗試使用來更改其對齊方式，例如：

<ContextMenu.ItemContainerStyle>
    <Style TargetType="{x:Type MenuItem}">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
    </Style>
</ContextMenu.ItemContainerStyle>

Answer 3

如果您確實想創建自定義外觀的ContextMenu ，則需要覆蓋MenuItem ItemContainer的ControlTemplate ，即在ControlTemplate而不是在ContextMenu的ItemTemplate中定義此Grid ：

<TextBlock Text="RightClickMe" HorizontalAlignment="Left" VerticalAlignment="Top">
    <TextBlock.ContextMenu>
        <ContextMenu ItemsSource="{Binding Items}">
            <ContextMenu.ItemContainerStyle>
                <Style TargetType="MenuItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type MenuItem}">
                                <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                    <Grid Margin="-1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                                            <ColumnDefinition Width="13"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="5*" SharedSizeGroup="a"/>
                                            <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                                            <ColumnDefinition Width="7*" SharedSizeGroup="b"/>
                                        </Grid.ColumnDefinitions>
                                        <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                                        <Border x:Name="GlyphPanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#3D26A0DA" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
                                            <Path x:Name="Glyph" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Height="11" Width="10"/>
                                        </Border>
                                        <ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="{TemplateBinding HeaderTemplate}" 
                                                                      Content="{Binding Name}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                                        <TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" 
                                                               Text="{Binding GestureText}" 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="#3D26A0DA"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                                        <Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsHighlighted" Value="True"/>
                                            <Condition Property="IsEnabled" Value="False"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
                                        <Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
                                    </MultiTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ContextMenu.ItemContainerStyle>
        </ContextMenu>
    </TextBlock.ContextMenu>
</TextBlock>

如果只想將InputGestureText屬性綁定到GestureText屬性，則應參考GestureText的答案。