【WP 8.1开发】上下文菜单

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在桌面系统中，别说是开发者，相信有资格考得过计算机一级的人都知道什么叫一下文菜单，或者叫右键菜单。

为了让操作更方便，在手机应用程序中，也应当有这样的菜单。上下文菜单之所以有”上下文“之说，是因为通常它是与用户正在操作的对象有关联，比如，在文本输入框中选定一段文字，然后通过上下文菜单来设置选定文本的格式，菜单所操作的对象就是这些被选中的文本。

在新的RT API中，有一个MenuFlyout类（从FlyoutBase派生，专用于一些弹出的浮动控件，菜单也是一种弹出控件），可以用它来创建上下文菜单。

菜单中的每一项用MenuFlyoutItem类来表示，这是最常见的菜单，用得较多；还有一种ToggleMenuFlyoutItem菜单项，这种菜单项可以在多次点击之间切换状态，类似于我们在桌面程序中用到的可以Checked的菜单项，当状态是被选定时，前面会显示一个勾，当未选中时，前面没有勾。

向应用程序UI添加上下菜单有两种方式。

先说第一种，大家看看Button类，有没有发现它有个Flyout属性? 类型是FlyoutBase，这表明，只要从FlyoutBase类派生的控件都能用，正好，MenuFlyout类就是FlyoutBase的子类。因此，添加上下文菜单一种非常easy的方法就是直接赋给Button.Flyout属性。

看例子：

菜单中包含三个项，Text属性表示菜单中显示的文本，并可以通过处理菜单项的Click事件来响应用户操作。
下面我们来写一些处理代码：

private async void OnItemClick ( object sender, RoutedEventArgs e )
{
MenuFlyoutItem item = sender as MenuFlyoutItem;
if (item != null)
{
string msg = string.Format("你选择了“{0}”。", item.Text);
Windows.UI.Popups.MessageDialog dlg = new Windows.UI.Popups.MessageDialog(msg, "提示");
await dlg.ShowAsync();
}
}

我不搞那么复杂了，就用一个方法同时处理三个MenuFlyoutItem的Click事件，通过sender就判断出哪个项被单击，然后用一个弹出对话框显示被单击的菜单项的文本。
运行一下，然后点击那个可爱的按钮，会看到以下效果。

运行后会发现，设置了Button.Flyout的弹出控件，只要一点击按钮，它就会自动显示，不需要我们做任何工作。

另一种添加上下菜单的方法是通过附加属性的方法。

FlyoutBase类定义了以下附加属性：

public static Windows.UI.Xaml.DependencyProperty AttachedFlyoutProperty { get; }public static void SetAttachedFlyout(Windows.UI.Xaml.FrameworkElement element, Windows.UI.Xaml.Controls.Primitives.FlyoutBase value)public static Windows.UI.Xaml.Controls.Primitives.FlyoutBase GetAttachedFlyout(Windows.UI.Xaml.FrameworkElement element)

通过这种附加属性，可以将上下文菜单附加到所有FrameworkElement对象上。

注意，在这种情况下，MenuFlyout是不会自动弹出的，需要我们自己去处理。一般来说，当我们长按某个UI对象时打开菜单。比较好的做法是处理Holding事件，在手机上，长按就相当于我们在电脑上的鼠标右击。为什么不用RightTapped事件呢，因为RightTapped事件是需要完成整个长按操作后才会发生，而Holding在长按的操作过程中就能发生，如果用户一直按在UI对象上而不松开手，RightTapped事件延迟发生，用户看不到菜单出来，他会误以为程序有问题；反之，Holding事件在识别出用户长按操作后就会发生，用户在松开手指前就看到菜单出来，就不会误认为程序没反应了。

看例子：

Placement属性是指定菜单弹出的方向，此处设置为向上。注意在WP中，菜单都是占用所有的水平空间的，也就是说当屏幕是纵向时，只有上、下两个方向是有意义的，左、右是会被忽略，因为左右的空间都被占满了，无所谓左右了。同理，当屏幕方向为横向时，只有左、右可用，因为上下都被菜单占满了。如果大家觉得不好理解也无所谓，这个位置也不是绝对的，系统会根据可用的空间自动调整，一般来说也不用刻意去指向菜单弹出的方向，我这里只是为了演示而设置的。

首先，处理Ellipse的Holding事件，打开菜单。

private void OnElpHolding ( object sender, HoldingRoutedEventArgs e )
{
Ellipse ellp = sender as Ellipse;
if (ellp != null)
{
// 显示上下文菜单
FlyoutBase.ShowAttachedFlyout(ellp);
}
}

通过FlyoutBase类的静态方法ShowAttachedFlyout来打开菜单，参数就是附加了FlyoutBase.AttachedFlyout的UI元素，本例中是Ellipse对象。
接下来，处理MenuFlyoutItem的Click事件，改变Ellipse的颜色。

private void OnMenuClick ( object sender, RoutedEventArgs e )
{
MenuFlyoutItem item = sender as MenuFlyoutItem;
if (item != null)
{
string tag = item.Tag.ToString();
// 改变圆的颜色
switch (tag)
{
case "blue":
elBrush.Color = Colors.Blue;
break;
case "red":
elBrush.Color = Colors.Red;
break;
case "green":
elBrush.Color = Colors.Green;
break;
case "purple":
elBrush.Color = Colors.Purple;
break;
default:
elBrush.Color = Colors.Green;
break;
}
}
}