Utiliser des commandes dans un ViewModel

Vous avez vu comment obtenir des données auprès de vos vues modèles pour les envoyer à votre interface utilisateur, et comment utiliser la liaison bidirectionnelle pour récupérer des données dans vos vues modèles.

L’utilisation de telles liaisons bidirectionnelles est la meilleure façon de réagir aux modifications apportées depuis l’interface utilisateur chaque fois que des données changent. Bon nombre de choses que nous gérons en tant qu’événements peuvent être gérées au moyen de liaisons bidirectionnelles et du modèle MVVM (modèle-vue-vue modèle). Switch.IsToggled et Slider.Value sont d’autres exemples, qui peuvent être reflétés dans notre vue modèle en tant que valeur booléenne ou entière, sans devoir utiliser des événements.

Mais des événements, comme l’activation d’un Button ou d’un MenuItem, ne sont pas directement liés à des données qui changent. Ces interactions nécessitent toujours une gestion de type événement. Comme ces composants d’interface utilisateur appellent généralement de la logique avec les données, nous voulons cette logique sur la vue modèle. Cependant, si possible, nous ne souhaitons pas les gérer en tant qu’événements Clicked et Selected dans le code-behind. Nous voulons autant que possible être dans la vue modèle, car de cette façon, elle peut être testée.

Utiliser le modèle de commande

La plupart des contrôles .NET MAUI qui ont ce type d’interaction prennent en charge la liaison à une propriété qui expose une interface ICommand. Cette propriété est probablement nommée Command. Le contrôle Button en est un exemple :

<Button Text="Give Bonus" Command="{Binding GiveBonusCommand}" />

Le contrôle sait quand appeler la commande. Par exemple, un bouton appelle la commande quand l’utilisateur appuie sur ce bouton. Dans cet exemple, la commande est liée à la propriété GiveBonus de la vue modèle. Le type de propriété doit implémenter l’interface ICommand. Le code ressemblerait à celui de l’exemple suivant :

public class EmployeeViewModel : INotifyPropertyChanged
{
    public ICommand GiveBonusCommand {get; private set;}
    ...
}

L’interface ICommand a une méthode Execute qui est appelée quand l’utilisateur appuie sur le bouton. De cette façon, ICommand.Execute remplace directement le code de gestion de l’événement Button.Click.

L’interface ICommand complète a deux méthodes de plus : CanExecute et CanExecuteChanged, qui sont utilisées pour déterminer si un contrôle doit apparaître activé ou désactivé.

Un bouton, par exemple, peut apparaître grisé si CanExecute retourne la valeur false.

Voici à quoi ressemble l’interface ICommand en C# :

public interface ICommand
{
    bool CanExecute(object parameter);
    void Execute(object parameter);
    event EventHandler CanExecuteChanged;
}

Utiliser la classe Command

Ce modèle de commande vous permet de garantir une séparation nette entre le comportement de l’interface utilisateur et l’implémentation de l’interface utilisateur. Mais il peut compliquer votre code si vous avez besoin de créer une classe distincte pour implémenter chaque gestionnaire d’événements.

Au lieu de créer plusieurs classes personnalisées qui implémentent l’interface, il est courant d’utiliser Command ou Command<T>. Ces classes implémentent ICommand mais exposent son comportement en tant que propriétés que vous pouvez définir dans votre vue modèle. De cette façon, nous pouvons implémenter la propriété GiveBonus décrite plus haut entièrement dans notre classe de vue modèle :

public class EmployeeViewModel : INotifyPropertyChanged
{
    public ICommand GiveBonusCommand {get; private set;}
    public EmployeeViewModel(Employee model)
    {
        GiveBonusCommand = new Command(GiveBonusExecute, GiveBonusCanExecute)
    }

    void GiveBonusExecute()
    {
        //logic for giving bonus
    }

    bool GiveBonusCanExecute()
    {
        //logic for deciding if "give bonus" button should be enabled.
    }
}

Dans ce code, le comportement Execute est fourni par la méthode GiveBonusExecute. Et CanExecute est fourni par GiveBonusCanExecute. Les délégués de ces méthodes sont passés au constructeur Command. Dans cet exemple, il n’y a aucune implémentation pour CanExecuteChanged.

Simplifiez avec MVVM Toolkit

La bibliothèque MVVM Toolkit contient des implémentations de ICommand appelées RelayCommand et AsyncRelayCommand. Elle fournit également des générateurs sources pour simplifier davantage ce code. Dans l’exemple suivant, le paramètre GiveBonusCommand sera généré, en définissant à la fois la méthode à appeler pour l’exécution et la méthode à appeler pour voir si elle peut s’exécuter. L’attribut [RelayCommand] est utilisé sur la méthode GiveBonus et génère le paramètre GiveBonusCommand. En outre, en définissant la propriété CanExecute de l’attribut sur le nom de la méthode que nous voulons connecter à la méthode CanExecute du ICommand, le code sera généré pour nous pour la configuration.

public partial class EmployeeViewModel : ObservableObject
{
    public EmployeeViewModel(Employee model)
    {
    }

    [RelayCommand(CanExecute = nameof(GiveBonusCanExecute))]
    void GiveBonus()
    {
        //logic for giving bonus
    }

    bool GiveBonusCanExecute()
    {
        //logic for deciding if "give bonus" button should be enabled.
        return true;
    }
}

MVVM Toolkit gère également les méthodes async, qui sont courantes dans la programmation .NET.

Commandes avec paramètres

L’interface ICommand accepte un paramètre object pour les méthodes CanExecute et Execute. .NET MAUI implémente cette interface sans vérification des types via la classe Command. Les délégués que vous attachez à la commande doivent effectuer leur propre vérification des types pour garantir que le paramètre correct est passé. .NET MAUI fournit également l’implémentation de Command<T> où vous définissez le type de paramètre attendu. Quand vous créez une commande qui accepte un seul type de paramètre, utilisez Command<T>.

Les contrôles .NET MAUI qui implémentent le modèle de commande fournissent la propriété CommandParameter. En définissant cette propriété, vous pouvez passer un paramètre à la commande quand vous l’appelez avec Execute ou quand la commande vérifie l’état de la méthode CanExecute.

Dans cet exemple, la valeur de chaîne "25" est envoyée à la commande :

<Button Text="Give Bonus" Command="{Binding GiveBonusCommand}" CommandParameter="25" />

La commande doit interpréter et convertir ce paramètre de chaîne. Il existe de nombreuses façons de fournir un paramètre fortement typé.

• Au lieu d’utiliser la syntaxe d’attribut pour définir CommandParameter, utilisez des éléments XAML.

  <Button Text="Give Bonus" Command="{Binding GiveBonusCommand}">
      <Button.CommandParameter>
          <x:Int32>25</x:Int32>
      </Button.CommandParameter>
  </Button>
  

• Liez le CommandParameter à une instance du type correct.

• Si le CommandParameter est lié au type incorrect, appliquez un convertisseur pour convertir la valeur en un type correct.