MVVM - Etkinlikler

Bir olay, durumdaki bir değişikliğe tepki veren ve bildirim için kaydedilen tüm uç noktaları bildiren bir programlama yapısıdır. Öncelikle, olaylar fare ve klavye aracılığıyla bir kullanıcıyı bilgilendirmek için kullanılır, ancak bunların kullanışlılığı bununla sınırlı değildir. Bir durum değişikliği tespit edildiğinde, belki bir nesne yüklendiğinde veya başlatıldığında, ilgili üçüncü tarafları uyarmak için bir olay tetiklenebilir.

• MVVM (Model-View-ViewModel) tasarım modelini kullanan bir WPF uygulamasında, görünüm modeli, uygulamanın sunum mantığını ve durumunu işlemekten sorumlu olan bileşendir.

• Görünümün arka plan kod dosyası, Button veya ComboBox gibi herhangi bir Kullanıcı Arabirimi (UI) öğesinden kaynaklanan olayları işlemek için hiçbir kod içermemeli veya etki alanına özel herhangi bir mantık içermemelidir.

• İdeal olarak, bir Görünümün arka plan kodu, yalnızca InitializeComponent yöntemini çağıran bir kurucu ve belki de XAML'de ifade edilmesi zor veya verimsiz olan görünüm katmanını kontrol etmek veya etkileşimde bulunmak için bazı ek kodlar, örneğin karmaşık animasyonlar içerir.

Uygulamamızdaki düğme tıklama olaylarının basit bir örneğine bakalım. Aşağıda, iki düğme göreceğiniz MainWindow.xaml dosyasının XAML kodu verilmiştir.

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

Yukarıdaki XAML dosyasında button Click özelliğinin kullanılmadığını ancak Command ve CommandParameter özelliklerinin, düğmeye basıldığında farklı Görünümler yüklemek için kullanıldığını görebilirsiniz. Şimdi MainWindowViewModel.cs dosyasında komut uygulamasını tanımlamanız gerekir, ancak View dosyasında tanımlamamanız gerekir. Tam MainWindowViewModel uygulaması aşağıdadır.

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

Tüm ViewModel'lerinizi BindableBase sınıfından türetin. Yukarıdaki kod derlendiğinde ve çalıştırıldığında, aşağıdaki çıktıyı göreceksiniz.

Gördüğünüz gibi MainWindow'umuza sadece iki düğme ve bir CurrentViewModel ekledik. Şimdi herhangi bir düğmeyi tıklarsanız, o belirli Görünüme gidecektir. Müşteriler düğmesine tıklayalım ve CustomerListView'ün görüntülendiğini göreceksiniz.

Daha iyi anlamak için yukarıdaki örneği adım adım uygulamanızı öneririz.