GIF et SwipeView dans Xamarin Forms 4.4

Xamarin Forms 4.4 inclut des GIF et un balayage des options sur un élément de contenu comme une entrée dans une vue de liste. Jetons un coup d'œil!

Dans cet article, nous examinerons deux sujets qui se posent régulièrement autour des forums: les GIF et le balayage d'options pour un élément de contenu comme une entrée dans une vue de liste. Désormais inclus dès le départ dans Xamarin Forms 4.4.

GIF (enfin!)

Xamarin Forms 4.4 introduit une fonctionnalité dont les cercles Xamarin parlent depuis un certain temps. Les articles de blog et les discussions sur le forum se sont longtemps plaints du manque de prise en charge prête à l'emploi pour les GIF, et avec la fusion du PR7330, ces demandes ont finalement reçu une réponse.

La meilleure nouvelle est que, si vous pouvez utiliser un contrôle d'image, alors vous êtes prêt. L'ajout d'une propriété, "IsAnimationPlaying", signifie également démarrer et arrêter le contrôle à partir de vos liaisons.

Pour l'essayer, ouvrez un nouveau projet et ajoutez votre GIF préféré, comme vous le feriez pour n'importe quelle autre image.

Insérez un contrôle Image sur votre page, définissez la source (via vos liaisons MVVM si vous le souhaitez) et ajoutez IsAnimationPlaying = True .

SwipeView (Experimental)

Souvent appelés «options contextuelles», vous pouvez voir des exemples de balayage sur ListViews dans de nombreuses applications. Jusqu'à présent, vous devez créer un contrôle personnalisé ou utiliser quelque chose comme l'excellent contrôle Telerik ListView avec toutes ses cloches et sifflets. Cependant, si vous recherchez une solution simple prête à l'emploi, elle est arrivée.

Le SwipeView est un nouveau conteneur qui entoure un élément de contenu, avec des éléments contextuels qui sont révélés par un geste. Bien qu'il ne soit techniquement pas publié avant la v4.5, vous pouvez commencer à utiliser SwipeView immédiatement avec la v4.4 en ajoutant la ligne de code suivante à votre AppDelegate sur iOS, MainActivity sur Android ou votre classe App sur UWP:

 Forms.SetFlags ( "SwipeView_Experimental");

Essayons-le avec un exemple simple.

Ouvrez un nouveau projet Xamarin.Forms (n'oubliez pas de passer à la dernière version stable de Xamarin.Forms – au moins 4.4) et ajoutez le code SetFlags juste avant le Xamarin.Forms.Init .

Basculez maintenant vers la vue XAML de MainPage effacez l'exemple StackLayout et remplacez-le par le balisage suivant – dans ce cas, nous emballons le SwipeView dans un StackPanel pour le positionner facilement pour la démo. N'hésitez pas à l'organiser dans votre propre page.

Appuyez sur F5 et vérifiez l'option de suppression contextuelle instantanée!

Notez que nous avons utilisé SwipeView.RightItems, ce qui signifie que les éléments contextuels apparaissent à droite lorsque le l'utilisateur glisse vers la gauche. La vue de balayage peut également être glissée vers la droite, le haut et le bas:

• LeftItems – représentent les éléments de balayage qui peuvent être invoqués lorsque le contrôle est glissé du côté gauche.
• TopItems – représentent le balayage éléments qui peuvent être appelés lorsque le contrôle est glissé de haut en bas.
• BottomItems – représentent les éléments de glissement qui peuvent être invoqués lorsque le contrôle est glissé de bas en haut.

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

• SwipeStarted est déclenché lorsqu'un balayage commence. L'objet SwipeStartedEventArgs qui accompagne cet événement possède une propriété SwipeDirection, de type SwipeDirection.
• SwipeChanging est déclenché lorsque le balayage se déplace. L'objet SwipeChangingEventArgs qui accompagne cet événement possède une propriété SwipeDirection, de type SwipeDirection, et une propriété Offset afin que vous puissiez garder une trace du balayage. Vous pouvez l'utiliser pour appliquer un effet lorsque l'élément est glissé.
• SwipeEnded est déclenché à la fin d'un glissement. L'objet SwipeEndedEventArgs qui accompagne cet événement possède une propriété SwipeDirection, de type SwipeDirection.
• CloseRequested est déclenché lorsque les éléments de balayage sont fermés.

Le SwipeItem dérive de la classe MenuItem, ce qui signifie que Command, CommandParameter, IconImageSource et Text sont tous disponibles. De plus, SwipeItem ajoute BackgroundColor et un événement Invoked, afin que vous puissiez le gérer facilement.

Jetons un coup d'œil à un autre exemple, cette fois avec quelques autres propriétés définies.

Remplacez SwipeView dans votre MainPage par le exemple suivant et appuyez sur F5.

Remarquez comment nous avons maintenant les SwipeItems gauche et droit. Approuver apparaît lorsque l'utilisateur glisse vers la droite, Refuser apparaît lorsqu'il glisse vers la gauche. Il n'est pas difficile d'imaginer cela en tant que modèle dans un ListView – ajoutant quelques fonctionnalités intéressantes à votre application avec très peu d'effort.

Énumération SwipeMode

Enfin, consultez la propriété SwipeMode des SwipeItems. Cela peut être défini sur l'un des membres d'énumération SwipeMode:

• Reveal – indique qu'un glissement révèle les éléments du glissement. Il s'agit de la valeur par défaut.
• Execute – indique qu'un balayage exécute les éléments de balayage. Lorsque l'utilisateur glisse, la commande est exécutée immédiatement et le contenu de SwipeView est affiché de nouveau.

Jetez un œil à l'exemple suivant. J'ai un peu amélioré le XAML pour simuler un élément dans une application de dépenses des employés. Dans l'événement invoqué, je supprime notre déclaration de dépenses des employés pour afficher le mode Exécuter lorsque nous refusons la réclamation.

Essayez-le maintenant

Pour pour commencer avec Xamarin.Forms 4.4, installez-le simplement depuis le gestionnaire de packages NuGet et n'oubliez pas les "SetFlags" si vous consultez SwipeView. Si vous mettez à jour un projet existant, sachez que Xamarin.Forms et Xamarin.Essentials dépendent désormais de la prise en charge d'Android 28.0.0.3, vous devrez donc peut-être les mettre à jour également.

Happy swiping!