问题描述
正常使用右键菜单ContextMenu时,如果菜单项是不变的,可以直接在XAML中写死,如下是给一个Button按钮添加了右键菜单功能。
此时整个MenuItem菜单项都是可以响应点击的。
然而项目中通常右键菜单项MenuItem的内容是不固定的,是通过ItemsSource绑定了集合。集合使用的数据内容是可以动态修改的,在XAML中只是写数据模板ItemTemplate。代码改造一下如下。
XAML:ItemSource绑定列表DataList,MenuItem中显示的是DataList集合中的每个自定义对象的Num属性。
自定义的实体类Student.cs。
public classStudent
{public string Num { get; set; }public int Age { get; set; }
}
ViewModel:定义DataList集合。
private ObservableCollectiondataList;public ObservableCollectionDataList
{get { returndataList; }set { dataList =value; }
}
给DataList填充数据。
DataList = new ObservableCollection();
DataList.Add(new Student() { Num = "12", Age = 10});
DataList.Add(new Student() { Num = "12213", Age = 10});
DataList.Add(new Student() { Num = "1212", Age = 10});
DataList.Add(new Student() { Num = "2", Age = 10});
DataList.Add(new Student() { Num = "112341242134122", Age = 10});
DataList.Add(new Student() { Num = "123452342", Age = 10 });
运行后即可发现问题。
仔细观察上图运行效果,每个菜单项是嵌套在条目内部的,只有点击到中间深色区域才能触发菜单项的点击事件!点击左右两端浅色部分也能使菜单项关闭,但不会触发菜单项的点击事件!
解决方案
最初的想法是给内部被嵌套的MenuItem改样式,改为Padding=0应该就能使其扩大到紧贴整个条目区域。
通过ContextMenu.ItemContainerStyle设置样式的Padding属性后,看上去菜单项已经覆盖了整个条目,但点击时依然是左右两端无法响应点击事件,只有中间部分能响应到!(测试的点击事件已被绑定到YourCommand命令中,此处已省略)
谷歌一下,看看别人是怎么处理该问题的。
参考:
上面第一篇文章中,老外的意见是不要在ItemTemplate中嵌套MenuItem,改为嵌套TextBlock。试了一下发现没用。。
根据第二篇中的回复,改为不用DataTemplate,完全在ContextMenu.ItemContainerStyle中设置菜单项的属性,试用后生效了。
此时MenuItem菜单项覆盖了整个条目,且点击左右两端都能触发点击事件了!
原文出处:/guxin/p/wpf-right-click-contextmenu-itemtemplate-menuitem-does-not-react-to-click.html
如果觉得《contextmenu样式 wpf_【WPF】右键菜单ContextMenu可点击区域太小的问题》对你有帮助,请点赞、收藏,并留下你的观点哦!