如何摆脱子菜单弹出窗口中的非活动死区？答案

【问题标题】：How can I get rid of inactive dead space in submenu popup?如何摆脱子菜单弹出窗口中的非活动死区？
【发布时间】：2013-03-17 22:22:07
【问题描述】：

我有一个ContextMenu，它由多个顶级MenuItems 组成，其中一个包含由ItemsSource 绑定的子菜单，如下所示：

<ContextMenu Style="{x:Null}">
    <MenuItem Header="{Binding MenuLabelNewSolution}" Command="New"/>
    <MenuItem Header="{Binding MenuLabelOpenSolution}" Command="Open"/>
    <MenuItem Header="{Binding MenuLabelRecentSolutions}"
              ItemsSource="{Binding RecentSolutions, Mode=OneWay}">
        <MenuItem.ItemTemplate>
            <DataTemplate>
                <Button Style="{x:Null}" Margin="0" Content="Test"
                        Command="vm:CustomCommands.ExplicitOpen"/>
            </DataTemplate>
        </MenuItem.ItemTemplate>
    </MenuItem>
    <MenuItem Header="{Binding MenuLabelSaveAll}" Command="vm:CustomCommands.SaveAll"/>
</ContextMenu>

上面的子菜单项是 testButtons 来说明问题。

在下面，我通过扩展列缩减了Style 的Style 以说明问题：

<Style TargetType="{x:Type MenuItem}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Border Style="{x:Null}" Background="LightBlue"
                        BorderBrush="Black" BorderThickness="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="100" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="100" />
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="1" ContentSource="Header" />
                        <Popup Style="{x:Null}" Margin="0" 
                               IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               Placement="Right" VerticalOffset="-3">
                            <StackPanel Style="{x:Null}" Background="Red"
                                        Margin="0" IsItemsHost="True" />
                        </Popup>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我遇到的问题是子菜单有很多不活动的死区，如下图所示：

如果用户点击顶层MenuItem（用于图标和手势文本）中的死区，则执行菜单命令。但是，如果用户单击子菜单项中测试按钮之外的任何死区，则不会执行菜单命令。

我可以做什么Style 明智地摆脱子菜单级别的额外空间，或者至少使整个子菜单区域相对于菜单命令处于活动状态？

顺便说一句，如果我将MenuItem 恢复为默认的Style，我仍然会遇到同样的问题：

【问题讨论】：

标签： wpf popup styles contextmenu menuitem

【解决方案1】：

问题根本不在于我的MenuItemStyle，而是因为我对子菜单项使用了DataTemplate。以下更改起到了作用：

<ContextMenu>
    <MenuItem Header="{Binding MenuLabelNewSolution}" Command="New"/>
    <MenuItem Header="{Binding MenuLabelOpenSolution}" Command="Open"/>
    <MenuItem Header="{Binding MenuLabelRecentSolutions}"
              ItemsSource="{Binding RecentSolutions, Mode=OneWay}">
        <MenuItem.ItemContainerStyle>
            <Style TargetType="MenuItem">
                <Setter Property="Header" Value="{Binding Header}"/>
                <Setter Property="Command" Value="vm:CustomCommands.ExplicitOpen"/>
            </Style>
        </MenuItem.ItemContainerStyle>
    </MenuItem>
    <MenuItem Header="{Binding MenuLabelSaveAll}" Command="vm:CustomCommands.SaveAll"/>
</ContextMenu>

【讨论】：