En savoir plus sur SwipeView dans les formulaires Xamarin

Les menus cachés rendent les applications plus esthétiques et faciles à utiliser en gardant certaines options cachées. Ce post explore comment cela fonctionne en utilisant le contrôle SwipeView dans Xamarin Forms.

Avez-vous déjà vu des applications avec des menus cachés sympas avec un ensemble d'options que vous devez faire glisser vers la gauche ou la droite pour y accéder? ? Non? Permettez-moi de donner un exemple… ? imaginez une application de restaurant dans laquelle vous avez une liste d'aliments et dans cette liste, vous pouvez faire glisser les aliments choisis. En faisant cette diapositive, vous pouvez voir différentes actions qui étaient cachées ( par exemple, modifier ou supprimer des aliments ).

Grâce à ces types de menus, nous pouvons rendre nos applications plus esthétiques et réduire l'espace dans la conception de l'interface en gardant certaines options cachées, ce qui rend notre expérience utilisateur plus intuitive et amusante! Et devine quoi!? Dans Xamarin Forms, ce contrôle est nommé SwipeView et dans cet article, nous allons apprendre à l'utiliser! Voyons voir!

Tout d'abord… Que dois-je savoir? ?

➖ Qu'est-ce qu'un aperçu expérimental?

.

⚠ Il est important de savoir qu'être un aperçu expérimental ne rend pas les composants moins importants. Au contraire , ils sont mis de cette façon pour améliorer les expériences et le fonctionnement obtenus grâce à l'utilisation, la mise en œuvre et les commentaires des utilisateurs!

Comme SwipeView est un aperçu expérimental, vous devez indiquer que vous souhaitez l'activer afin que vous puissiez Vous devez ajouter une configuration dans les fichiers suivants:

Dans les fichiers indiqués pour chaque plate-forme, ajoutez le f ligne de code suivante juste avant d'appeler Forms.Init () :

Forms.SetFlags ("SwipeView_Experimental");

Commençons!

✔ Qu'est-ce que SwipeView?

SwipeView est un contrôle conteneur disponible dans Xamarin.Forms 4.4 en tant qu'aperçu expérimental. Il s'enroule autour d'un élément de contenu et fournit des éléments de menu contextuel qui sont révélés par un geste de balayage. Par défaut, une fois qu'un élément de balayage a été exécuté, les éléments de balayage sont masqués et le contenu SwipeView est ré-affiché. (Ce comportement peut être modifié.)

? Comme il s'agit d'un aperçu expérimental, vous ne pouvez pas oublier d'appliquer la configuration expliquée ci-dessus.

⚠ Image obtenue de la documentation officielle de Microsoft.

Connaître la mise en œuvre

Structure Swipeview

Pour implémenter SwipeView, nous devons déclarer l'un de ses [19659025] Propriétés et remplissez-le avec des éléments de balayage. Nous montrons la structure graphiquement plus tard, mais avant cela, voyons en détail quelles sont ces propriétés.

✔ Propriétés

Pour rendre possible le mouvement à l'intérieur des éléments SwipeView, nous devons déclarez au moins une de ces propriétés et remplissez-la avec des éléments de type SwipeItem, qui représente les éléments qui peuvent être affichés lorsque le contrôle est glissé vers la gauche, la droite, le haut ou le bas.

⚠ Important à savoir: Ces propriétés définissent l'endroit où le l'élément sera.

Ayant compris les propriétés, maintenant nous allons voir la structure graphiquement!

<img src = "https://d585tldpucybw.cloudfront.net/sfimages/default-source/ Blog "/ 2020 / 2020-07 / swipeviewstructure.png? sfvrsn = bcb96568_0 & MaxWidth = & MaxHeight = 400 & ScaleUp = false & Quality = High & Method = ResizeFitToAreaArguments & Signature = 677C6E5C4D68B8E9F9B01F0A4D75B" " ":" 400 "," ScaleUp ": false," Qualité ":" Élevé "}" data-displaymode = "Personnalisé" alt = "! [1Déclarezlesbalises 2. Sélectionnez une propriété pour votre vue: LeftItems , RightItems, TopItems ou BottomItems 3. Déclarez les balises 4. Déclarez autant d'éléments que nécessaire, chacun doit déclarer avec la balise SwipeItem et à l'intérieur, vous pouvez ajouter des propriétés telles que: texte, IconImageSource, BackgroundColor, invoqué (ou cet événement) 5. Fermez toutes les balises ouvertes (à l'exception de la balise SwipeView) 6. Créez la mise en page dans laquelle sera contenu le SwipeView , dans ce cas, j'ai utilisé la grille. 7. Fermez les balises "title =" SwipeView Structure "data-openoriginalimageonclick =" true "/>

⚠ L'événement appelé est déclenché lorsque l'élément de balayage est exécuté.

Et maintenant, allons coder l'exemple!

  
 <SwipeItem Text = "Delete" 
 IconImageSource = "delete.png" 
 BackgroundColor = "Red" 
 Invoked = "OnDeleteSwipeItemInvoked" /> 
  
  
  
 <Grid HeightRequest = "60" 
 WidthRequest = "300" 
 BackgroundColor = "Grey"> 
 <Label Text = "Fry Chicken" 
 HorizontalOptions = "Center" 
 VerticalOptions = "Center" /> 
  
  

Définition de la méthode invoquée:

      async void OnDeleteSwipeItemInvoked (expéditeur d'objet, EventArgs e)
            {
                // Ajoutez ici l'action que vous souhaitez effectuer lorsque vous cliquez sur l'option Supprimer.
            } 

Quelques grandes fonctionnalités!

Avec la classe SwipeItems nous pouvons définir les modes ou Comportements . Je vais les montrer un par un!

? Mode: Est une propriété qui nous permet d'indiquer l'effet d'une interaction par balayage.

Elle doit être définie sur l'un des SwipeMode membres d'énumération:

Une fois exécutés, les éléments de balayage sont fermés et le contenu SwipeView est réaffiche.

Exemple de code

  
  
  
 <SwipeItem Text = "Delete" 
 IconImageSource = "delete.png" 
 BackgroundColor = "LightPink" 
 Command = "{Binding DeleteCommand}" /> 
  
 
 

? Comportement: La ​​classe SwipeItem a une propriété SwipeBehaviorOnInvoked qui indique comment une SwipeView se comporte après qu'un élément de balayage est invoqué d.

Il doit être défini sur l'un des membres d'énumération SwipeBehaviorOnInvoked :

• Auto : indique qu'en mode de révélation, le SwipeView se ferme après qu'un élément de balayage est SwipeView reste ouvert après l'appel d'un élément de balayage. (valeur par défaut)

• Fermer: 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.

Exemple de code

 
 
 
 <SwipeItem Text = "Favorite" 
 IconImageSource = "favorite.png" 
 BackgroundColor = " Vert clair "
 Invoked =" OnFavoriteSwipeItemInvoked "/> 
 <SwipeItem Text =" Delete "
 IconImageSource =" delete.png "
 BackgroundColor =" LightPink "
 Invoked =" OnDeleteSwipeItemInv " 
 
 
 
 

Et enfin… Gestion des événements!

Vous h événement andle avec SwipeView:

Et c'est tout pour aujourd'hui! J'espère que ce message vous sera utile! ☺️

Merci d'avoir lu! ?

Références:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/swipeview#swipe-mode