【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组件的用法。本文到此就要收笔了,有空再聊。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战