Win10系列:UWP界面布局进阶4
在开发Windows应用商店应用程序时,可以为页面中的界面元素添加快捷菜单,并设置与其相关的菜单项,用户通过选择快捷菜单中的菜单项来执行与被选择对象相关的操作。下面通过一个示例来介绍如何为页面中的一张图片添加快捷菜单,并在快捷菜单中设置"复制"及"另存为"菜单项。
启动Visual Studio 2012,新建一个Windows应用商店的空白应用程序项目并将其命名为ShortcutMenuSetting。在解决方案资源管理器的Assets文件夹下添加一张名为"Flower.jpg"的图片,接着打开MainPage.xaml文件,在默认的Grid元素中添加一个用来显示图片的Image元素并命名为FlowerImage,将Image元素的Source属性设置为图片所在路径,并为其定义Tapped事件处理方法。最后放置一个TextBlock文本块用来显示提示信息,并将其命名为Output。对界面进行布局后的代码如下所示:
<TextBlock x:Name="Output" Height="25" Width="139" FontSize="20" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="68,364,0,0"/>
<Image Width="120" Height="120" Source="ms-appx:///Assets/Flower.png" Tapped="FlowerImage_Tapped" Margin="28,174,1138,394"/>
接下来打开MainPage.xaml.cs文件编写后台代码。由于在界面中添加快捷菜单会用到位于Windows.UI.Popups命名空间下的PopupMenu类,所以为了简化代码编写,首先将此命名空间添加到代码当中,然后为Image控件的Tapped事件编写事件处理方法FlowerImage_Tapped,具体实现代码如下所示:
private async void FlowerImage_Tapped(object sender, TappedRoutedEventArgs e)
var popupMenu = new PopupMenu();
UICommand CopyCommand = new UICommand("复制", (command) =>
Output.Text = "已选择'" + command.Label + "'";
popupMenu.Commands.Add(CopyCommand);
UICommand SaveCommand = new UICommand("另存为", (command) =>
Output.Text = "已选择'" + command.Label + "'";
popupMenu.Commands.Add(SaveCommand);
await popupMenu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
接下来编写上面调用的GetElementRect方法,用来定义快捷菜单的大小及显示位置,实现代码如下所示:
public Rect GetElementRect(FrameworkElement element)
GeneralTransform buttonTransform = element.TransformToVisual(null);
Point point = buttonTransform.TransformPoint(new Point());
Size size = new Size(element.ActualWidth, element.ActualHeight);
运行程序,单击页面中的图像,可以看到在图像上方会出现自定义的快捷菜单,选择快捷菜单中的不同菜单项,将会在图片的下方显示不同的提示信息,效果如图5-8所示。
(1)"轻击"图片后显示快捷菜单的效果 (2)选择"另存为"菜单项后的效果
值得注意的是,在为Windows应用商店应用程序的界面元素添加快捷菜单时,限定最多可以添加6个可选菜单项,这样可以确保快捷菜单的整洁性与可用性。
相关文章
- win10修改dns服务器地址,教你Win10如何更改首选DNS服务器地址
- Win10安装程序修复计算机,directx修复工具win10最新版
- win10多合一原版系统_微软Win10专业版制作多合一系统安装盘教程
- win10如何安装iis_装win10配置要求
- linux卸载系统自带jdk_win10自带虚拟机好用吗
- Win10家庭版使用远程桌面连接失败
- win10升级错误-Win7升级Win10出现错误代码0xC1900101-0x30017的解决办法
- 使用Win10在电脑上安装Linux双系统(win10装linux双系统)
- 微软详述Win10新任务栏功能体验
- Win10将迎来Build 19043 21H1功能更新
- Win10 KB4598291修复了ESENT报错 但又出新问题
- 代号“XOXO” Win10替代者Netrunner 21.01发布
- Win10更新又出Bug 导致备份损坏、摄像头故障
- Win10任务栏现在会推送微软Edge的PWA网络应用
- 微软于2025年10月14日结束对Win10的整体支持说法系首次提出
- 微软官方Win10系统忍者猫壁纸系列下载
- 子系统Win10下安装Linux子系统运行软件(win10启动linux)
- 子系统成功开启:Win10的Linux子系统之旅(win10使用linux)
- 如何在Win10中启动MySQL?(win10启动mysql)
- Win10轻松删除Linux系统(win10删除linux)
- Win10与Linux共存:畅玩双系统(win10运行linux)
- Win10系统下安装配置MSSQL服务器简易指南(win10的mssql)
- Win10操作系统下简易开启Redis服务(win10开启redis)
- 卸载Win10系统上的Redis(win10卸载redis)
- Win10上使用Redis的简单指南(win10使用redis)