Flyouts

Un menu volant est un conteneur d’abandon interactif capable d’afficher une interface utilisateur arbitraire en tant que contenu. Des menus volants peuvent contenir d’autres menus volants ou des menus contextuels pour créer une expérience imbriquée.

Est-ce le contrôle approprié ?

• N’utilisez pas de menu volant au lieu d’une info-bulle ou d’un menu contextuel. Utilisez une info-bulle pour afficher une brève description qui se masque après une heure spécifiée. Utilisez un menu contextuel pour les actions contextuelles liées à un élément d’interface utilisateur, comme copier-coller.

Pour savoir quand utiliser une boîte de dialogue ou un menu volant (contrôle similaire), voir Boîtes de dialogue et menus volants.

Créer un menu déroulant

L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.

Les fenêtres volantes sont attachées à des éléments de contrôle spécifiques. Vous pouvez utiliser la propriété Placement pour spécifier l’emplacement d’un volet déroulant : Haut, Gauche, Bas, Droite ou Plein écran. Si vous sélectionnez le mode Plein écran, l’application étire le volet et le centre à l’intérieur de la fenêtre de l’application. Certains contrôles, tels que Button, fournissent une propriété Flyout que vous pouvez utiliser pour associer un menu volant ou un menu contextuel.

Cet exemple crée un menu volant simple qui affiche du texte lorsque le bouton est enfoncé.

<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 propriété jointe FlyoutBase.AttachedFlyout à la place. Lorsque vous effectuez cette opération, vous devez également appeler la méthode FlyoutBase.ShowAttachedFlyout pour afficher le flyout.

Cet exemple ajoute un menu volant simple à une image. Lorsque l’utilisateur appuie sur l’image, l’application affiche le volet.

<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 leurs fenêtres contextuelles en ligne. Vous pouvez également définir une fenêtre contextuelle comme ressource statique, puis l’utiliser avec plusieurs éléments. Cet exemple crée un menu volant plus compliqué qui affiche une version plus grande d’une image lorsque sa miniature est tapée.

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

Styliser un menu déroulant

Pour styliser un menu volant, modifiez son FlyoutPresenterStyle. Cet exemple montre un paragraphe de texte encapsulé et rend le bloc de texte accessible à un lecteur d’écran.

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

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. 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. Ce comportement peut être modifié à l’aide de la propriété LightDismissOverlayMode. 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.

<MenuFlyout LightDismissOverlayMode="On">

Comportement d’abandon interactif

Il est possible de fermer les menus volants à l’aide d’une action d’abandon interactif, notamment comme suit

• Appui en dehors du menu volant
• Appuyez sur la touche Échap du clavier
• Appui sur le bouton Précédent du système matériel ou logiciel
• Appui sur le bouton B de la manette de jeu

En cas d’abandon à l’aide d’un appui, ce mouvement est généralement absorbé et non transmis à l’interface utilisateur en dessous. 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. L’appui sur le bouton nécessite un second appui.

Vous pouvez modifier ce comportement en désignant le bouton comme un élément d’entrée directe pour le menu volant. Les actions d’abandon interactif décrites ci-dessus ferment le menu volant et transmettent l’événement d’appui à son OverlayInputPassThroughElement désigné. 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. 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.

Dans l’exemple suivant, les trois boutons de la FavoritesBar sont activés par le premier appui.

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

Articles connexes

• Info-bulles
• Menus et menu contextuel
• Classe Flyout
• Classe ContentDialog