Dela via

Flyouts

En utfällning är en container som stängs lätt och kan visa vilket innehåll som helst av användargränssnittet. Utfällbara element kan innehålla andra utfällbara element eller snabbmenyer för att skapa en inbäddad upplevelse.

Är det här rätt kontroll?

  • Använd inte en utfällbar meny i stället för knappbeskrivning eller snabbmeny. Använd ett verktygstips för att visa en kort beskrivning som försvinner efter en angiven tid. Använd en snabbmeny för kontextuella åtgärder som är relaterade till ett användargränssnittselement, till exempel kopiera och klistra in.

Rekommendationer för när du ska använda en utfällningsmeny jämfört med en dialogruta (en liknande kontroll) finns i Dialoger och utfällningsmenyer.

Skapa ett popup-fönster

Öppna WinUI 3-galleriappen och se den utfällbara menyn i praktiken

WinUI 3-galleriikon WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Utfällbara fönster är kopplade till specifika kontroller. Du kan använda egenskapen Placering för att ange var en popup ska visas: Överkant, Vänster, Nederkant, Höger eller Fullskärm. Om du väljer läget Fullständig placering sträcker appen ut den utfällbara menyn och centrerar den i appfönstret. Vissa kontroller, till exempel Button, tillhandahåller en Flyout-egenskap som du kan använda för att associera en flyout eller snabbmeny.

Det här exemplet skapar en enkel utfällbar meny som visar text när knappen trycks in.

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

Om kontrollen inte har någon utfällningsegenskap kan du använda egenskapen FlyoutBase.AttachedFlyout i stället. När du gör det behöver du också anropa metoden FlyoutBase.ShowAttachedFlyout för att visa flyouten.

Det här exemplet lägger till en enkel utfällbar bild. När användaren trycker på bilden visar appen den utfällbara menyn.

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

I de föregående exemplen definierades deras flygmenyer direkt. Du kan också definiera utfällbara objekt som en statisk resurs och sedan använda den med flera element. Det här exemplet skapar en mer komplicerad popup som visar en större version av en bild när miniatyrbilden trycks.

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

Formatera en utfälld meny

För att styla en Flyout, ändra dess FlyoutPresenterStyle. Det här exemplet visar ett avsnitt med ombrytande text och gör texten tillgänglig för en skärmläsare.

Tillgänglig utfällbar meny med omslutande 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>

Utfällbara format för 10-fotsupplevelser

Lätt stänga kontroller som utfällbara trap tangentbord och gamepad fokus i deras tillfälliga användargränssnitt tills avvisas. För att ge ett visuellt tips för det här beteendet använder Xbox lättavbrytande kontroller som ritar ett överlägg som dämpar kontrasten och synligheten för det användargränssnitt som är utanför aktuellt omfång. Det här beteendet kan ändras med egenskapen LightDismissOverlayMode. Som standard ritar utfällbara paneler ljusdämpande överlägg på Xbox men inte på andra enhetsfamiljer, men appar kan välja att tvinga överlägget att alltid vara På eller alltid Av.

Utfällbara med nedtonad överlägg 

<MenuFlyout LightDismissOverlayMode="On">

Beteende för att stänga av ljus

Utfällbara objekt kan stängas med en snabb avstängningsåtgärd, inklusive

  • Tryck utanför den utfällbara menyn
  • Tryck på Escape-tangenten
  • Tryck på bakåtknappen för maskin- eller programvarusystem
  • Tryck på gamepad B-knappen

När du stänger med en tryckning absorberas den här gesten vanligtvis och skickas inte vidare till användargränssnittet under. Om det till exempel finns en knapp som är synlig bakom en öppen urvalsmeny, stänger användarens första tryck urvalsmenyn men aktiverar inte den här knappen. Om du trycker på knappen måste du trycka en gång till.

Du kan ändra det här beteendet genom att ange knappen som ett vidarekopplingsingångselement för den utfällbara panelen. Den utfällbara menyn stängs som ett resultat av de åtgärder för att stänga ljuset som beskrivs ovan och skickar även tryckhändelsen till dess avsedda OverlayInputPassThroughElement. Överväg att använda det här beteendet för att påskynda användarinteraktioner på funktionellt liknande objekt. Om din app har en favoritsamling och varje objekt i samlingen innehåller en bifogad utfällning är det rimligt att förvänta sig att användarna kanske vill interagera med flera utfällbara objekt i snabb följd.

Anmärkning

Var noga med att inte ange ett genomströmningselement för överlägg som resulterar i en destruktiv åtgärd. Användare har blivit vana vid diskreta åtgärder för att stänga av ljus som inte aktiverar det primära användargränssnittet. Stäng, Ta bort eller liknande destruktiva knappar bör inte aktiveras vid ljusstängning för att undvika oväntat och störande beteende.

I följande exempel aktiveras alla tre knapparna i FavoritesBar vid första tryckningen.

<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);
{
  • Last updated on