正文

【WPF】右键菜单ContextMenu可点击区域太小的问题

IP云
IP云V管理员/13 阅读
08/31
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

问题描述

正常使用右键菜单ContextMenu时，如果菜单项是不变的，可以直接在XAML中写死，如下是给一个Button按钮添加了右键菜单功能。

<Button Content="Test" Width="100" Height="30">
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="1"/>
<MenuItem Header="1123"/>
<MenuItem Header="11234134532"/>
<MenuItem Header="1234532"/>
<MenuItem Header="1234"/>
<MenuItem Header="13245324532543253"/>
</ContextMenu>
</Button.ContextMenu>
</Button>

此时整个MenuItem菜单项都是可以响应点击的。

然而项目中通常右键菜单项MenuItem的内容是不固定的，是通过ItemsSource绑定了集合。集合使用的数据内容是可以动态修改的，在XAML中只是写数据模板ItemTemplate。代码改造一下如下。

XAML：ItemSource绑定列表DataList，MenuItem中显示的是DataList集合中的每个自定义对象的Num属性。

<Button Content="Test" Width="100" Height="30">
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding DataList, Mode=TwoWay}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Num}"
Command="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=DataContext.YourCommand}"
CommandParameter="{Binding RelativeSource={x:Static RelativeSource.Self}}"/>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</Button.ContextMenu>
</Button>

自定义的实体类Student.cs。

public class Student
{
public string Num { get; set; }
public int Age { get; set; }
}

ViewModel：定义DataList集合。

private ObservableCollection<Student> dataList;
public ObservableCollection<Student> DataList
{
get { return dataList; }
set { dataList = value; }
}

给DataList填充数据。

DataList = new ObservableCollection<Student>();
DataList.Add(new Student() { Num = "", Age = });
DataList.Add(new Student() { Num = "", Age = });
DataList.Add(new Student() { Num = "", Age = });
DataList.Add(new Student() { Num = "", Age = });
DataList.Add(new Student() { Num = "", Age = });
DataList.Add(new Student() { Num = "", Age = });

运行后即可发现问题。

仔细观察上图运行效果，每个菜单项是嵌套在条目内部的，只有点击到中间深色区域才能触发菜单项的点击事件！点击左右两端浅色部分也能使菜单项关闭，但不会触发菜单项的点击事件！

解决方案

最初的想法是给内部被嵌套的MenuItem改样式，改为Padding=0应该就能使其扩大到紧贴整个条目区域。

<Button Content="Test" Width="100" Height="30">
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding DataList, Mode=TwoWay}">
<ContextMenu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Padding" Value="-33,0,-63,0"/>
</Style>
</ContextMenu.ItemContainerStyle>
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Num}"
Command="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=DataContext.YourCommand}"
CommandParameter="{Binding RelativeSource={x:Static RelativeSource.Self}}"/>
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</Button.ContextMenu>
</Button>

通过ContextMenu.ItemContainerStyle设置样式的Padding属性后，看上去菜单项已经覆盖了整个条目，但点击时依然是左右两端无法响应点击事件，只有中间部分能响应到！（测试的点击事件已被绑定到YourCommand命令中，此处已省略）

谷歌一下，看看别人是怎么处理该问题的。

参考：

  1. https://social.msdn.microsoft.com/Forums/vstudio/en-US/188e6bad-352a-4e7d-a3bb-0a88f7760529/datatemplate-can-not-access-menuitemclick-attribute?forum=wpf
  2. https://stackoverflow.com/questions/44763405/c-sharp-wpf-contextmenu-menuitem-does-not-react-to-click

上面第一篇文章中，老外的意见是不要在ItemTemplate中嵌套MenuItem，改为嵌套TextBlock。试了一下发现没用。。

根据第二篇中的回复，改为不用DataTemplate，完全在ContextMenu.ItemContainerStyle中设置菜单项的属性，试用后生效了。

<Button Content="Test" Width="100" Height="30">
<Button.ContextMenu>
<ContextMenu ItemsSource="{Binding DataList, Mode=TwoWay}" Padding="0">
<!-- 消除ItemTemplate造成的内部MenuItem嵌套，导致左右两端无法响应点击的问题 -->
<ContextMenu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Header" Value="{Binding Num}"/>
<Setter Property="Command" Value="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=DataContext.YourCommand}"/>
<Setter Property="CommandParameter" Value="{Binding RelativeSource={x:Static RelativeSource.Self}}"/>
</Style>
</ContextMenu.ItemContainerStyle>
</ContextMenu>
</Button.ContextMenu>
</Button>

此时MenuItem菜单项覆盖了整个条目，且点击左右两端都能触发点击事件了！