Win10开发:Flyout的使用及长按弹出菜单的实现
来源:互联网 发布:万网解析域名设置 编辑:程序博客网 时间:2024/05/22 04:45
对于从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控件,因此只要设计的好,就可以得到很赞的上下文菜单
- Win10开发:Flyout的使用及长按弹出菜单的实现
- android meun 菜单的使用(长按弹出菜单)
- flyout-竖向三级弹出菜单
- flyout-竖向三级弹出菜单
- 长按listview弹出上下文菜单实现
- 长按listview弹出上下文菜单实现
- IOS开发 Tableview长按弹出菜单,类似android的popwindow
- EditText 长按弹出的上下文菜单(如何修改系统默认弹出的上下文菜单)
- 长按弹出菜单
- ExpandableListView的长按点击弹出上下文菜单方法
- <win8>(三)实例讲解win8(XAML+C#)开发--------课程表:弹出菜单ContextMenu和弹窗Flyout
- Android创建浮动的上下文菜单,实现微信通讯录列表长按弹出菜单项功能
- Android ImageButton的使用 及长按Button的实现
- Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航
- webview长按弹出菜单
- 长按弹出快捷菜单
- 长按listview弹出菜单
- Android setOnCreateContextMenuListener实现长按ListItem弹出不同菜单
- 指针与自增运算----(*p)++ 与 *p++ 与 ++*p 拨开一团迷雾
- 浮点数精确到小数点后一位(java)
- 移除Win10资源管理器中OneDrive图标
- 【转】贝叶斯网络+马尔科夫毯 简介
- 什么是窗口句柄
- Win10开发:Flyout的使用及长按弹出菜单的实现
- HTML游戏—爱心鱼
- java入门学习(一)
- 周易六十四卦——地天泰卦
- 解决在Azure 部署SharePoint2013 数据服务器拒绝连接和域连接出现的问题
- HDOJ 2120 Ice_cream's world I
- iOS防止消息转发的crash
- 支付宝支付
- 采用FFmpeg从视频中提取音频(声音)保存为mp3文件