Xamarin.Forms SwipeView

  • Article

Télécharger l’exemple Télécharger l’exemple

Le SwipeView est un contrôle conteneur qui encapsule un élément de contenu et fournit des éléments de menu contextuel qui sont révélés par un mouvement de balayage :

Capture d’écran des éléments de balayage SwipeView dans un objet CollectionView, sur iOS et Android

SwipeView définit les propriétés suivantes :

  • LeftItems, de type SwipeItems, qui représente les éléments de balayage qui peuvent être appelés lorsque le contrôle est balayé à partir du côté gauche.
  • RightItems, de type SwipeItems, qui représente les éléments de balayage qui peuvent être appelés lorsque le contrôle est balayé à partir du côté droit.
  • TopItems, de type SwipeItems, qui représente les éléments de balayage qui peuvent être appelés lorsque le contrôle est balayé du haut vers le bas.
  • BottomItems, de type SwipeItems, qui représente les éléments de balayage qui peuvent être appelés lorsque le contrôle est balayé du bas vers le haut.
  • Threshold, de type double, qui représente le nombre d’unités indépendantes de l’appareil qui déclenchent un mouvement de balayage pour révéler entièrement les éléments de balayage.

Ces propriétés sont adossées à BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et mises en forme.

En outre, hérite de SwipeView la Content propriété de la ContentView classe . La Content propriété est la propriété content de la SwipeView classe et n’a donc pas besoin d’être définie explicitement.

La SwipeView classe définit également trois événements :

  • SwipeStarted est déclenché lorsqu’un balayage démarre. L’objet SwipeStartedEventArgs qui accompagne cet événement a une SwipeDirection propriété de type SwipeDirection.
  • SwipeChanging est déclenché à mesure que le mouvement de balayage se déplace. L’objet SwipeChangingEventArgs qui accompagne cet événement a une SwipeDirection propriété de type SwipeDirectionet une Offset propriété de type double.
  • SwipeEnded est déclenché lorsqu’un balayage se termine. L’objet SwipeEndedEventArgs qui accompagne cet événement a une SwipeDirection propriété de type SwipeDirectionet une IsOpen propriété de type bool.

En outre, SwipeView inclut les Open méthodes et Close , qui ouvrent et ferment par programmation les éléments de balayage, respectivement.

Notes

SwipeView a une plateforme spécifique sur iOS et Android, qui contrôle la transition utilisée lors de l’ouverture d’un SwipeView. Pour plus d’informations, consultez Mode de transition swipeView sur iOS et Mode de transition swipeView sur Android.

Créer un SwipeView

un SwipeView doit définir le contenu que le SwipeView entoure et les éléments de balayage qui sont révélés par le mouvement de balayage. Les éléments de balayage sont un ou plusieurs SwipeItem objets placés dans l’une des quatre SwipeView collections directionnelles : LeftItems, RightItems, TopItemsou BottomItems.

L’exemple suivant montre comment instancier un SwipeView en XAML :

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
    <Grid HeightRequest="60"
          WidthRequest="300"
          BackgroundColor="LightGray">
        <Label Text="Swipe right"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

Le code C# équivalent est :

// SwipeItems
SwipeItem favoriteSwipeItem = new SwipeItem
{
    Text = "Favorite",
    IconImageSource = "favorite.png",
    BackgroundColor = Color.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

SwipeItem deleteSwipeItem = new SwipeItem
{
    Text = "Delete",
    IconImageSource = "delete.png",
    BackgroundColor = Color.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;

List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Color.LightGray
};
grid.Children.Add(new Label
{
    Text = "Swipe right",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});

SwipeView swipeView = new SwipeView
{
    LeftItems = new SwipeItems(swipeItems),
    Content = grid
};

Dans cet exemple, le SwipeView contenu est un Grid qui contient un Label:

Capture d’écran du contenu SwipeView, sur le contenu SwipeView iOS et Android

Les éléments de balayage sont utilisés pour effectuer des actions sur le SwipeView contenu et sont révélés lorsque le contrôle est balayé à partir du côté gauche :

Capture d’écran des éléments de balayage SwipeAfficher les éléments de balayage, sur iOS et Android

Par défaut, un élément de balayage est exécuté lorsqu’il est appuyé par l’utilisateur. Vous pouvez cependant changer ce comportement. Pour plus d’informations, consultez Mode de balayage.

Une fois qu’un élément de balayage a été exécuté, les éléments de balayage sont masqués et le SwipeView contenu est réexpliqué. Vous pouvez cependant changer ce comportement. Pour plus d’informations, consultez Comportement de balayage.

Notes

Le contenu de balayage et les éléments de balayage peuvent être placés en ligne ou définis en tant que ressources.

Éléments de balayage

Les LeftItemscollections , RightItems, TopItemset BottomItems sont toutes de type SwipeItems. La SwipeItems classe définit les propriétés suivantes :

  • Mode, de type SwipeMode, qui indique l’effet d’une interaction de balayage. Pour plus d’informations sur le mode de balayage, consultez Mode de balayage.
  • SwipeBehaviorOnInvoked, de type SwipeBehaviorOnInvoked, qui indique comment un SwipeView se comporte après l’appel d’un élément de balayage. Pour plus d’informations sur le comportement du balayage, consultez Comportement de balayage.

Ces propriétés sont adossées à BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et mises en forme.

Chaque élément de balayage est défini comme un SwipeItem objet placé dans l’une des quatre SwipeItems collections directionnelles. La SwipeItem classe dérive de la MenuItem classe et ajoute les membres suivants :

  • Propriété BackgroundColor , de type Color, qui définit la couleur d’arrière-plan de l’élément de balayage. Cette propriété est adossée à une propriété pouvant être liée.
  • Événement Invoked , qui est déclenché lorsque l’élément de balayage est exécuté.

Important

La MenuItem classe définit plusieurs propriétés, notamment Command, CommandParameter, IconImageSourceet Text. Ces propriétés peuvent être définies sur un SwipeItem objet pour définir son apparence et pour définir un ICommand qui s’exécute lorsque l’élément de balayage est appelé. Pour plus d’informations, consultez Xamarin.Forms MenuItem.

L’exemple suivant montre deux SwipeItem objets dans la LeftItems collection d’un SwipeView:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

L’apparence de chaque SwipeItem est définie par une combinaison des Textpropriétés , IconImageSourceet BackgroundColor :

Capture d’écran des éléments de balayage SwipeAfficher les éléments de balayage, sur iOS et Android

Lorsqu’un SwipeItem est appuyé, son Invoked événement se déclenche et est géré par son gestionnaire d’événements inscrit. En outre, l’événement MenuItem.Clicked se déclenche. Vous pouvez également définir la Command propriété sur une ICommand implémentation qui sera exécutée lorsque le SwipeItem est appelé.

Notes

Lorsque l’apparence d’un SwipeItem est définie uniquement à l’aide des Text propriétés ou IconImageSource , le contenu est toujours centré.

En plus de définir les éléments de balayage en tant qu’objets SwipeItem , il est également possible de définir des affichages d’éléments de balayage personnalisés. Pour plus d’informations, consultez Éléments de balayage personnalisés.

Sens du balayage

SwipeView prend en charge quatre directions de balayage différentes, la direction de balayage étant définie par la collection directionnelle SwipeItems à laquelle les SwipeItem objets sont ajoutés. Chaque direction de balayage peut contenir ses propres éléments de balayage. Par exemple, l’exemple suivant montre un SwipeView dont les éléments de balayage dépendent de la direction du balayage :

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Command="{Binding FavoriteCommand}" />
            <SwipeItem Text="Share"
                       IconImageSource="share.png"
                       BackgroundColor="LightYellow"
                       Command="{Binding ShareCommand}" />
        </SwipeItems>
    </SwipeView.RightItems>
    <!-- Content -->
</SwipeView>

Dans cet exemple, le contenu peut être balayé vers la SwipeView droite ou la gauche. Le balayage vers la droite affiche l’élément Supprimer le balayage, tandis que le balayage vers la gauche affiche les éléments de balayage Favoris et Partager .

Avertissement

Une seule instance d’une collection directionnelle SwipeItems peut être définie à la fois sur un SwipeView. Par conséquent, vous ne pouvez pas avoir deux LeftItems définitions sur un SwipeView.

Les SwipeStartedévénements , SwipeChanginget SwipeEnded signalent la direction du balayage via la SwipeDirection propriété dans les arguments de l’événement. Cette propriété est de type SwipeDirection, qui est une énumération composée de quatre membres :

  • Right indique qu’un balayage vers la droite s’est produit.
  • Left indique qu’un balayage vers la gauche s’est produit.
  • Up indique qu’un balayage vers le haut s’est produit.
  • Down indique qu’un balayage vers le bas s’est produit.

Seuil de balayage

SwipeView inclut une Threshold propriété, de type double, qui représente le nombre d’unités indépendantes de l’appareil qui déclenchent un mouvement de balayage pour révéler entièrement les éléments de balayage.

L’exemple suivant montre un SwipeView qui définit la Threshold propriété :

<SwipeView Threshold="200">
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Dans cet exemple, le SwipeView doit être balayé pour 200 unités indépendantes de l’appareil avant que ne SwipeItem soit entièrement révélé.

Notes

Actuellement, la Threshold propriété est implémentée uniquement sur iOS et Android.

Mode balayage

La SwipeItems classe a une Mode propriété qui indique l’effet d’une interaction de balayage. Cette propriété doit être définie sur l’un des membres de l’énumération SwipeMode :

  • Reveal indique qu’un balayage révèle les éléments de balayage. C’est la valeur par défaut de la propriété SwipeItems.Mode.
  • Execute indique qu’un balayage exécute les éléments de balayage.

En mode d’affichage, l’utilisateur effectue un SwipeView mouvement de balayage pour ouvrir un menu comprenant un ou plusieurs éléments de balayage, et doit appuyer explicitement sur un élément de balayage pour l’exécuter. Une fois l’élément de balayage exécuté, les éléments de balayage sont fermés et le SwipeView contenu est réexpliqué. En mode d’exécution, l’utilisateur effectue un SwipeView mouvement de balayage pour ouvrir un menu composé d’un autre élément de balayage, qui sont ensuite exécutés automatiquement. Après l’exécution, les éléments de balayage sont fermés et le SwipeView contenu est ré-affiché.

L’exemple suivant montre un SwipeView configuré pour utiliser le mode d’exécution :

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Dans cet exemple, le SwipeView contenu peut être balayé vers la droite pour afficher l’élément de balayage, qui est exécuté immédiatement. Après l’exécution, le SwipeView contenu est ré-affiché.

Comportement du balayage

La SwipeItems classe a une SwipeBehaviorOnInvoked propriété, qui indique comment se comporte un SwipeView après l’appel d’un élément de balayage. Cette propriété doit être définie sur l’un des membres d’énumération SwipeBehaviorOnInvoked :

  • Auto indique qu’en mode d’affichage, le SwipeView se ferme après l’appel d’un élément de balayage, et qu’en mode d’exécution, le SwipeView reste ouvert après l’appel d’un élément de balayage. C’est la valeur par défaut de la propriété SwipeItems.SwipeBehaviorOnInvoked.
  • Close indique que le SwipeView se ferme après l’appel d’un élément de balayage.
  • RemainOpen indique que le SwipeView reste ouvert après l’appel d’un élément de balayage.

L’exemple suivant montre un SwipeView configuré pour rester ouvert après l’appel d’un élément de balayage :

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Éléments de balayage personnalisés

Les éléments de balayage personnalisés peuvent être définis avec le SwipeItemView type . La SwipeItemView classe dérive de la ContentView classe et ajoute les propriétés suivantes :

  • Command, de type ICommand, qui est exécuté lorsqu’un élément de balayage est appuyé.
  • CommandParameter, de type object : paramètre passé à la commande Command.

Ces propriétés sont soutenues par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et stylées.

La SwipeItemView classe définit également un Invoked événement déclenché lorsque l’élément est appuyé, après l’exécution de Command .

L’exemple suivant montre un SwipeItemView objet dans la LeftItems collection d’un SwipeView:

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItemView Command="{Binding CheckAnswerCommand}"
                           CommandParameter="{Binding Source={x:Reference resultEntry}, Path=Text}">
                <StackLayout Margin="10"
                             WidthRequest="300">
                    <Entry x:Name="resultEntry"
                           Placeholder="Enter answer"
                           HorizontalOptions="CenterAndExpand" />
                    <Label Text="Check"
                           FontAttributes="Bold"
                           HorizontalOptions="Center" />
                </StackLayout>
            </SwipeItemView>
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Dans cet exemple, le SwipeItemView comprend un StackLayout contenant un Entry et un Label. Une fois que l’utilisateur a entré une entrée dans , Entryle reste du SwipeViewItem peut être appuyé, ce qui exécute le ICommand défini par la SwipeItemView.Command propriété .

Ouvrir et fermer un SwipeView par programmation

SwipeView inclut Open et Close les méthodes, qui ouvrent et ferment par programmation les éléments de balayage, respectivement. Par défaut, ces méthodes animent le lors de SwipeView son ouverture ou de sa fermeture.

La Open méthode nécessite un OpenSwipeItem argument pour spécifier la direction à partir de laquelle sera SwipeView ouvert. L’énumération OpenSwipeItem a quatre membres :

  • LeftItems, ce qui indique que le SwipeView sera ouvert à partir de la gauche, pour afficher les éléments de balayage dans la LeftItems collection.
  • TopItems, ce qui indique que le SwipeView sera ouvert à partir du haut, pour révéler les éléments de balayage dans la TopItems collection.
  • RightItems, ce qui indique que le SwipeView sera ouvert à partir de la droite, pour afficher les éléments de balayage dans la RightItems collection.
  • BottomItems, ce qui indique que le SwipeView sera ouvert à partir du bas, pour révéler les éléments de balayage dans la BottomItems collection.

En outre, la Open méthode accepte également un argument facultatif bool qui définit si le SwipeView sera animé lorsqu’il s’ouvre.

Avec un SwipeView nommé swipeView, l’exemple suivant montre comment ouvrir un SwipeView pour révéler les éléments de balayage dans la LeftItems collection :

swipeView.Open(OpenSwipeItem.LeftItems);

Le swipeView peut ensuite être fermé avec la Close méthode :

swipeView.Close();

Notes

La Close méthode accepte également un argument facultatif bool qui définit si le SwipeView sera animé lors de sa fermeture.

Désactiver un SwipeView

Une application peut entrer un état dans lequel le balayage d’un élément de contenu n’est pas une opération valide. Dans ce cas, SwipeView le peut être désactivé en définissant sa IsEnabled propriété sur false. Cela empêchera les utilisateurs de balayer le contenu pour révéler les éléments de balayage.

En outre, lors de la définition de la Command propriété d’un SwipeItem ou SwipeItemView, le CanExecute délégué de peut ICommand être spécifié pour activer ou désactiver l’élément de balayage.