【WPF】右鍵菜單ContextMenu可點擊區域太小的問題 原文:【WPF】右鍵菜單ContextMenu可點擊區域太小的問題

問題描述

正常使用右鍵菜單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 = "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應該就能使其擴大到緊貼整個條目區域。

<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命令中，此處已省略）

?

谷歌一下，看看別人是怎么處理該問題的。

參考：

https://social.msdn.microsoft.com/Forums/vstudio/en-US/188e6bad-352a-4e7d-a3bb-0a88f7760529/datatemplate-can-not-access-menuitemclick-attribute?forum=wpf

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菜單項覆蓋了整個條目，且點擊左右兩端都能觸發點擊事件了！

?

posted on 2018-09-11 17:05 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/9628876.html

總結

以上是生活随笔為你收集整理的【WPF】右键菜单ContextMenu可点击区域太小的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。