Explorer la pression longue dans la boîte à outils de la communauté .NET MAUI

En tant que framework multiplateforme centré sur le mobile, .NET MAUI fournira bien sûr d’excellentes options pour les interactions tactiles. Explorons la pression longue.

L’intégration de fonctionnalités qui répondent à des gestes d’écran spécifiques peuvent rendre notre application plus robuste et fournir un accès plus rapide à diverses fonctionnalités.

Dans .NET MAUI, nous pouvons identifier plusieurs gestes. Dans cet article, nous nous concentrerons sur la façon de gérer l’interaction en appuyant longuement, l’un des nombreux types de comportements tactiles que nous pouvons détecter. (✍️ Si vous souhaitez lire plus d’informations sur TouchBehavior, vous pouvez lire Cet article.)

Tout d’abord… Que dois-je savoir ? 🤔

Qu’est-ce qu’un comportement ?

Au cas où vous ne le sauriez pas, les comportements vous permettent d’attacher une fonctionnalité à un élément dans une vue. Cette fonctionnalité peut être réutilisable et nous offre un moyen simple d’effectuer des tests unitaires. (✍️ Si vous souhaitez en savoir plus sur les comportements, je vous invite à lire cet article Apprendre.

Qu’est-ce que le comportement tactile ?

Anciennement connu sous le nom de TouchEffect dans la boîte à outils de la communauté Xamarin, il est désormais migré vers la boîte à outils de la communauté .NET MAUI sous le nom TouchBehavior. Ce comportement peut être attaché à n’importe quel élément de l’écran, permettant une interaction basée sur des événements tactiles, des clics et/ou des survols de souris.

De plus, cela nous permet de modifier les propriétés visuelles de l’élément attaché, comme la couleur ou l’opacité du fond.

🧠 La boîte à outils communautaire .NET MAUI est une collection organisée de composants réutilisables soigneusement développés par la communauté. Il englobe une gamme d’éléments tels que des animations, des convertisseurs et des comportements, tous conçus pour accélérer le développement d’applications. De plus, il offre une compatibilité facile sur iOS, Android, macOS et WinUI, tout cela grâce à la puissance de MAUI.

La configuration initiale

Pour mettre en œuvre correctement le Comportement tactile, assurez-vous que le kit d’outils communautaires .NET MAUI est correctement configuré dans votre application. Sa configuration est simple, comme indiqué dans les étapes ci-dessous :

1.Installation : Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.Toolkit.Maui NuGet.

2. Configuration dans MauiProgram.cs : Après avoir ajouté le package NuGet, accédez à MauiProgram.cs. Juste en dessous UseMauiApp<App>()ajouter :

.UseMauiCommunityToolkit()

3. Ajout d’espace de noms : Incluez l’espace de noms du kit d’outils dans votre page :

xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolki](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)t”

Interaction avec une pression longue

Le comportement tactile définit l’action qui doit se produire lorsqu’un utilisateur appuie sur l’écran pendant une période prolongée. Contrairement aux actions rapides comme un toucher ou un clic, il détecte spécifiquement les pressions prolongées sur l’écran. Par exemple, lorsqu’un utilisateur appuie longuement sur le texte, celui-ci devient ombré et peut être copié. Un autre exemple est le texte envoyé vers une nouvelle page.

Comment utiliser une pression longue

Propriétés

Commençons par comprendre les spécificités propriétés qui sont disponibles pour la pression longue. Ils sont les suivants :

➖ Durée de pression longue : Il vous permet de définir la durée que vous jugez nécessaire pour indiquer que votre geste est une interaction par appui long. Cette durée est définie en millisecondes et la propriété reçoit un Int comme valeur.

➖ Commande PresseLongue : C’est la commande qui sera invoquée lorsque l’utilisateur aura effectué un appui long.

➖ Paramètre de commande LongPress : Cette propriété vous permet d’envoyer les paramètres requis à la Commande.

Événement

Outre les propriétés mentionnées précédemment, un appui long présente également l’événement suivant :

➖ LongPressTerminé : Cela se déclenche lorsqu’un geste d’appui long est terminé.

Apprentissage de la structure de presse longue

L’image précédente illustre la structure simple que vous devez implémenter pour un élément visuel. Cette structure peut être décomposée selon les étapes suivantes :

1. <Declare your control>: Cette étape consiste à ajouter les balises de début et de fin du contrôle auquel vous souhaitez attacher le comportement. Par exemple, si vous travaillez avec une image, votre structure ressemblerait à ceci :

<Image></Image>

2. <Control type.Behaviors>: Cette balise permet d’indiquer que vous souhaitez ajouter un Comportement à un élément visuel. Par exemple, dans le cas d’une image, la balise ressemblerait à ce qui suit :

<Image.Behaviors></Image.Behaviors>

3. <toolkit alias:TouchBehavior …>: Cette balise permet de préciser le comportement souhaité. Le préfixe « alias de la boîte à outils » fait référence à l’alias que vous avez attribué à l’espace de noms de votre XAML pour faire référence à la boîte à outils de la communauté (dans mon cas, « boîte à outils »).

Ensuite, vous verrez « TouchBehavior ». Ici, vous pouvez ajouter n’importe laquelle des propriétés d’appui long définies précédemment. Par exemple:

<toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}" LongPressDuration="750"/>

Maintenant, créons un exemple !

Nous allons utiliser l’exemple de l’explication précédente et l’appliquer à une image. Nous définirons une durée et une commande lorsqu’un appui long est détecté sur l’image.

Création du XAML

Dans un VerticalStackLayout, nous inclurons une image qui a le comportement d’appui long. De plus, nous conserverons le bouton fourni par défaut avec le modèle .NET MAUI.

<VerticalStackLayout Padding="30,0" Spacing="25">
    <Image
    Source="dotnet_bot.png"
    HeightRequest="185"
    Aspect="AspectFit">
	    <Image.Behaviors>
		    <toolkit:TouchBehavior LongPressCommand="{Binding LongPressCommand}" LongPressDuration="750"/>
	    </Image.Behaviors>
    </Image>
    <Button
	    x:Name="CounterBtn"
	    Text="Click me"
	    HorizontalOptions="Fill" />
</VerticalStackLayout>

Créer la commande

public partial class MainPage : ContentPage
    {
	    int count = 0;
	    public Command LongPressCommand { get; set; }
	    
	    public MainPage()
	    {
		    InitializeComponent();
		    LongPressCommand = new Command(() =>
		    {
		    
		    count++;
		    if (count == 1)
			    CounterBtn.Text = $"Long pressed {count} time";
		    else
			    CounterBtn.Text = $"Long pressed {count} times";
	    });
    
    BindingContext = this;
    }
}

Cet exemple était basé sur Longue vidéo de presse de Gérald Verluis.

Enfin, exécutez le projet. Chaque fois que vous cliquez ou appuyez sur l’image pendant 2 secondes, le nombre d’occurrences sera affiché sur le bouton. Voyons l’exemple ci-dessous !

Conclusion

En quelques étapes simples, nous avons créé une application qui détecte lorsque l’utilisateur appuie longuement sur un élément visuel de .NET MAUI. Cette fonctionnalité permet un accès plus rapide aux fonctionnalités nouvelles et existantes de notre application. À l’avenir, pensez à l’implémenter dans vos applications !

J’espère que vous avez trouvé cet article utile ! 💚💕

À la prochaine! 🙋‍♀️

Les références

Cet article était basé sur la documentation officielle :

Et la vidéo de Gerald Versluis :