Partager via

Glisser

La commande de balayage est un accélérateur pour les menus contextuels qui permet aux utilisateurs d’accéder facilement aux actions de menu courantes par contact, sans avoir à modifier les états dans l’application.

Exécuter et afficher le thème clair

Est-ce le contrôle approprié ?

La commande de balayage permet d’économiser de l’espace. Il est utile dans les situations où l’utilisateur peut effectuer la même opération sur plusieurs éléments en succession rapide. Il fournit également des « actions rapides » sur les éléments qui n’ont pas besoin d’une fenêtre contextuelle complète ou d’une modification d’état dans la page.

Vous devez utiliser la commande de balayage lorsque vous avez un groupe d’éléments potentiellement volumineux, et chaque élément a 1 à 3 actions qu’un utilisateur peut effectuer régulièrement. Ces actions peuvent inclure, mais ne sont pas limitées à :

  • Suppression
  • Marquage ou archivage
  • Enregistrement ou téléchargement
  • Répondre

Comment fonctionne le balayage ?

La commande de balayage UWP a deux modes : Révéler et Exécuter. Il prend également en charge quatre directions de balayage différentes : haut, bas, gauche et droite.

Mode de révélation

En mode Révéler, l’utilisateur balaye un élément pour ouvrir un menu d’une ou plusieurs commandes et doit appuyer explicitement sur une commande pour l’exécuter. Lorsque l’utilisateur effectue un mouvement de balayage et libère un élément, le menu reste ouvert jusqu’à ce qu’une commande soit sélectionnée ou que le menu soit à nouveau fermé par le biais du balayage arrière, en appuyant ou en faisant défiler l’élément de balayage ouvert hors de l’écran.

Balayez pour révéler

Le mode Révéler est un mode de balayage plus sûr et plus polyvalent et peut être utilisé pour la plupart des types d’actions de menu, même potentiellement destructrices, telles que la suppression.

Lorsque l’utilisateur sélectionne l’une des options de menu affichées dans l’état d’ouverture et de repos du menu contextuel, la commande associée à cet élément est déclenchée et le contrôle de balayage est fermé.

Mode d’exécution

En mode Exécution, l'utilisateur fait glisser un élément pour l'ouvrir afin de révéler et exécuter une seule commande avec ce mouvement. Si l’utilisateur libère l’élément en cours de balayage avant de balayer au-delà d’un seuil, le menu se ferme et la commande n’est pas exécutée. Si l’utilisateur effectue un mouvement de balayage au-delà du seuil, puis libère l’élément, la commande est exécutée immédiatement.

Effectuez un mouvement de balayage pour exécuter

Si l’utilisateur ne libère pas son doigt une fois que le seuil est atteint et tire à nouveau l’élément de balayage fermé, la commande n’est pas exécutée et aucune action n’est effectuée sur l’élément.

Le mode d’exécution fournit davantage de commentaires visuels par le biais de l’orientation des couleurs et des étiquettes pendant qu’un élément est balayé.

L’exécution est la meilleure utilisée lorsque l’action que l’utilisateur effectue est la plus courante.

Il peut également être utilisé pour des actions plus destructrices telles que la suppression d’un élément. Toutefois, gardez à l’esprit que l’exécution nécessite une seule action de balayage dans une direction, par opposition à Révéler, ce qui oblige l’utilisateur à cliquer explicitement sur un bouton.

Directions de balayage

Le balayage fonctionne dans toutes les directions cardinales : haut, bas, gauche et droite. Chaque direction de balayage peut contenir ses propres éléments de balayage ou contenu, mais une seule instance d’une direction peut être définie à la fois sur un seul élément capable de balayage.

Par exemple, vous ne pouvez pas avoir deux définitions LeftItems sur le même SwipeControl.

Pratiques conseillées et déconseillées

  • N’utilisez pas de balayage dans FlipViews ou Hubs. La combinaison peut être déroutante pour l’utilisateur en raison de directions de balayage en conflit.
  • Ne combinez pas de balayage horizontal avec la navigation horizontale ni de balayage vertical avec la navigation verticale.
  • Assurez-vous que l'action de balayage effectuée par l'utilisateur est la même et qu'elle est cohérente sur tous les éléments associés pouvant être balayés.
  • Utilisez le balayage pour les actions principales qu’un utilisateur souhaite effectuer.
  • Utilisez des mouvements de balayage sur des éléments où la même action est répétée plusieurs fois.
  • Utilisez le balayage horizontal sur des éléments plus larges et le balayage vertical sur les éléments plus grands.
  • Utilisez des étiquettes de texte courtes et concises.

Créer une commande de balayage

Ouvrez l’application galerie WinUI 3 et consultez SwipeControl en action

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, des caractéristiques et des fonctionnalités de WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub

Les commandes de balayage ont deux composants que vous devez définir :

  • SwipeControl, qui encapsule votre contenu. Dans une collection, telle qu’une ListView, elle se trouve dans votre DataTemplate.
  • Éléments de menu de balayage, qui est un ou plusieurs objets SwipeItem placés dans les conteneurs directionnels du contrôle de balayage : LeftItems, RightItems, TopItems ou BottomItems

Le contenu de balayage peut être placé en ligne ou défini dans la section Ressources de votre page ou application.

Voici un exemple simple d’un SwipeControl encapsulé autour d’un texte. Il affiche la hiérarchie des éléments XAML requis pour créer une commande de balayage.

<SwipeControl HorizontalAlignment="Center" VerticalAlignment="Center">
    <SwipeControl.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Pin">
                <SwipeItem.IconSource>
                    <SymbolIconSource Symbol="Pin"/>
                </SwipeItem.IconSource>
            </SwipeItem>
        </SwipeItems>
    </SwipeControl.LeftItems>

     <!-- Swipeable content -->
    <Border Width="180" Height="44" BorderBrush="Black" BorderThickness="2">
        <TextBlock Text="Swipe to Pin" Margin="4,8,0,0"/>
    </Border>
</SwipeControl>

Nous allons maintenant examiner un exemple plus complet de la façon dont vous utiliseriez généralement des commandes de balayage dans une liste. Dans cet exemple, vous allez configurer une commande de suppression qui utilise le mode Exécuter et un menu d’autres commandes qui utilise le mode Révéler. Les deux ensembles de commandes sont définis dans la section Ressources de la page. Vous allez appliquer les commandes de balayage aux éléments d’un ListView.

Tout d’abord, créez les éléments à glisser-qui représentent les commandes-comme ressources de niveau de page. SwipeItem utilise une IconSource comme icône. Créez également les icônes en tant que ressources.

<Page.Resources>
    <SymbolIconSource x:Key="ReplyIcon" Symbol="MailReply"/>
    <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
    <SymbolIconSource x:Key="PinIcon" Symbol="Pin"/>

    <SwipeItems x:Key="RevealOptions" Mode="Reveal">
        <SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"/>
        <SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"/>
    </SwipeItems>

    <SwipeItems x:Key="ExecuteDelete" Mode="Execute">
        <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
                   Background="Red"/>
    </SwipeItems>
</Page.Resources>

N'oubliez pas de conserver les éléments de menu de votre contenu de défilement sous forme de libellés courts et concis. Ces actions doivent être les principales que l’utilisateur peut effectuer plusieurs fois sur une courte période.

La configuration d’une commande de balayage pour fonctionner dans une collection ou ListView est exactement la même que la définition d’une seule commande de balayage (illustrée précédemment), sauf que vous définissez votre SwipeControl dans un DataTemplate afin qu’il soit appliqué à chaque élément de la collection.

Voici un ListView avec SwipeControl appliqué dans son élément DataTemplate. Les propriétés LeftItems et RightItems référencent les éléments de balayage que vous avez créés en tant que ressources.

<ListView x:Name="sampleList" Width="300">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <SwipeControl x:Name="ListViewSwipeContainer"
                          LeftItems="{StaticResource RevealOptions}"
                          RightItems="{StaticResource ExecuteDelete}"
                          Height="60">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{x:Bind}" FontSize="18"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/>
                    </StackPanel>
                </StackPanel>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

Gérer une commande de balayage exécutée

Pour agir sur une commande de glissement, vous gérez son événement Invoqué. (Pour plus d’informations sur la façon dont un utilisateur peut appeler une commande, passez en revue la section Comment les balayages fonctionnent-ils ? plus haut dans cet article.) En règle générale, une commande de balayage se trouve dans un scénario ListView ou de type liste. Dans ce cas, lorsqu’une commande est appelée, vous souhaitez effectuer une action sur cet élément balayé.

Voici comment gérer l’événement Appelé sur l’élément de balayage de suppression que vous avez créé précédemment.

<SwipeItems x:Key="ExecuteDelete" Mode="Execute">
    <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
               Background="Red" Invoked="Delete_Invoked"/>
</SwipeItems>

L’élément de données est dataContext du SwipeControl. Dans votre code, vous pouvez accéder à l’élément qui a été balayé en obtenant la propriété SwipeControl.DataContext à partir des arguments d’événement, comme illustré ici.

 private void Delete_Invoked(SwipeItem sender, SwipeItemInvokedEventArgs args)
 {
     sampleList.Items.Remove(args.SwipeControl.DataContext);
 }

Note

Ici, les éléments ont été ajoutés directement à la collection ListView.Items par souci de simplicité. Par conséquent, l’élément est également supprimé de la même façon. Si vous définissez plutôt ListView.ItemsSource sur une collection, qui est plus classique, vous devez supprimer l’élément de la collection source.

Dans cette instance particulière, vous avez supprimé l’élément de la liste, de sorte que l’état visuel final de l’élément balayé n’est pas important. Toutefois, dans les situations où vous souhaitez simplement effectuer une action, puis que le balayage se réduit à nouveau, vous pouvez définir la propriété BehaviorOnInvoked à l’une des valeurs d’énumération SwipeBehaviorOnInvoked.

  • automatique
    • En mode Exécution, l’élément de balayage ouvert reste ouvert lors de l’appel.
    • En mode Révéler, l’élément de balayage ouvert s’effondre lorsqu’il est appelé.
  • Fermer
    • Lorsque l'élément est invoqué, le contrôle de balayage se replie toujours et revient à son état normal, quel que soit le mode.
  • RemainOpen
    • Lorsque l’élément est appelé, le contrôle de balayage reste toujours ouvert, quel que soit le mode.

Ici, un élément de balayage de réponse est défini pour se fermer après son appel.

<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
           Invoked="Reply_Invoked"
           BehaviorOnInvoked = "Close"/>

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d’application Windows et WinUI 3, mais sont généralement applicables aux applications UWP qui utilisent WinUI 2. Consultez la référence de l’API UWP pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient des informations dont vous avez besoin pour utiliser le contrôle dans une application UWP ou WinUI 2.

Les applications SwipeControl pour UWP sont incluses dans le cadre de WinUI 2. Pour plus d’informations, notamment les instructions d’installation, consultez WinUI 2. Les API de ce contrôle existent dans les espaces de noms Windows.UI.Xaml.Controls (UWP) et Microsoft.UI.Xaml.Controls (WinUI).

Nous vous recommandons d’utiliser la dernière version de WinUI 2 pour obtenir les styles, modèles et fonctionnalités les plus récents pour tous les contrôles.

Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Pour plus d’informations, consultez Prise en main de WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:SwipeControl />
<muxc:SwipeItem />
  • Last updated on