FlyoutsFlyouts

Ein Flyout ist ein einfach ausblendbarer Container, der beliebige Benutzeroberfläche als Inhalt anzeigen kann.A flyout is a light dismiss container that can show arbitrary UI as its content. Flyouts können andere Flyouts oder Kontextmenüs enthalten, um eine geschachtelte Umgebung zu erstellen.Flyouts can contain other flyouts or context menus to create a nested experience.

In einem Flyout geschachteltes Kontextmenü

Abrufen der Windows-UI-BibliothekGet the Windows UI Library

WinUI-Logo

Die Bibliothek „Windows UI“ enthält ab Version 2.2 eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Weitere Informationen finden Sie unter Eckradius.For more info, see Corner radius. „WinUI“ ist ein NuGet-Paket, das neue Steuerelemente und Benutzeroberflächenfeatures für Windows-Apps enthält.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Weitere Informationen, einschließlich Installationsanweisungen, finden Sie unter Windows UI Library (Windows-UI-Bibliothek).For more info, including installation instructions, see Windows UI Library.

Plattform-APIs: Flyout-KlassePlatform APIs: Flyout class

Ist dies das richtige Steuerelement?Is this the right control?

  • Verwenden Sie keine Flyouts anstelle von QuickInfos oder Kontextmenüs.Don't use a flyout instead of tooltip or context menu. Verwenden Sie QuickInfos, um kurze Beschreibungen anzuzeigen, die nach einer festgelegten Zeit ausgeblendet werden.Use a tooltip to show a short description that hides after a specified time. Verwenden Sie ein Kontextmenü für kontextbezogene Aktionen im Zusammenhang mit UI-Elementen (beispielsweise Kopieren und Einfügen).Use a context menu for contextual actions related to a UI element, such as copy and paste.

Empfehlungen dazu, wann ein Flyout und wann ein Dialogfeld (ein ähnliches Steuerelement) verwendet werden sollte, finden Sie unter Dialogfelder und Flyouts.For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn Sie die App XAML-Steuerelementekatalog installiert haben, klicken Sie hier, um die App zu öffnen und ContentDialog oder Flyout in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.

Erstellen eines FlyoutsHow to create a flyout

Flyouts sind an bestimmte Steuerelemente angefügt.Flyouts are attached to specific controls. Sie können mit der Placement-Eigenschaft angeben, wo das Flyout angezeigt werden soll: Top (Oben), Left (Links), Bottom (Unten), Right (Rechts) oder Full (Vollständig).You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. Wenn Sie den vollständigen Platzierungsmodus auswählen, streckt die App das Flyout und zentriert es innerhalb des App-Fensters.If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Einige Steuerelemente (z.B. Button) verfügen über eine Flyout-Eigenschaft, mit der Sie ein Flyout oder Kontextmenü zuordnen können.Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.

In diesem Beispiel wird ein einfaches Flyout erstellt, das Text angezeigt, wenn die Schaltfläche gedrückt wird.This example creates a simple flyout that displays some text when the button is pressed.

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

Wenn das Steuerelement nicht über eine Flyout-Eigenschaft verfügt, können Sie stattdessen die angefügte Eigenschaft FlyoutBase.AttachedFlyout verwenden.If the control doesn't have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. In diesem Fall müssen Sie zudem die FlyoutBase.ShowAttachedFlyout-Methode aufrufen, um das Flyout anzuzeigen.When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.

In diesem Beispiel wird einem Bild ein einfaches Flyout hinzugefügt.This example adds a simple flyout to an image. Wenn der Benutzer auf das Bild tippt, zeigt die App das Flyout an.When the user taps the image, the app shows the flyout.

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

In den vorherigen Beispielen wurden die Flyouts inline definiert.The previous examples defined their flyouts inline. Sie können ein Flyout auch als statische Ressource definieren und sie dann mit mehreren Elementen verwenden.You can also define a flyout as a static resource and then use it with multiple elements. In diesem Beispiel wird ein komplizierteres Flyout erstellt, mit dem eine größere Version eines Bilds angezeigt wird, wenn auf die Miniaturansicht getippt wird.This example creates a more complicated flyout that displays a larger version of an image when its thumbnail is tapped.

<!-- 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);
}

Gestalten eines FlyoutsStyle a flyout

Um ein Flyout zu formatieren, ändern Sie den FlyoutPresenterStyle.To style a Flyout, modify its FlyoutPresenterStyle. In diesem Beispiel wird ein Absatz mit Textumbruch dargestellt. Zudem wird der Textblock für ein Bildschirmleseprogramm zugänglich gemacht.This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.

Zugängliches Flyout mit Textumbruch

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

Formatieren von Flyouts für 10-Foot-BenutzeroberflächenStyling flyouts for 10-foot experiences

Einfach ausblendbare Steuerelemente wie Flyouts erhalten den Tastatur- bzw. Gamepadfokus, bis sie nicht mehr angezeigt werden.Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. Um dieses Verhalten optisch zu kennzeichnen, werden diese einfach ausblendbaren Steuerelemente auf der Xbox als Überlagerung gezeichnet, wobei der Kontrast und die Helligkeit bzw. Sichtbarkeit der umgebenden Benutzeroberfläche verringert wird.To provide a visual cue for this behavior, light dismiss controls on Xbox draw an overlay that dims the contrast and visibility of out of scope UI. Dieses Verhalten kann mit der Eigenschaft LightDismissOverlayMode geändert werden.This behavior can be modified with the LightDismissOverlayMode property. Standardmäßig erhalten Flyouts auf der Xbox (jedoch nicht auf anderen Gerätefamilien) die einfach ausblendbare Überlagerung. Apps können jedoch durchsetzen, dass die Überlagerung stets Ein oder stets Aus ist.By default, flyouts will draw the light dismiss overlay on Xbox but not other device families, but apps can choose to force the overlay to be always On or always Off.

Flyout mit abgeblendeter Überlagerung

<MenuFlyout LightDismissOverlayMode="On">

Verhalten für einfaches AusblendenLight dismiss behavior

Flyouts können schnell mit einer einfachen Ausblendaktion geschlossen werden. Dazu zählen:Flyouts can be closed with a quick light dismiss action, including

  • Tippen außerhalb des FlyoutsTap outside the flyout
  • Drücken der ESC-TASTE auf der TastaturPress the Escape keyboard key
  • Drücken der Schaltfläche „Zurück“ des Systems (Hardware oder Software)Press the hardware or software system Back button
  • Drücken der B-TASTE auf dem GamepadPress the gamepad B button

Wird das Ausblenden durch Tippen vorgenommen, wird die Geste in der Regel absorbiert und nicht an die zugrunde liegende Benutzeroberfläche übergegeben.When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. Ist beispielsweise hinter einem geöffneten Flyout eine Schaltfläche sichtbar, wird durch einfaches Tippen durch den Benutzer das Flyout ausgeblendet, ohne jedoch diese Schaltfläche zu aktivieren.For example, if there's a button visible behind an open flyout, the user's first tap dismisses the flyout but does not activate this button. Um die Schaltfläche zu drücken, ist ein weiteres Tippen erforderlich.Pressing the button requires a second tap.

Sie können dieses Verhalten ändern, indem Sie die Schaltfläche als Pass-Through-Eingabeelement für das Flyout gestalten.You can change this behavior by designating the button as an input pass-through element for the flyout. Das Flyout wird wie oben beschriebenen durch die einfache Ausblendaktion geschlossen, gibt den Tippvorgang aber gleichzeitig an das entsprechende OverlayInputPassThroughElement weiter.The flyout will close as a result of the light dismiss actions described above and will also pass the tap event to its designated OverlayInputPassThroughElement. Erwägen Sie, dieses Verhalten zu übernehmen, um Interaktionen des Benutzers für ähnlich funktionierende Elemente zu beschleunigen.Consider adopting this behavior to speed up user interactions on functionally similar items. Wenn Ihre App eine Sammlung von Favoriten beinhaltet und jedes Element der Sammlung ein angefügtes Flyout enthält, ist davon auszugehen, dass Benutzer mit mehreren Flyouts in schneller Abfolge interagieren möchten.If your app has a favorites collection and each item in the collection includes an attached flyout, it's reasonable to expect that users may want to interact with multiple flyouts in rapid succession.

[!NOTE] Achten Sie darauf, kein Überlagerungseingabeelement mit Pass-Through festzulegen, da dies zu einer destruktiven Aktion führt.Be careful not to designate an overlay input pass-through element which results in a destructive action. Die Benutzer sind an diskrete, einfach ausblendbare Aktionen gewöhnt, die die primäre Benutzeroberfläche nicht aktivieren.Users have become habituated to discreet light dismiss actions which do not activate primary UI. Schließen, Löschen und ähnlich destruktive Schaltflächen sollten nicht über einfach ausblendbare Elemente aktiviert werden, um unerwartetes und störendes Verhalten zu vermeiden.Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.

Im folgenden Beispiel werden alle drei Schaltflächen in der Favoritenleiste durch einfaches Tippen aktiviert.In the following example, all three buttons inside FavoritesBar will be activated on the first tap.

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

Beispielcode herunterladenGet the sample code