Delen via

Uitklapmenu's

Een flyout is een licht afsluitbare container die willekeurige gebruikersinterface-elementen als inhoud kan weergeven. Flyouts kunnen andere flyouts of contextmenu's bevatten om een geneste structuur te creëren.

Is dit de juiste controle?

  • Gebruik geen flyout in plaats van knopinfo of contextmenu. Gebruik een tooltip om een korte beschrijving weer te geven die na een opgegeven tijd verdwijnt. Gebruik een contextmenu voor contextuele acties die betrekking hebben op een UI-element, zoals kopiëren en plakken.

Zie Dialoogvensters en flyouts voor aanbevelingen over wanneer u een flyout of een dialoogvenster (een vergelijkbaar besturingselement) moet gebruiken.

Een flyout maken

Open de App WinUI 3 Gallery en bekijk de Flyout in actie

De WinUI 3 Gallery-app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op

Flyouts zijn gekoppeld aan specifieke besturingselementen. U kunt de eigenschap Plaatsing gebruiken om op te geven waar een flyout wordt weergegeven: Boven, Links, Onder, Rechts of Volledig. Als u de modus Volledige plaatsing selecteert, rekt de app de flyout uit en centreert deze in het app-venster. Sommige bedieningselementen, zoals knop , bieden een eigenschap *flyout* die u kunt gebruiken om een *flyout* of contextmenu te koppelen.

In dit voorbeeld wordt een eenvoudige flyout gemaakt waarin tekst wordt weergegeven wanneer de knop wordt ingedrukt.

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

Als het besturingselement geen flyout-eigenschap heeft, kunt u in plaats daarvan de gekoppelde eigenschap FlyoutBase.AttachedFlyout gebruiken. Wanneer u dit doet, moet u ook de FlyoutBase.ShowAttachedFlyout-methode aanroepen om de flyout weer te geven.

In dit voorbeeld wordt een eenvoudige flyout toegevoegd aan een afbeelding. Wanneer de gebruiker op de afbeelding tikt, wordt de flyout weergegeven in de app.

<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 de vorige voorbeelden zijn de uitschuifmenu's inline gedefinieerd. U kunt ook een flyout definiëren als een statische resource en deze vervolgens gebruiken met meerdere elementen. In dit voorbeeld wordt een complexere flyout gemaakt waarin een grotere versie van een afbeelding wordt weergegeven wanneer de miniatuur wordt aangetikt.

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

Een flyout stylen

Als u een flyout wilt stylen, kunt u de bijbehorende FlyoutPresenterStyle aanpassen. In dit voorbeeld ziet u een alinea met doorlopende tekst en is het tekstblok toegankelijk voor een schermlezer.

Toegankelijk uitklapmenu met tekstterugloop 

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

Styling fly-outs voor tv-ervaringen op 10 voet afstand

Licht wegklikkelementen zoals flyout traps vangen toetsenbord- en gamepadfocus in hun tijdelijke gebruikersinterface, totdat ze worden weggenomen. Als u een visuele aanwijzing voor dit gedrag wilt bieden, sluit u besturingselementen op Xbox af met een overlay waarmee het contrast en de zichtbaarheid van de gebruikersinterface buiten het bereik worden gedimd. Dit gedrag kan worden gewijzigd met de LightDismissOverlayMode eigenschap. Flyouts tekenen standaard de licht-uitschakeloverlay op Xbox, maar niet op andere apparaatfamilies, hoewel apps kunnen kiezen om de overlay altijd Aan te of altijd Uit te .

Flyout met verduisteringsoverlay 

<MenuFlyout LightDismissOverlayMode="On">

Gedrag van het negeren van licht

Flyouts kunnen worden gesloten met een snelle lichte afsluitactie, waaronder

  • Tik buiten het uitklapmenu
  • Druk op de toets Escape-toetsenbord
  • Druk op de knop Terug van het hardware- of softwaresysteem
  • Druk op de gamepad B-knop

Wanneer u met een tik sluit, wordt deze beweging doorgaans opgenomen en wordt deze niet doorgegeven aan de gebruikersinterface eronder. Als er bijvoorbeeld een knop zichtbaar is achter een geopende flyout, sluit de eerste tik van de gebruiker de flyout, maar activeert deze knop niet. Als u op de knop drukt, hebt u een tweede tik nodig.

U kunt dit gedrag wijzigen door de knop als input-pass-through-element aan te wijzen voor de flyout. De flyout wordt gesloten als gevolg van de hierboven beschreven acties voor het negeren van het licht en zal ook de tap-gebeurtenis doorgeven aan de aangewezen OverlayInputPassThroughElement. Overweeg dit gedrag te gebruiken om gebruikersinteracties voor functioneel vergelijkbare items te versnellen. Als uw app een verzameling favorieten heeft en elk item in de verzameling een bijgevoegde flyout bevat, is het redelijk om te verwachten dat gebruikers snel met meerdere flyouts willen werken.

Opmerking

Wees voorzichtig om geen overlay-invoer-passthrough-element aan te wijzen dat resulteert in een destructieve actie. Gebruikers zijn gewend geraakt aan discrete lichte afwijsacties die de primaire gebruikersinterface niet activeren. Sluit-, Verwijder- of vergelijkbare destructieve knoppen mogen niet worden gebruikt bij licht sluiten om onverwacht en verstorend gedrag te voorkomen.

In het volgende voorbeeld worden alle drie de knoppen in De werkbalk Favorieten geactiveerd bij de eerste tik.

<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 en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die Gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

API's voor deze controle bevinden zich in de naamruimte Windows.UI.Xaml.Controls.

U wordt aangeraden de nieuwste WinUI 2 te gebruiken om de meest recente stijlen en sjablonen voor alle besturingselementen te verkrijgen. WinUI 2.2 of hoger bevat een nieuwe sjabloon voor dit besturingselement dat gebruikmaakt van afgeronde hoeken. Zie Hoekstraal voor meer informatie.