Riquadri a comparsaFlyouts

Un riquadro a comparsa è un contenitore con elementi che scompaiono quando si tocca lo schermo che può visualizzare un'interfaccia utente arbitraria come contenuto.A flyout is a light dismiss container that can show arbitrary UI as its content. I riquadri a comparsa possono contenere altri riquadri a comparsa o menu di scelta rapida per creare un'esperienza annidata.Flyouts can contain other flyouts or context menus to create a nested experience.

Menu di scelta rapida annidato all'interno di un riquadro a comparsa

Ottenere la libreria dell'interfaccia utente di WindowsGet the Windows UI Library

Logo WinUI

La libreria dell'interfaccia utente di Windows 2.2 o versioni successive include un nuovo modello per questo controllo che usa angoli arrotondati.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Per altre informazioni, vedere Raggio dell'angolo.For more info, see Corner radius. WinUI è un pacchetto NuGet che contiene nuovi controlli e funzionalità dell'interfaccia utente per le app di Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows.For more info, including installation instructions, see Windows UI Library.

API della piattaforma: classe FlyoutPlatform APIs: Flyout class

È il controllo giusto?Is this the right control?

  • Non usare un riquadro a comparsa al posto di una descrizione comando o un menu di scelta rapida.Don't use a flyout instead of tooltip or context menu. Usa una descrizione comando per visualizzare una breve descrizione che scompare dopo un intervallo di tempo specificato.Use a tooltip to show a short description that hides after a specified time. Usa un menu di scelta rapida per azioni contestuali correlate a un elemento dell'interfaccia utente, ad esempio Copia e Incolla.Use a context menu for contextual actions related to a UI element, such as copy and paste.

Per indicazioni su quando usare un riquadro a comparsa e quando usare una finestra di dialogo (un controllo simile), vedi Finestre di dialogo e riquadri a comparsa.For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app Raccolta di controlli XAML, fai clic qui per aprirla e vedere ContentDialog o Flyout in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.

Come creare un riquadro a comparsaHow to create a flyout

I riquadri a comparsa sono associati a controlli specifici.Flyouts are attached to specific controls. Puoi usare la proprietà Placement per specificare una posizione di visualizzazione del riquadro a comparsa: in alto, a sinistra, in basso, a destra o a schermo intero.You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. Se selezioni la modalità di posizionamento a schermo intero, l'app estende il riquadro a comparsa e lo centra all'interno della finestra dell'app.If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Alcuni controlli, come Button, forniscono una proprietà Flyout che puoi usare per associare un riquadro a comparsa o un menu di scelta rapida.Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.

Questo esempio crea un riquadro a comparsa semplice che visualizza un testo quando viene premuto il pulsante.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>

Se il controllo non ha una proprietà Flyout, puoi usare la proprietà associata FlyoutBase.AttachedFlyout.If the control doesn't have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. In questo caso, devi anche chiamare il metodo FlyoutBase.ShowAttachedFlyout per mostrare il riquadro a comparsa.When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.

Questo esempio aggiunge un riquadro a comparsa semplice a un'immagine.This example adds a simple flyout to an image. Quando l'utente tocca l'immagine, l'app mostra il riquadro a comparsa.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);
}

Negli esempi precedenti i riquadri a comparsa sono stati definiti inline.The previous examples defined their flyouts inline. Puoi anche definire un riquadro a comparsa come risorsa statica e quindi usarlo con più elementi.You can also define a flyout as a static resource and then use it with multiple elements. Questo esempio crea un riquadro a comparsa più complesso che visualizza una versione più grande di un'immagine quando un utente tocca l'anteprima.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);
}

Definire lo stile di un riquadro a comparsaStyle a flyout

Per definire lo stile di un riquadro a comparsa, modificane l'elemento FlyoutPresenterStyle.To style a Flyout, modify its FlyoutPresenterStyle. Questo esempio mostra un paragrafo di testo con ritorno a capo e rende il blocco di testo accessibile a un'utilità per la lettura dello schermo.This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.

Riquadro a comparsa accessibile con testo a capo

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

Applicazione di stili ai riquadri a comparsa per esperienze di interazione da 3 metriStyling flyouts for 10-foot experiences

I controlli che scompaiono quando si tocca lo schermo, come il riquadro a comparsa, bloccano lo stato attivo della tastiera e del game pad all'interno della loro interfaccia utente temporanea fino a quando non vengono chiusi.Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. Per fornire un segnale visivo di questo comportamento, su Xbox i controlli che scompaiono quando si tocca lo schermo disegnano una sovrimpressione che attenua il contrasto e la visibilità dell'interfaccia utente esterna all'ambito.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. Questo comportamento può essere modificato con la proprietà LightDismissOverlayMode.This behavior can be modified with the LightDismissOverlayMode property. Per impostazione predefinita, i riquadri a comparsa disegnano la sovrimpressione per i controlli che scompaiono quando si tocca lo schermo su Xbox ma non in altre famiglie di dispositivi. Tuttavia, le app possono scegliere di forzare la sovrimpressione in modo che sia sempre On o sempre Off.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.

Riquadro a comparsa con sovrimpressione attenuata

<MenuFlyout LightDismissOverlayMode="On">

Comportamento di scomparsa quando si tocca lo schermoLight dismiss behavior

I riquadri a comparsa possono essere chiusi con una rapida azione che fa scomparire gli elementi quando si tocca lo schermo, inclusi:Flyouts can be closed with a quick light dismiss action, including

  • Tocco all'esterno del riquadro a comparsaTap outside the flyout
  • Pressione di ESC sulla tastieraPress the Escape keyboard key
  • Pressione del pulsante Indietro di sistema hardware o softwarePress the hardware or software system Back button
  • Pressione del pulsante B del game padPress the gamepad B button

Quando la chiusura è effettuata mediante il tocco, il movimento è tipicamente assorbito e non è passato all'interfaccia utente sottostante.When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. Ad esempio, se è presente un pulsante visibile dietro un riquadro a comparsa aperto, il primo tocco da parte dell'utente comporterà la chiusura del riquadro a comparsa, ma non l'attivazione del pulsante.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. La pressione del pulsante richiederà un secondo tocco.Pressing the button requires a second tap.

Questo comportamento può essere modificato definendo il pulsante come un elemento di passaggio dell'input per il riquadro a comparsa.You can change this behavior by designating the button as an input pass-through element for the flyout. In virtù delle azioni che fanno scomparire gli elementi quando si tocca lo schermo descritte in precedenza, il riquadro a comparsa sarà chiuso e passerà anche l'evento di tocco al proprio oggetto OverlayInputPassThroughElement designato.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. Valuta l'opportunità di adottare tale comportamento per velocizzare le interazioni utente per elementi analoghi a livello funzionale.Consider adopting this behavior to speed up user interactions on functionally similar items. Se l'app dispone di una raccolta di Preferiti e ciascun elemento nella raccolta include un riquadro a comparsa associato, è ragionevole presupporre che gli utenti possano voler interagire con più riquadri a comparsa in rapida successione.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] Fai attenzione a non designare un elemento di passaggio dell'input in sovrimpressione che comporti un'azione distruttiva.Be careful not to designate an overlay input pass-through element which results in a destructive action. Gli utenti si sono abituati alla prudenza rispetto ad azioni che comportano la scomparsa degli elementi e che non attivano l'interfaccia utente principale.Users have become habituated to discreet light dismiss actions which do not activate primary UI. Chiudi, Elimina o altri pulsanti distruttivi analoghi non dovrebbero attivarsi quando si usano elementi che scompaiono quando si tocca lo schermo in modo da evitare comportamenti inattesi e distruttivi.Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.

Nell'esempio seguente tutti e tre i pulsanti all'interno di FavoritesBar saranno attivati al primo tocco.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);
{

Scaricare il codice di esempioGet the sample code