飛出視窗

  • 發行項

飛出視窗是一個會消失關閉的容器，可顯示任意 UI 作為其內容。 飛出視窗可包含其他飛出視窗或操作功能表，以建立巢狀體驗。

這是正確的控制項嗎？

  • 請勿使用飛出視窗來取代工具提示或操作功能表。 使用工具提示顯示在指定時間後隱藏的簡短說明。 使用操作功能表執行與 UI 元素相關的關聯式動作，例如複製和貼上。

如需使用飛出視窗和使用對話方塊 (類似的控制項) 之時機的建議，請參閱對話方塊和飛出視窗。

UWP 和 WinUI 2

重要

本文中的資訊和範例針對使用 Windows App SDK 和 WinUI 3 的應用程式進行了最佳化，但通常適用於使用 WinUI 2 的 UWP 應用程式。 如需平台特定資訊和範例，請參閱 UWP API 參考。

本節包含您在 UWP 或 WinUI 2 應用程式中使用控制項所需的資訊。

此控制項的 API 位在 Windows.UI.Xaml.Controls 命名空間中。

建議使用最新的 WinUI 2 來取得所有控制項的最新樣式和範本。 WinUI 2.2 或更新版本包含此使用圓角之控制項的新範本。 如需詳細資訊，請參閱圓角半徑。

建立飛出視窗

開啟 WinUI 3 資源庫應用程式，並查看 Flyout 運作情形。

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 GitHub 上取得原始程式碼

飛出視窗會附加至特定控制項。 您可以使用 Placement 屬性指定要顯示飛出視窗的位置：頂端、左側、底部、右側或完整。 如果您選擇完整放置模式，應用程式會拉伸飛出視窗，並將其置於應用程式視窗的中心。 有些控制項 (例如，Button) 會提供可用來與飛出視窗或操作功能表產生關聯的 Flyout 屬性。

此範例會建立一個簡單的飛出視窗，按下按鈕時會顯示一些文字。

<Button Content="Click me">
  <Button.Flyout>
     <Flyout>
        <TextBlock Text="This is a flyout!"/>
     </Flyout>
  </Button.Flyout>
</Button>

如果控制項沒有 Flyout 屬性，則可以使用 FlyoutBase.AttachedFlyout 附加屬性。 執行此操作時，還需要呼叫 FlyoutBase.ShowAttachedFlyout 方法來顯示飛出視窗。

本範例會將簡單的飛出視窗新增至影像。 當使用者點選影像時，應用程式會顯示飛出視窗。

<Image Source="Assets/cliff.jpg" Width="50" Height="50"
  Margin="10" Tapped="Image_Tapped">
  <FlyoutBase.AttachedFlyout>
    <Flyout>
      <TextBlock Text="This is some text in a flyout."  />
    </Flyout>
  </FlyoutBase.AttachedFlyout>
</Image>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

先前的範例定義了其內嵌飛出視窗。 您也可以將飛出視窗定義為靜態資源，然後將其與多個元素搭配使用。 此範例建立一個更複雜的飛出視窗，當點選影像縮圖時，該飛出視窗會顯示更大的影像。

<!-- Declare the shared flyout as a resource. -->
<Page.Resources>
    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
        <!-- The flyout's DataContext must be the Image Source
             of the image the flyout is attached to. -->
        <Image Source="{Binding Path=Source}"
            MaxHeight="400" MaxWidth="400" Stretch="Uniform"/>
    </Flyout>
</Page.Resources>

<!-- Assign the flyout to each element that shares it. -->
<StackPanel>
    <Image Source="Assets/cliff.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/grapes.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/rainier.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</StackPanel>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

設定飛出視窗的樣式

若要設定飛出視窗的樣式，請修改其 FlyoutPresenterStyle。 此範例顯示了一段換行文字，並使螢幕助讀程式可以存取該文字區塊。

Accessible flyout with wrapping text

<Flyout>
  <Flyout.FlyoutPresenterStyle>
    <Style TargetType="FlyoutPresenter">
      <Setter Property="ScrollViewer.HorizontalScrollMode"
          Value="Disabled"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
      <Setter Property="IsTabStop" Value="True"/>
      <Setter Property="TabNavigation" Value="Cycle"/>
    </Style>
  </Flyout.FlyoutPresenterStyle>
  <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</Flyout>

設定 10 英呎體驗的飛出視窗樣式

像飛出視窗這樣的消失關閉控制項會將鍵盤和遊戲台焦點圈限在暫時性 UI 內，直到控制項關閉為止。 若要提供此行為的視覺提示，Xbox 上的消失關閉控制項將會繪製重疊，以使超出範圍 UI 的對比度和可見度變暗。 此行為可以使用 LightDismissOverlayMode 屬性進行修改。 根據預設，飛出視窗將會在 Xbox 上繪製消失關閉重疊，但不會在其他裝置系列上繪製，不過應用程式可以選擇將重疊強制為一律為 On 或一律為 Off。

Flyout with dimming overlay

<MenuFlyout LightDismissOverlayMode="On">

消失關閉行為

飛出視窗可以使用快速消失關閉動作來關閉，動作包括

  • 點選飛出視窗外部
  • 按下 Esc 鍵盤按鍵
  • 按下硬體或軟體系統 [上一頁] 按鈕
  • 按下遊戲台 B 按鈕

以點選來關閉時，這個手勢通常會沒入而無法傳遞至下面的 UI。 舉例說，如果已開啟的飛出視窗後面有可見的按鈕，使用者的第一個點選動作會關閉飛出視窗，但不會啟動此按鈕。 按下按鈕需要第二次點選。

您可以指定按鈕作為飛出視窗的輸入傳遞元素，來變更此行為。 飛出視窗將會因為上述消失關閉動作而關閉，還會將點選事件傳遞至其所指定的 OverlayInputPassThroughElement。 請考慮採用此行為，在功能類似的項目上加速使用者互動。 如果您的應用程式有我的最愛集合，而且集合中的每個項目都包含附加飛出視窗時，您可以合理預料使用者可能會希望與接連多個飛出視窗進行互動。

注意

請小心，不要指定會產生破壞性動作的重疊輸入傳遞元素。 使用者已經習慣於不會啟用主要 UI 的慎重消失關閉動作。 不應讓 [關閉]、[刪除] 或類似具破壞性的按鈕在消失關閉時啟動，以免發生非預期和破壞性的行為。

在下列範例中，FavoritesBar 中所有三個按鈕都會在第一次點選時啟動。

<Page>
    <Page.Resources>
        <Flyout x:Name="TravelFlyout" x:Key="TravelFlyout"
                OverlayInputPassThroughElement="{x:Bind FavoritesBar}">
            <StackPanel>
                <HyperlinkButton Content="Washington Trails Association"/>
                <HyperlinkButton Content="Washington Cascades - Go Northwest! A Travel Guide"/>
            </StackPanel>
        </Flyout>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="FavoritesBar" Orientation="Horizontal">
            <HyperlinkButton x:Name="PageLinkBtn">Bing</HyperlinkButton>
            <Button x:Name="Folder1" Content="Travel" Flyout="{StaticResource TravelFlyout}"/>
            <Button x:Name="Folder2" Content="Entertainment" Click="Folder2_Click"/>
        </StackPanel>
        <ScrollViewer Grid.Row="1">
            <WebView x:Name="WebContent"/>
        </ScrollViewer>
    </Grid>
</Page>

private void Folder2_Click(object sender, RoutedEventArgs e)
{
     Flyout flyout = new Flyout();
     flyout.OverlayInputPassThroughElement = FavoritesBar;
     ...
     flyout.ShowAt(sender as FrameworkElement);
{

取得範例程式碼