MVVM - Événements

Un événement est une construction de programmation qui réagit à un changement d'état, notifiant tous les points de terminaison qui se sont inscrits pour la notification. Principalement, les événements sont utilisés pour informer une entrée utilisateur via la souris et le clavier, mais leur utilité ne se limite pas à cela. Chaque fois qu'un changement d'état est détecté, peut-être lorsqu'un objet a été chargé ou initialisé, un événement peut être déclenché pour alerter les tiers intéressés.

• Dans une application WPF qui utilise le modèle de conception MVVM (Model-View-ViewModel), le modèle de vue est le composant responsable de la gestion de la logique et de l'état de présentation de l'application.

• Le fichier code-behind de la vue ne doit contenir aucun code pour gérer les événements qui sont déclenchés à partir de tout élément de l'interface utilisateur (UI) tel qu'un bouton ou une zone de liste déroulante et ne doit pas contenir de logique spécifique au domaine.

• Idéalement, le code-behind d'une vue contient uniquement un constructeur qui appelle la méthode InitializeComponent et peut-être du code supplémentaire pour contrôler ou interagir avec la couche de vue qui est difficile ou inefficace à exprimer en XAML, par exemple des animations complexes.

Jetons un coup d'œil à un exemple simple d'événements de clic de bouton dans notre application. Voici le code XAML du fichier MainWindow.xaml dans lequel vous verrez deux boutons.

<Window x:Class = "MVVMHierarchiesDemo.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:MVVMHierarchiesDemo" 
   xmlns:views = "clr-namespace:MVVMHierarchiesDemo.Views" 
   xmlns:viewModels = "clr-namespace:MVVMHierarchiesDemo.ViewModel" 
   mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "525">
	
   <Window.DataContext> 
      <local:MainWindowViewModel/> 
   </Window.DataContext>
	
   <Window.Resources> 
      <DataTemplate DataType = "{x:Type viewModels:CustomerListViewModel}">
         <views:CustomerListView/> 
      </DataTemplate>
		 
      <DataTemplate DataType = "{x:Type viewModels:OrderViewModel}">
         <views:OrderView/>
      </DataTemplate> 
   </Window.Resources> 

   <Grid> 
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid x:Name = "NavBar"> 
         <Grid.ColumnDefinitions> 
            <ColumnDefinition Width = "*" />
            <ColumnDefinition Width = "*" /> 
            <ColumnDefinition Width = "*" /> 
         </Grid.ColumnDefinitions>
			
         <Button Content = "Customers" 
            Command = "{Binding NavCommand}" 
            CommandParameter = "customers" 
            Grid.Column = "0" />
				
         <Button Content = "Order" 
            Command = "{Binding NavCommand}" 
            CommandParameter = "orders" 
            Grid.Column = "2" />
      </Grid>
		
      <Grid x:Name = "MainContent" Grid.Row = "1"> 
         <ContentControl Content = "{Binding CurrentViewModel}" />
      </Grid> 
		
   </Grid> 

</Window>

Vous pouvez voir que la propriété Click sur le bouton n'est pas utilisée dans le fichier XAML ci-dessus, mais les propriétés Command et CommandParameter sont utilisées pour charger différentes vues lorsque le bouton est enfoncé. Vous devez maintenant définir l'implémentation des commandes dans le fichier MainWindowViewModel.cs mais pas dans le fichier View. Voici l'implémentation complète de MainWindowViewModel.

using MVVMHierarchiesDemo.ViewModel; 
using MVVMHierarchiesDemo.Views; 

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks;

namespace MVVMHierarchiesDemo { 

   class MainWindowViewModel : BindableBase { 
	
      public MainWindowViewModel() { 
         NavCommand = new MyICommand<string>(OnNav); 
      } 

      private CustomerListViewModel custListViewModel = new CustomerListViewModel(); 
      private OrderViewModel orderViewModelModel = new OrderViewModel();

      private BindableBase _CurrentViewModel; 
		
      public BindableBase CurrentViewModel { 
         get { return _CurrentViewModel; } 
         set { SetProperty(ref _CurrentViewModel, value); } 
      } 
		
      public MyICommand<string> NavCommand { get; private set; }

      private void OnNav(string destination) { 
		
         switch (destination) { 
            case "orders": 
               CurrentViewModel = orderViewModelModel; 
               break; 
            case "customers":
               default: 
               CurrentViewModel = custListViewModel; 
               break; 
         } 
      } 
   }
}

Dérivez tous vos ViewModels de la classe BindableBase. Lorsque le code ci-dessus est compilé et exécuté, vous verrez la sortie suivante.

Comme vous pouvez le voir, nous n'avons ajouté que deux boutons et un CurrentViewModel sur notre MainWindow. Maintenant, si vous cliquez sur n'importe quel bouton, il accédera à cette vue particulière. Cliquons sur le bouton Clients et vous verrez que le CustomerListView est affiché.

Nous vous recommandons d'exécuter l'exemple ci-dessus dans une méthode étape par étape pour une meilleure compréhension.