MVVM – 事件



事件是一種程式設計結構,它對狀態變化做出反應,並通知已註冊接收通知的任何端點。主要用於透過滑鼠和鍵盤通知使用者輸入,但其用途並不限於此。每當檢測到狀態變化時,例如當物件已載入或初始化時,就可以觸發一個事件來提醒任何感興趣的第三方。

  • 在使用 MVVM(模型-檢視-檢視模型)設計模式的 WPF 應用程式中,檢視模型是負責處理應用程式演示邏輯和狀態的元件。

  • 檢視的程式碼隱藏檔案不應包含任何處理從任何使用者介面 (UI) 元素(例如按鈕或組合框)引發的事件的程式碼,也不應包含任何特定於域的邏輯。

  • 理想情況下,檢視的程式碼隱藏只包含呼叫 InitializeComponent 方法的建構函式,以及一些用於控制或與檢視層互動的附加程式碼,這些程式碼在 XAML 中難以或效率低下地表達,例如複雜的動畫。

讓我們來看一個在我們的應用程式中單擊按鈕的簡單示例。以下是 MainWindow.xaml 檔案的 XAML 程式碼,您將在其中看到兩個按鈕。

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

您會看到上述 XAML 檔案中未使用按鈕 Click 屬性,而是使用 Command 和 CommandParameter 屬性在按下按鈕時載入不同的檢視。現在您需要在 MainWindowViewModel.cs 檔案中定義命令實現,而不是在 View 檔案中。以下是完整的 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; 
         } 
      } 
   }
}

將所有 ViewModel 從 BindableBase 類派生。編譯並執行上述程式碼後,您將看到以下輸出。

MVVM Events MainWindow1

如您所見,我們在 MainWindow 上只添加了兩個按鈕和一個 CurrentViewModel。現在,如果您單擊任何按鈕,它將導航到該特定檢視。讓我們單擊“客戶”按鈕,您將看到顯示 CustomerListView。

MVVM Events MainWindow2

我們建議您逐步執行上述示例,以便更好地理解。

廣告