【Win 10应用开发】自定义浮动层——Flyout
最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”。
好,进入正题。
弹出层有三种。
第一种是ContentDialog,即内容对话框,它其实类似于模态对话框,弹出后会覆盖整个窗口区域,并且总在最前面,你只有关闭了对话框之后才能进行其他操作。
第二种就是提示文本,比如在一个Windows窗口上,你把鼠标移到窗口的关闭按钮上,稍稍停一下,你会下面有提示文本出来,告诉这是关闭按钮。
第三种有点像提示文本,但它不会自动消息,而是等你点击了其他对象后它会消失,很像下拉列表控件的弹出框。
Flyout类属于第三种弹出层,或者叫浮动层吧,在HTML中常常用div来实现。Flyout类里面其实封装了一个ContentControl控件,用来显示UI内容,这个内容控件是从ContentControl类派生的,叫FlyoutPresenter。如果想修改这个被封装了的内容控件的样式,就要通过Flyout类的FlyoutPresenterStyle属性来完成,该属性所设置的Style会被应用到内部的FlyoutPresenterStyle控件实例上。
即,Flyout上弹出来的可视化部分是可以由开发者自己来定义的,通过Flyout.Content属性来设定,只要是UIElement的子类均可。
Flyout是从FlyoutBase派生出来的。使用Flyout的最简单方法是和Button控件一起协作,因为Button类有一个Flyout属性,只要向该属性设置一个FlyoutBase的子类的实例,不用任何代码处理,连Click事件也不用处理,运行后就可以通过点击按钮来显示浮出层。
举个例子:
<Button Content="fly out">
<Button.Flyout>
<Flyout>
<TextBlock Text="白日放歌须纵酒" Foreground="Blue" FontSize="25"/>
</Flyout>
</Button.Flyout>
</Button>
Flyout上直接放了一个显示文本的TextBlock对象。在程序运行阶段,只要单击一下按钮,就会弹出来。如下图。
大伙伴们也发现,只有Button类才有Flyout属性,如果像HyperlinkButton这样的控件,没有那个Flyout属性,该如何处理呢。没事,FlyoutBase类有个附加属性,可以把FlyoutBase实例附加到某个可视化对象上。看例子吧。
<HyperlinkButton Content="click me" Click="OnLinkClick" Margin="0,25" >
<FlyoutBase.AttachedFlyout>
<Flyout>
<Ellipse Width="32" Height="32" Fill="Red" />
</Flyout>
</FlyoutBase.AttachedFlyout>
</HyperlinkButton>
这时候,它不会自动处理,如果不写代码的话,运行程序后,你点击链接是没有反应的,所以要处理其单击事件。
private void OnLinkClick(object sender, RoutedEventArgs e)
{
HyperlinkButton link = sender as HyperlinkButton;
FlyoutBase.ShowAttachedFlyout(link);
}
FlyoutBase有个静态方法,叫ShowAttachedFlyout,方法参数是附加了FlyoutBase对象的元素,就我们上面的例子来说,是HyperlinkButton元素上附加了一个Flyout实例,因此,在调用HyperlinkButton方法时,要把HyperlinkButton实例传递方法参数。
方法会自动找到附加在HyperlinkButton上的Flyout实例,并显示出来。结果如下图。
上文我提到过,如果要自定义Flyout的控件容器的样式,可以设置FlyoutPresenterStyle属性,所用到的Style的TargetType是FlyoutPresenter类。看看例子。
<Button Content="点一点,看一看">
<Button.Flyout>
<Flyout Placement="Right">
<TextBlock Text="青春作伴好还乡" Foreground="LightGray" FontSize="24" />
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="Purple"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>
Placement属性用来指定浮出层的位置,是相对于这个Button而言的位置。本例中,让Flyout出现在按钮的右方。
结果如图。
好了,上面几个简单到无法再简单的例子,向大伙伴们演示了Flyout组件的用法。本文到此就要收笔了,有空再聊。
【Win 10应用开发】自定义浮动层——Flyout的更多相关文章
- 【Win 10 应用开发】RTM版的UAP项目解剖
Windows 10 发布后,其实SDK也偷偷地在VS的自定义安装列表中出现了,今天开发人员中心也更新了下载.正式版的SDK在API结构上和以前预览的时候是一样的,只是版本变成10240罢了,所以大家 ...
- 【Win 10 应用开发】启动远程设备上的应用
这个功能必须在“红石-1”(build 14393)以上的系统版中才能使用,运行在一台设备上的应用,可以通过URI来启动另一台设备上的应用.激活远程应用需要以下前提: 系统必须是build 14393 ...
- 【Win 10 应用开发】导入.pfx证书
这个功能其实并不常用,一般开发较少涉及到证书,不过,简单了解一下还是有必要的. 先来说说制作测试证书的方法,这里老周讲两种方法,可以生成用于测试的.pfx文件. 产生证书,大家都知道有个makecer ...
- 【Win 10应用开发】Adaptive磁贴模板的XML文档结构
在若干天之前,老周给大家讲了Adaptive Toast通知的XML模板,所以相应地,今天老周给大家介绍一下Adaptive磁贴的新XML模板. 同样道理,你依旧可以使用8.1时候的磁贴模板,在win ...
- 【Win 10应用开发】认识一下UAP项目
Windows 10 SDK预览版需要10030以上版本号的Win 10预览版系统才能使用.之前我安装的9926的系统,然后安装VS 2015 CTP 6,再装Win 10 SDK,但是在新建项目后, ...
- 【Win 10 应用开发】在代码中加载文本资源
记得前一次,老周给大伙,不,小伙伴们介绍了如何填写 .resw 文件,并且在 XAML 中使用 x:Uid 标记来加载.也顺便给大伙儿分析了运行时是如何解析 .resw 文件的. 本来说好了,后续老周 ...
- 【Win 10 应用开发】UI Composition 札记(一):视图框架的实现
在开始今天的内容之前,老周先说一个问题,这个问题记得以前有人提过的. 设置 Windows.ApplicationModel.Core.CoreApplicationView.TitleBar.Ext ...
- 【Win 10应用开发】延迟共享
延迟共享是啥呢,这么说吧,就是在应用程序打开共享面板选择共享目标时,不会设置要共享的数据,而是等到共享目标请求数据时,才会发送数据,而且,延迟操作可以在后台进行. 这样说似乎过于抽象,最好的诠释方法, ...
- 【Win 10 应用开发】Toast通知激活应用——前台&后台
老周最近热衷于讲故事,接下来还是讲故事时间. 有人问我:你上大学的时候,有加入过学生会吗?读大学有没有必要加入学生会? 哎哟,这怎么回答呢,从短期来说,加入学生会有点用,至少可以娱乐一下,运气好的话, ...
随机推荐
- Fis3的前端工程化之路[三大特性篇之资源定位]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
- H5坦克大战之【建造敌人的坦克】
公司这几天在准备新版本的上线,今天才忙里偷闲来写这篇博客.接着上一篇的"H5坦克大战之[玩家控制坦克移动2]"(http://www.cnblogs.com/zhouhuan/ ...
- 闲来无聊,研究一下Web服务器 的源程序
web服务器是如何工作的 1989年的夏天,蒂姆.博纳斯-李开发了世界上第一个web服务器和web客户机.这个浏览器程序是一个简单的电话号码查询软件.最初的web服务器程序就是一个利用浏览器和web服 ...
- 查看w3wp进程占用的内存及.NET内存泄露,死锁分析
一 基础知识 在分析之前,先上一张图: 从上面可以看到,这个w3wp进程占用了376M内存,启动了54个线程. 在使用windbg查看之前,看到的进程含有 *32 字样,意思是在64位机器上已32位方 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 如何在网页中提取Email地址
开博好久了,今天第一次发表技术文档,之前总是将一些好的事例保存在电脑,时间久了找起来也很麻烦,所以还是放在博客里进行归类比较方便,这样也能将自己在学习过程中的一些心得体会分享给大家,也能给需要的人一点 ...
- UE4新手引导入门教程
请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf
- 我这么玩Web Api(二):数据验证,全局数据验证与单元测试
目录 一.模型状态 - ModelState 二.数据注解 - Data Annotations 三.自定义数据注解 四.全局数据验证 五.单元测试 一.模型状态 - ModelState 我理解 ...
- DOM的小练习,两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
- MediatorPattern(中介者模式)
/** * 中介者模式 * @author TMAC-J * 研究了这么多设计模式,觉得无非就是几点: * 1.若两个类有耦合关系,设立一个中间类,处理两个类的关系,把两个类的耦合降低 * 2.面向接 ...