Premiers pas avec les liaisons de base dans .NET MAUI

Il est possible de refléter instantanément les modifications de données dans notre interface utilisateur grâce à la liaison. Voyons comment lier des données dans .NET MAUI.

Salut! 🙋‍♀ C’est un plaisir pour moi de vous avoir ici! 💚

L’une des caractéristiques les plus importantes d’une application est qu’elle a la capacité de lier dynamiquement des données à chacune de nos vues. C’est là qu’intervient la liaison de données – c’est la technique de liaison des propriétés afin que les modifications apportées à une propriété soient automatiquement reflétées dans notre interface utilisateur. Ainsi, nous pouvons éviter de manipuler des données codées en dur et créer à la place un environnement plus flexible pour les utilisateurs.

Dans cet article, nous verrons comment appliquer la liaison de données et les différents types disponibles dans .NET MAUI.

Qu’est-ce que la liaison de données ?

La liaison de données nous permet de séparer notre interface utilisateur de la logique métier, mais de maintenir la communication entre les deux, en créant un pont qui nous permet d’apporter les données à notre interface utilisateur.

Pour cela, il vous suffit d’utiliser le mot « Binding » entre accolades suivi de la valeur que vous souhaitez refléter dans les propriétés du contrôle que vous préférez. C’est une fonctionnalité dont nous pouvons tirer parti principalement si nous utilisons le modèle d’architecture Model-View-ViewModel (MVVM).

Selon notre explication ci-dessus, un exemple de base d’une liaison serait comme suit :

<Label Text="{Binding FirstName}" />

Avantages de l’utilisation des liaisons de données

• En utilisant les liaisons de données, vous avez la possibilité de modifier les valeurs que vous présenterez dans votre vue sans avoir besoin de mettre à jour le code car il sera complété automatiquement si vous modifiez votre source de données. (Par exemple, votre source peut être une API implémentée dans la logique métier.)
• L’utilisation des liaisons de données maintient une communication immédiate avec les informations présentées à l’utilisateur dans l’interface utilisateur.
• Vous maintenez une meilleure organisation dans votre projet, car vous pouvez séparer vos vues de la logique métier avec MVVM.

Comment utiliser les liaisons de données

Afin de mieux comprendre ce sujet, nous allons diviser un exemple de scénario en étapes où nous pourrions utiliser une liaison.

Étape 1 : déclarer un modèle simple

Nous allons déclarer la classe Student, qui contiendra les attributs suivants :

⚠ Nous créons ce modèle pour déclarer la structure de données que nous allons présenter dans notre exemple d’UI.

public class Students
{
     private string _firstName = string.Empty;
     private string _lastName = string.Empty;
     private string _phone = string.Empty;
 
    public string FirstName
    {
        get { return _firstName; }
        set { _firstName = value; }
    }

    public string LastName
    {
	    get { return _lastName; }
	    set { _lastName = value; }
    }

    public string Phone
    { 
	    get { return _phone; }
	    set { _phone = value; }
    }
     
    public Students(string firstName, string lastName, string phone)
    {
	    FirstName = firstName;
	    LastName = lastName;
	    Phone = phone;
    }
}

Étape 2 : Création d’un modèle de vue

Nous allons maintenant créer un ViewModel, que nous remplirons avec des données fictives de la structure de notre modèle.

⚠ Un point important à noter ici est que dans cet exemple, nous utilisons des données fictives. Cependant, vous pouvez utiliser n’importe quelle source de données dont vous avez besoin, par exemple consommer une API.

public class StudentsViewModel
{

    private List<Students> studentsCollection = new List<Students>();

    public StudentsViewModel()
    {
	    studentsCollection.Add(new Students("Marie", "White", "+1-809-554-6055"));
	    studentsCollection.Add(new Students("Paola", "Pullman", "+1-809-506-5655"));
	    studentsCollection.Add(new Students("Joseph", "McDonalds", "+1-809-684-4876"));
    }
    
    public List<Students> StudentsCollection
    {
	    get { return studentsCollection; }
	    set { studentsCollection = value; }
    }
}

Étape 3 : Travailler avec la vue

Enfin, mettons ces informations en évidence avec une reliure !

Fondamentalement, le mot-clé à utiliser est « Binding » – il est chargé d’indiquer à la propriété du contrôle auquel nous voulons affecter, que la valeur de cette propriété proviendra de la logique métier.

Comment faire? Comprenons sa structure.

En plus des étapes indiquées dans l’image, pour attribuer un Obligatoire vous devez suivre ces étapes :

• Recherchez la propriété dont vous souhaitez apporter la valeur à votre interface utilisateur à lier. Par exemple, à l’étape 1 de notre scénario précédent, nous avons un modèle avec trois attributs. Nous allons choisir FirstName pour cet exemple.
• Une fois les étapes ci-dessus terminées, les ajouter à la propriétécomme dans l’exemple suivant :

<Label Text="{Binding  FirstName}" />

Voyons l’exemple dans une CollectionView pour afficher nos données dans une liste !

Nous allons utiliser une CollectionView pour pouvoir présenter une liste liée/liée ! Comme vous pouvez le voir, il suffit d’appeler le nom de la Collection déclarée dans notre ViewModel, puis d’ajouter les attributs (FirstName, etc.).

<StackLayout Margin="50">
    <CollectionView ItemsSource="{Binding StudentsCollection}">
	    <CollectionView.ItemTemplate>
		    <DataTemplate>
			    <StackLayout BackgroundColor="Pink" Orientation="Horizontal" HeightRequest="50">
				    <Label Text="{Binding FirstName}"/>
				    <Label Text="{Binding LastName}"/>
				    <Label Text="{Binding Phone}"/>
			    </StackLayout>
		    </DataTemplate>
	    </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

Pour cet exemple, nous n’avons besoin que d’un point : ajoutez un BindingContext à notre page. Nous le ferons comme suit :

Dans votre Student.xaml.cs, ajoutez votre ViewModel (dans ce cas, StudentsViewModel) au BindingContext, comme indiqué ci-dessous :

BindingContext = new StudentsViewModel();

Et enfin, vous pouvez avoir un résultat comme celui-ci :

Modes de reliure

Les liaisons ont des modes de liaison qui définissent comment la communication de données sera établie. Dans ce cas, le Mode unidirectionnel est établi par défaut pour la plupart des propriétés pouvant être liées. Il existe également d’autres modes à établir si nécessaire. Voyons les principaux :

Fixations à deux voies

TwoWay est lorsque les liaisons de données sont utilisées avec Model-View-ViewModel (MVVM). La classe ViewModel est la source de liaison de données et la vue. Celles-ci ont des réponses bidirectionnelles pour les mises à jour de données. En effet, l’utilisateur souhaite probablement qu’une vue de la page soit initialisée avec la valeur de la propriété correspondante dans le ViewModel, et les modifications apportées à la vue doivent également être mises à jour.

Nous avons certaines propriétés qui ont déjà un mode de liaison par défaut de TwoWay, par exemple :

= »telerik-retableheaderrow-2″>

Date	Sélecteur de date
Texte	Éditeur, Entrée, Barre de recherche et EntryCell
SelectedIndex et SelectedItem	Cueilleur
Temps	Sélecteur de temps

Maintenant, comment ajouterions-nous ce mode à notre propriété ? C’est facile! Regardez l’exemple suivant :

{Binding FirstName Mode="TwoWay"}

Liaisons à sens unique vers la source

C’est un mode en lecture seule, il est attribué par défaut dans la plupart des propriétés (vous n’avez donc pas à l’indiquer dans votre code), et il est chargé de signaler les informations uniquement de manière unilatérale.

{Binding FirstName}

Commandes

J’imagine que vous vous demandez quelque chose comme « Et y a-t-il quelque chose comme ça avec lequel je peux remplacer les événements ? » La réponse est oui!

Comme pour les données, nous pouvons également lier des méthodes qui doivent être exécutées en réaction à une activité spécifique dans la vue, comme cliquer sur un bouton. Nous pouvons le faire avec Commandes. Voyons un exemple de scénario sur la façon de l’implémenter !

Étape 1 : Déclarez la commande dans votre ViewModel

Nous avons le Je commande interface, qui nous aide à utiliser la commande de la manière suivante :

public ICommand MyCommand { private set; get; }

Étape 2 : appelez la commande dans votre code XAML

Pour ajouter une Commande, il vous suffit de suivre les étapes suivantes :

• Ajouter le Commande à votre contrôle.
• Ajoutez ensuite le nom de la commande que vous souhaitez ajouter. Par exemple:
  « {Obligatoire VotreCommande} »
  (Comme vous le remarquerez, le mot « Binding » est toujours conservé.)

Enfin, votre commande devrait être la suivante :

<Button Text="Click here please"
Command="{Binding MyCommand}"

Étape 3 : Donnez un corps à votre commande dans le ViewModel

MyCommand = new Command(
    execute: () =>
    {
    Entry = Entry.Substring(0, Entry.Length - 1);
	    if (Entry == "")
	    {
	    Entry = "0";
	    }
	    RefreshCanExecutes();
	    },
    canExecute: () =>
    {
    	return Entry.Length > 1 || Entry != "0";
    });

Ici, j’ai ajouté un exemple de la documentation officielle.

Et votre commande est terminée ! 💪

Emballer

Vous êtes maintenant prêt à travailler avec les liaisons de base dans .NET MAUI !

Merci d’avoir lu cet article, j’espère que c’est un sujet super utile pour vous !💚💕

À la prochaine! 💁‍♀️

Références