【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组件的用法。本文到此就要收笔了，有空再聊。