MVVM - Sự kiện

Sự kiện là một cấu trúc lập trình phản ứng với sự thay đổi trạng thái, thông báo cho bất kỳ điểm cuối nào đã đăng ký thông báo. Chủ yếu, các sự kiện được sử dụng để thông báo cho người dùng nhập thông qua chuột và bàn phím, nhưng tính hữu ích của chúng không chỉ giới hạn ở đó. Bất cứ khi nào thay đổi trạng thái được phát hiện, có lẽ khi một đối tượng đã được tải hoặc khởi tạo, một sự kiện có thể được kích hoạt để cảnh báo cho bất kỳ bên thứ ba nào quan tâm.

Trong ứng dụng WPF sử dụng mẫu thiết kế MVVM (Model-View-ViewModel), mô hình khung nhìn là thành phần chịu trách nhiệm xử lý trạng thái và logic trình bày của ứng dụng.
Tệp mã phía sau của chế độ xem không được chứa mã để xử lý các sự kiện được tạo ra từ bất kỳ phần tử Giao diện người dùng (UI) nào như Nút hoặc ComboBox cũng như không được chứa bất kỳ lôgic cụ thể nào của miền.
Lý tưởng nhất, mã phía sau của một Chế độ xem chỉ chứa một hàm tạo gọi phương thức InitializeComponent và có lẽ một số mã bổ sung để kiểm soát hoặc tương tác với lớp chế độ xem khó hoặc không hiệu quả để diễn đạt trong XAML, ví dụ như các hoạt ảnh phức tạp.

Hãy xem một ví dụ đơn giản về các sự kiện nhấp vào nút trong ứng dụng của chúng tôi. Sau đây là mã XAML của tệp MainWindow.xaml, trong đó bạn sẽ thấy hai nút.

<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>

Bạn có thể thấy rằng thuộc tính Click button không được sử dụng trong tệp XAML ở trên nhưng thuộc tính Command và CommandParameter được sử dụng để tải các View khác nhau khi nút được nhấn. Bây giờ bạn cần xác định việc triển khai các lệnh trong tệp MainWindowViewModel.cs nhưng không phải trong tệp Xem. Sau đây là phần triển khai MainWindowViewModel hoàn chỉnh.

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; 
         } 
      } 
   }
}

Lấy ra tất cả các ViewModels của bạn từ lớp BindableBase. Khi đoạn mã trên được biên dịch và thực thi, bạn sẽ thấy kết quả sau.

Như bạn có thể thấy, chúng tôi chỉ thêm hai nút và một CurrentViewModel trên MainWindow của chúng tôi. Bây giờ nếu bạn nhấp vào bất kỳ nút nào thì nó sẽ điều hướng đến Chế độ xem cụ thể đó. Hãy nhấp vào nút Khách hàng và bạn sẽ thấy rằng CustomerListView được hiển thị.

Chúng tôi khuyên bạn nên thực hiện ví dụ trên theo phương pháp từng bước để hiểu rõ hơn.