码迷,mamicode.com
首页 > Windows程序 > 详细

【Win 10应用开发】自定义浮动层——Flyout

时间:2015-09-21 19:35:52      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:

最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”。

好,进入正题。

弹出层有三种。

第一种是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

标签:

原文地址:http://www.cnblogs.com/tcjiaan/p/4826858.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!