Win10开发：Flyout的使用及长按弹出菜单的实现

对于从WP7开发应用过来的人来说，很多人对Microsoft.Phone.Controls.Toolkit中的ContextMenu应该并不陌生。没错，ContextMenu就是实现长按选项后弹出的右键菜单，俗称上下文菜单，每一个菜单选项就是一个MenuItem。

在UWP中微软给我们带来了一个十分相似的控件：Flyout

说是相似，那是因为默认情况下，Flyout只能通过“单击”而不是长按操作呼出。

Flyout中最常用的是MenuFlyout。下面通过简单的示例来说明MenuFlyout的使用

1、最基本的

 <Button Content="Button">
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="A" Click="A_Click" Tag="A"/>
                    <MenuFlyoutItem Text="B" Click="B_Click" Tag="B"/>
                </MenuFlyout>
            </Button.Flyout>
 </Button>

2、分隔符和可勾选项

 <Button  Content="Button2">
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="A"/>
                    <MenuFlyoutSeparator/>
                    <ToggleMenuFlyoutItem Text="B"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>

3、层级菜单

<Button Content="Button3">
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="A"/>
                    <MenuFlyoutSubItem Text="B">
                        <MenuFlyoutItem Text="B1" />
                        <MenuFlyoutSubItem Text="B2">
                            <MenuFlyoutItem Text="B2-1" />
                            <MenuFlyoutItem Text="B2-2" />
                        </MenuFlyoutSubItem>
                    </MenuFlyoutSubItem>
                    </MenuFlyout>
            </Button.Flyout>
        </Button>

4、以上三个示例都是基于Button实现的，MenuFlyout也可用于AppBarButton。

在我的焕屏(已发布到应用商店)应用中，长按单张图片，会弹出下面的右键菜单

接下来就来实现这个效果

因为界面的主要元素是Image，不能像前面的示例那样直接嵌入MenuFlyout

首先在Page中定义MenuFlyout资源

<Page.Resources>
        <MenuFlyout x:Key="ImageMenuFlyout">
            <MenuFlyoutItem Text="设为开始屏幕背景" Click="SetWallpaperImage_Click"/>
            <MenuFlyoutItem Text="设为锁屏背景" Click="SetLockScreenImage_Click"/>
            <MenuFlyoutItem Text="删除" Click="DeleteImage_Click"/>
        </MenuFlyout>
    </Page.Resources>

在后台逻辑代码中添加对应事件

接着在Image控件中添加FlyoutBase.AttachedFlyout属性，引用上面的资源

 <Image Source="{Binding BitmapImg}" Width="150" FlyoutBase.AttachedFlyout="{StaticResource ImageMenuFlyout}" Holding="Image_Holding" RightTapped="Image_RightTapped"/>

Holding事件和RightTapped事件中的代码是一样的：

FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);

这里做个说明，之所以要写两个事件Holding和RightTapped，是因为PC(鼠标设备)端对Holding事件不做响应。关于两个事件的区别请查阅 MSDN 。我这里就偷懒写了两个事件，不知道会不会产生别的什么bug。

以上，就可以同时在PC和Mobile上实现如图所示的上下文菜单了

上面的例子都是对MenuFlyout的使用讲解，使用MenuFlyout只能实现简单的文本菜单显示。

下面讲解更定制化的菜单实现

1、

 <Button Content="Button5">
            <Button.Flyout>
                <Flyout>
                    <StackPanel>
                        <TextBlock Text="This is a TextBlock" Margin="5" />
                        <Button Content="This is a Button" />
                        <TextBox Text="This is a TextBox" Margin="5"/>
                    </StackPanel>
                </Flyout>
            </Button.Flyout>
        </Button>

可以看到，Flyout下是一个StackPanel控件，因此只要设计的好，就可以得到很赞的上下文菜单