浮出控件Flyout

30-UWP开发-浮出控件Flyout

浮出控件 Flyout 是一个轻型的辅助型的弹出控件，通常作为提示或者要求用户进行相关的交互来使用。它和弹出框 MessageDialog 有很大区别。Flyout 是一个辅助控件，需要与其他控件结合起来才能使用；其次取消的规则不一样，Flyout 可以通过单击或者在外面点击都可以轻松清除浮出控件。

语法

<Button>
    <Button.Flyout>
        <Flyout>
            <!--浮出的UI内容-->
        </Flyout>
    </Button.Flyout>
</Button>Code language: HTML, XML (xml)

我们可以看得出 Flyout 本身就是一种辅助性的控件，所以它必须和其他控件结合使用。通常 Flyout 将附加到一个 Button 控件上，直接响应按钮的单击事件，不需要写 C# 代码就可以实现。非 Button 的控件也可以使用 Flyout。

练习一下

TextBlock 触发 Flyout。Button 默认就绑上了 Flyout。

<Button
    x:Name="button"
    Content="Button"
    HorizontalAlignment="Left"
    Margin="530,175,0,0"
    VerticalAlignment="Top"
    Height="115"
    Width="200">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <Rectangle Fill="Brown" Width="400" Height="400"/>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

<TextBlock
    x:Name="textBlock"
    HorizontalAlignment="Left"
    Margin="70,60,0,0"
    TextWrapping="Wrap"
    Text="点击我"
    VerticalAlignment="Top"
    Height="75"
    Width="185"
    FontSize="45"
    Tapped="textBlock_Tapped">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <StackPanel>
                <TextBox Width="300"/>
                <Button>确定</Button>
            </StackPanel>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>Code language: HTML, XML (xml)

private void textBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement frameworkElement = sender as FrameworkElement;
    if (frameworkElement != null)
    {
        FlyoutBase.ShowAttachedFlyout(frameworkElement);
    }
}Code language: JavaScript (javascript)

Flyout 有两种创建方式：一种是 Button 控件的 Flyout 属性；另外一种是通过 FlyoutBase.AttachedFlyout 附加属性给任何的 FrameworkElement 对象来添加。

Flyout 控件的六种不同类型：

1. Flyout
2. DatePickerFlyout 和 TimePickerFlyout
3. PickerFlyout 和 ListPickerFlyout
4. MenuFlyout