Menus volantsFlyouts

Un menu volant est un conteneur d’abandon interactif capable d’afficher une interface utilisateur arbitraire en tant que contenu.A flyout is a light dismiss container that can show arbitrary UI as its content. Des menus volants peuvent contenir d’autres menus volants ou des menus contextuels pour créer une expérience imbriquée.Flyouts can contain other flyouts or context menus to create a nested experience.

Menu contextuel imbriqué dans un menu volant

Obtenir la bibliothèque d’interface utilisateur WindowsGet the Windows UI Library

Logo WinUI

La bibliothèque d’interface utilisateur Windows version 2.2 ou ultérieure inclut pour ce contrôle un nouveau modèle qui utilise des angles arrondis.Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Pour plus d’informations, consultez Rayons des angles.For more info, see Corner radius. WinUI est un package NuGet qui contient de nouveaux contrôles et des fonctionnalités d’interface utilisateur pour les applications Windows.WinUI is a NuGet package that contains new controls and UI features for Windows apps. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows.For more info, including installation instructions, see Windows UI Library.

API de plateforme : Classe FlyoutPlatform APIs: Flyout class

Est-ce le contrôle approprié ?Is this the right control?

  • N’utilisez pas de menu volant à la place d’une info-bulle ou d’un menu contextuel.Don't use a flyout instead of tooltip or context menu. Utilisez une info-bulle pour afficher une brève description qui disparaît après une durée spécifiée.Use a tooltip to show a short description that hides after a specified time. Utilisez un menu contextuel pour les actions contextuelles liées à un élément de l’interface utilisateur, comme copier et coller.Use a context menu for contextual actions related to a UI element, such as copy and paste.

Pour savoir quand utiliser une boîte de dialogue ou un menu volant (contrôle similaire), voir Boîtes de dialogue et menus volants.For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.

ExemplesExamples

Galerie de contrôles XAMLXAML Controls Gallery
XAML controls gallery

Si vous disposez de l’application Galerie de contrôles XAML, cliquez ici pour ouvrir l’application et voir l’objet ContentDialog ou Flyout en action.If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.

Procédure pour créer un menu volantHow to create a flyout

Les menus volants sont attachés à des contrôles spécifiques.Flyouts are attached to specific controls. Vous pouvez utiliser la propriété Placement pour spécifier l’emplacement où s’affiche le menu volant : Haut, Gauche, Bas, Droite ou Plein.You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. Si vous sélectionnez le mode de placement Plein, l’application étire le menu volant et le centre dans la fenêtre d’application.If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Certains contrôles, tels que Button, fournissent une propriété Flyout que vous pouvez utiliser pour associer un menu volant ou un menu contextuel.Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.

Cet exemple crée un menu volant simple qui affiche du texte quand l’utilisateur appuie sur le bouton.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>

Si le contrôle n’a pas de propriété Flyout, vous pouvez utiliser à la place la propriété FlyoutBase.AttachedFlyout jointe.If the control doesn't have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. Dans ce cas, vous devez également appeler la méthode FlyoutBase.ShowAttachedFlyout pour afficher le menu volant.When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.

Cet exemple ajoute un menu volant simple à une image.This example adds a simple flyout to an image. Quand l’utilisateur appuie sur l’image, l’application affiche le menu volant.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);
}

Les exemples précédents ont défini des menus volants insérés.The previous examples defined their flyouts inline. Vous pouvez également définir un menu volant en tant que ressource statique, puis l’utiliser avec plusieurs éléments.You can also define a flyout as a static resource and then use it with multiple elements. Cet exemple crée un menu volant plus compliqué qui affiche une version agrandie d’une image quand l’utilisateur appuie sur sa vignette.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);
}

Appliquer un style à un menu volantStyle a flyout

Pour appliquer un style à un menu volant, modifiez sa propriété FlyoutPresenterStyle.To style a Flyout, modify its FlyoutPresenterStyle. Cet exemple montre un paragraphe d’habillage de texte et rend le bloc de texte accessible à un lecteur d’écran.This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.

Menu volant accessible avec renvoi à la ligne automatique

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

Application de styles aux menus volants pour des expériences à 3 mètresStyling flyouts for 10-foot experiences

Les contrôles d’abandon interactif comme les menus volants captent les éléments sélectionnés à l’aide du clavier et de la manette de jeu dans leur interface utilisateur temporaire, jusqu’à la disparition de celle-ci.Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. Pour fournir une indication visuelle de ce comportement, les contrôles d’abandon interactif sur la Xbox dessinent une superposition qui atténue le contraste et la visibilité de l’interface utilisateur.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. Ce comportement peut être modifié à l’aide de la propriété LightDismissOverlayMode.This behavior can be modified with the LightDismissOverlayMode property. Par défaut, les menus volants dessinent la superposition permettant de faire disparaître la luminosité sur la Xbox, mais pas sur d’autres familles d’appareils. Toutefois, les applications peuvent choisir de forcer la superposition afin que celle-ci soit toujours activée ou désactivée.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.

Menu volant avec superposition estompant l’affichage

<MenuFlyout LightDismissOverlayMode="On">

Comportement d’abandon interactifLight dismiss behavior

Il est possible de fermer les menus volants à l’aide d’une action d’abandon interactif, notamment comme suitFlyouts can be closed with a quick light dismiss action, including

  • Appui en dehors du menu volantTap outside the flyout
  • Appui sur la touche Échap du clavierPress the Escape keyboard key
  • Appui sur le bouton Précédent du système matériel ou logicielPress the hardware or software system Back button
  • Appui sur le bouton B de la manette de jeuPress the gamepad B button

En cas d’abandon à l’aide d’un appui, ce mouvement est généralement absorbé et non transmis à l’interface utilisateur en dessous.When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. Par exemple, si un bouton est visible derrière un menu volant ouvert, le premier appui de l’utilisateur ferme le menu volant mais n’active pas ce bouton.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. L’appui sur le bouton nécessite un second appui.Pressing the button requires a second tap.

Vous pouvez modifier ce comportement en désignant le bouton comme un élément d’entrée directe pour le menu volant.You can change this behavior by designating the button as an input pass-through element for the flyout. Les actions d’abandon interactif décrites ci-dessus ferment le menu volant et transmettent l’événement d’appui à son OverlayInputPassThroughElement désigné.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. Envisagez l’adoption de ce comportement pour accélérer les interactions de l’utilisateur sur des éléments similaires du point de vue fonctionnel.Consider adopting this behavior to speed up user interactions on functionally similar items. Si votre application possède une collection de favoris et que chaque élément de la collection inclut un menu volant, il est raisonnable de s’attendre à ce que les utilisateurs souhaitent interagir avec plusieurs menus volants en une succession rapide.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] Veillez à ne pas désigner un élément de superposition avec entrée directe qui se traduit par une action destructrice.Be careful not to designate an overlay input pass-through element which results in a destructive action. Les utilisateurs se sont habitués aux actions d’abandon interactif discrètes qui n’activent pas l’interface utilisateur principale.Users have become habituated to discreet light dismiss actions which do not activate primary UI. Les boutons destructeurs de type Fermer, Supprimer ou similaires ne doivent pas être activés par un abandon interactif, de manière à éviter les comportements inattendus et perturbateurs.Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.

Dans l’exemple suivant, les trois boutons de la FavoritesBar sont activés par le premier appui.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);
{

Obtenir l’exemple de codeGet the sample code