Windows 8.1 新增控件之 Flyout - gnielee－IT工程師數位筆記本

文章出處

本篇為大家介紹Flyout 控件，Flyout 屬于一種輕量級交互控件，可以支持信息提示或用戶交互。與傳統Dialog 控件不同的是Flyout 控件可通過直接點擊對話框外部區域忽略。

Flyout 控件一般常與Button 結合使用，所以Button 控件默認增加了Flyout 屬性，當使用Flyout 屬性后，點擊Button 時就會自動顯示Flyout 內容，如下代碼所示：

<Button Content="Delete Files">
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock FontSize="15" Text="All the files will be deteled, Are you sure?" />
                <Button Content="Yes, delete all!"/>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

在Flyout 中仍然可以按需要添加各種控件，例如TextBlock、Button等。運行點擊“Delete Files”按鈕后，Flyout 內容將自動顯示，如下圖：

對于非Button 控件如何使用Flyout 呢，可以利用FlyoutBase.AttachedFlyout 屬性為FrameworkElement 對象添加Flyout 功能，當然需要為該控件增加相應的觸發事件來啟動Flyout 功能。如下代碼：

<TextBox Width="500" HorizontalAlignment="Left" GotFocus="TextBox_GotFocus">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBlock Text="You can input 50 words here."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBox>

private void TextBox_GotFocus(object sender, RoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

運行效果如下圖：

除此之外，也可以將Flyout 定義為StaticResource 供多種控件共享使用。

<Page.Resources>
    <Flyout x:Key="FlyoutResources">
        <StackPanel>
            <TextBlock Text="This is a Flyout."/>
        </StackPanel>
    </Flyout>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel Margin="50" Orientation="Horizontal" VerticalAlignment="Top">
        <Button Content="Click Button" Flyout="{StaticResource FlyoutResources}"/>
        <TextBox FlyoutBase.AttachedFlyout="{StaticResource FlyoutResources}" Margin="50,20"
                 Height="20" Width="150" HorizontalAlignment="Left" GotFocus="TextBox_GotFocus"/>
    </StackPanel>
</Grid>