【W(wǎng)PF】右鍵菜單ContextMenu可點擊區(qū)域太小的問題 原文:【W(wǎng)PF】右鍵菜單ContextMenu可點擊區(qū)域太小的問題

問題描述

正常使用右鍵菜單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菜單項都是可以響應(yīng)點擊的。

然而項目中通常右鍵菜單項MenuItem的內(nèi)容是不固定的，是通過ItemsSource綁定了集合。集合使用的數(shù)據(jù)內(nèi)容是可以動態(tài)修改的，在XAML中只是寫數(shù)據(jù)模板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填充數(shù)據(jù)。

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 });

運行后即可發(fā)現(xiàn)問題。

仔細(xì)觀察上圖運行效果，每個菜單項是嵌套在條目內(nèi)部的，只有點擊到中間深色區(qū)域才能觸發(fā)菜單項的點擊事件！點擊左右兩端淺色部分也能使菜單項關(guān)閉，但不會觸發(fā)菜單項的點擊事件！

?

解決方案

最初的想法是給內(nèi)部被嵌套的MenuItem改樣式，改為Padding=0應(yīng)該就能使其擴大到緊貼整個條目區(qū)域。

<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設(shè)置樣式的Padding屬性后，看上去菜單項已經(jīng)覆蓋了整個條目，但點擊時依然是左右兩端無法響應(yīng)點擊事件，只有中間部分能響應(yīng)到！（測試的點擊事件已被綁定到Y(jié)ourCommand命令中，此處已省略）

?

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

參考：

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。試了一下發(fā)現(xiàn)沒用。。

根據(jù)第二篇中的回復(fù)，改為不用DataTemplate，完全在ContextMenu.ItemContainerStyle中設(shè)置菜單項的屬性，試用后生效了。

<Button Content="Test" Width="100" Height="30"><Button.ContextMenu><ContextMenu ItemsSource="{Binding DataList, Mode=TwoWay}" Padding="0"><!-- 消除ItemTemplate造成的內(nèi)部MenuItem嵌套，導(dǎo)致左右兩端無法響應(yīng)點擊的問題 --><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菜單項覆蓋了整個條目，且點擊左右兩端都能觸發(fā)點擊事件了！

?

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

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/9628876.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。