Freigeben über

Flyouts

  • Artikel

Ein Flyout ist ein einfach ausblendbarer Container, der beliebige Benutzeroberfläche als Inhalt anzeigen kann. Flyouts können andere Flyouts oder Kontextmenüs enthalten, um eine geschachtelte Umgebung zu erstellen.

Ist dies das richtige Steuerelement?

  • Verwenden Sie kein Flyout anstelle von QuickInfo oder Kontextmenü. Verwenden Sie eine QuickInfo, um eine kurze Beschreibung anzuzeigen, die nach einer bestimmten Uhrzeit ausgeblendet wird. Verwenden Sie ein Kontextmenü für kontextbezogene Aktionen im Zusammenhang mit einem UI-Element, z. B. Kopieren und Einfügen.

Empfehlungen dazu, wann ein Flyout und wann ein Dialogfeld (ein ähnliches Steuerelement) verwendet werden sollte, finden Sie unter Dialogfelder und Flyouts.

UWP und WinUI 2

Wichtig

Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.

Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.

APIs für dieses Steuerelement sind im Windows.UI.Xaml.Controls-Namespace vorhanden.

Wir empfehlen die Verwendung der neuesten WinUI 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente. WinUI 2.2 oder höher enthält eine neue Vorlage für dieses Steuerelement, die abgerundete Ecken verwendet. Weitere Informationen finden Sie unter Eckradius.

Erstellen eines Flyouts

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie das Flyout in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab

Flyouts sind an bestimmte Steuerelemente angefügt. Mit der Placement-Eigenschaft können Sie angeben, wo ein Flyout angezeigt wird: "Oben", "Links", "Unten", "Rechts" oder "Vollständig". Wenn Sie den Vollständigen Platzierungsmodus auswählen, streckt die App das Flyout und zentriert es innerhalb des App-Fensters. Einige Steuerelemente (z.B. Button) verfügen über eine Flyout-Eigenschaft, mit der Sie ein Flyout oder Kontextmenü zuordnen können.

In diesem Beispiel wird ein einfaches Flyout erstellt, das Text anzeigt, wenn die Schaltfläche gedrückt wird.

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

Wenn das Steuerelement nicht über eine Flyouteigenschaft verfügt, können Sie stattdessen die angefügte FlyoutBase.AttachedFlyout-Eigenschaft verwenden. In diesem Fall müssen Sie auch die FlyoutBase.ShowAttachedFlyout-Methode aufrufen, um das Flyout anzuzeigen.

In diesem Beispiel wird einem Bild ein einfaches Flyout hinzugefügt. Wenn der Benutzer auf das Bild tippt, zeigt die App das Flyout an.

<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 ihre Flyouts inline definiert. Sie können ein Flyout auch als statische Ressource definieren und dann mit mehreren Elementen verwenden. In diesem Beispiel wird ein komplizierteres Flyout erstellt, das eine größere Version eines Bilds anzeigt, wenn auf die Miniaturansicht getippt wird.

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

Formatieren eines Flyouts

Um ein Flyout zu formatieren, ändern Sie dessen FlyoutPresenterStyle. Dieses Beispiel zeigt einen Absatz des Umbruchs von Text und macht den Textblock für eine Bildschirmsprachausgabe zugänglich.

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

Einfach ausblendbare Steuerelemente wie Flyouts erhalten den Tastatur- bzw. Gamepadfokus, bis sie nicht mehr angezeigt werden. 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. Dieses Verhalten kann mit der Eigenschaft LightDismissOverlayMode geändert werden. 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.

Flyout mit abgeblendeter Überlagerung

<MenuFlyout LightDismissOverlayMode="On">

Verhalten für einfaches Ausblenden

Flyouts können schnell mit einer einfachen Ausblendaktion geschlossen werden. Dazu zählen:

  • Tippen außerhalb des Flyouts
  • Drücken der ESC-TASTE auf der Tastatur
  • Drücken der Schaltfläche „Zurück“ des Systems (Hardware oder Software)
  • Drücken der B-TASTE auf dem Gamepad

Wird das Ausblenden durch Tippen vorgenommen, wird die Geste in der Regel absorbiert und nicht an die zugrunde liegende Benutzeroberfläche übergegeben. 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. Um die Schaltfläche zu drücken, ist ein weiteres Tippen erforderlich.

Sie können dieses Verhalten ändern, indem Sie die Schaltfläche als Pass-Through-Eingabeelement für das Flyout gestalten. Das Flyout wird wie oben beschriebenen durch die einfache Ausblendaktion geschlossen, gibt den Tippvorgang aber gleichzeitig an das entsprechende OverlayInputPassThroughElement weiter. Erwägen Sie, dieses Verhalten zu übernehmen, um Interaktionen des Benutzers für ähnlich funktionierende Elemente zu beschleunigen. 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.

Hinweis

Achten Sie darauf, kein Überlagerungseingabeelement mit Pass-Through festzulegen, da dies zu einer destruktiven Aktion führt. Die Benutzer sind an diskrete, einfach ausblendbare Aktionen gewöhnt, die die primäre Benutzeroberfläche nicht aktivieren. Schließen, Löschen oder ähnliche destruktive Schaltflächen sollten nicht bei leichtem Ausblenden aktiviert werden, um unerwartetes und störendes Verhalten zu vermeiden.

Im folgenden Beispiel werden alle drei Schaltflächen in der Favoritenleiste durch einfaches Tippen aktiviert.

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