【WP 8.1开发】上下文菜单

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

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

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

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

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

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

看例子：

        <Button Content="请点击" >
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="选项一" Click="OnItemClick"/>
                    <MenuFlyoutItem Text="选项二" Click="OnItemClick"/>
                    <MenuFlyoutItem Text="选项三" Click="OnItemClick"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>

菜单中包含三个项，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事件在识别出用户长按操作后就会发生，用户在松开手指前就看到菜单出来，就不会误认为程序没反应了。

看例子：

        <Ellipse Width="200" Height="200" Holding="OnElpHolding">
            <Ellipse.Fill>
                <SolidColorBrush Color="Green" x:Name="elBrush"/>
            </Ellipse.Fill>
            <FlyoutBase.AttachedFlyout>
                <MenuFlyout Placement="Top">
                    <MenuFlyoutItem Text="蓝色" Click="OnMenuClick" Tag="blue"/>
                    <MenuFlyoutItem Text="红色" Click="OnMenuClick" Tag="red"/>
                    <MenuFlyoutItem Text="绿色" Click="OnMenuClick" Tag="green"/>
                    <MenuFlyoutItem Text="紫色" Click="OnMenuClick" Tag="purple"/>
                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>
        </Ellipse>

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

运行示例，在圆上长按，就可以打开上下文菜单来改变圆的颜色了。

示例源代码下载：http://files.cnblogs.com/tcjiaan/MenuFlyoutExamples.zip

好了，今天的牛皮就吹到这里了，收笔。

=============================================================

必须严重地说一个事。希望转载博文者能注明原出处。博客是一个自由分享平台，但应该尊重原创，近来发现有些转载直接把原作者和原链接都去掉了，这是不厚道的。虽然我的博文写得比较烂，那也要尊重原创。  ——老周