彈出視窗

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

這是正確的控制項嗎？

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

如需關於何時該使用浮出視窗與使用對話方塊（類似的控制項）的建議，請參閱對話方塊和浮出視窗。

建立飛出視窗

• 重要 API：Flyout 類別、Button.Flyout 屬性

開啟 WinUI 3 資源庫應用程式，並查看彈出視窗的效果

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。 此範例顯示了一段換行文字，並使螢幕助讀程式可以存取該文字區塊。

<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。

<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);
{

UWP 和 WinUI 2

重要

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

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

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

• UWP API：Flyout 類別、Button.Flyout 屬性
• 開啟 WinUI 2 資源庫應用程式，並查看 Flyout 運作情形。 WinUI 2 Gallery應用程式包含大部分 WinUI 2 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式，或在 Github 上取得原始程式碼。

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

相關文章

• 工具提示
• 功能表和快捷功能表
• Flyout 類別
• ContentDialog 類別