WPF MVVM模式

標籤：style   blog   http   color   strong   os   

 

1. MVVM 

   MVVM的設計模式最早於2005年由微軟的WPF和Silverlight架構師John Gossman在他的部落格中提到。

    WPF中採用MVVM的架構可以獲得以下好處:

    1. 將UI和業務的設計完全分開，View只是ViewModel的消費者

    2. 有助於我們區別並哪些是UI操作，哪些是業務操作，而不是將他們混淆

    3.層與層之間耦合度降低,這一點非常符合物件導向(OOP)的思想。

 

 2.MVVM 用圖來表示，這個是從網上找的圖,簡單明了,省去了自己畫。

  

 

 

3.下面來一步一步寫代碼吧!

   3.1 在項目根目錄建立Model檔案夾,並新增一個實體類,PersonModel,實現INotifyPropertyChanged通知介面。

  

 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Linq; 5 using System.Text; 6 using System.Threading.Tasks; 7  8 namespace MVVMDemo.Model 9 {10     public class Person : INotifyPropertyChanged11     {12         public event PropertyChangedEventHandler PropertyChanged;13 14         private string name = "吃飯了";15         public string Name16         {17             get { return name; }18             set { name = value; OnPropertyChanged("Name"); }19         }20 21         private void OnPropertyChanged(string propertyName)22         {23             if (PropertyChanged == null) return;24             PropertyChanged(this, new PropertyChangedEventArgs(propertyName));25         }26 27         public void Show(object o)28         {29             this.Name += ",吃飯了";30 31         }32     }33 }

PersonModel

   3.2 在項目根目錄建立ViewModel檔案夾,並新增一個PersonViewModel

 1 using MVVMDemo.Commands; 2 using MVVMDemo.Model; 3 using System; 4 using System.Collections.Generic; 5 using System.Linq; 6 using System.Text; 7 using System.Threading.Tasks; 8  9 namespace MVVMDemo.ViewModel10 {11    public class PersonViewModel12     {13         public PersonCommand PersonCommand { get; set; }14         public Person PersonModel { get; set; }15 16         public PersonViewModel()17         {18             this.PersonModel = new Person();19             this.PersonCommand = new PersonCommand();20             this.PersonCommand.ExecuteCommand = this.PersonModel.Show;21            22         }23 24        25     }26 }

PersonViewModel

  3.3 在項目根目錄建立Commands檔案夾,並新增一個PersonCommand,實現ICommand介面。

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Windows.Input; 7  8 namespace MVVMDemo.Commands 9 {10     public class PersonCommand : ICommand11     {12         public Func<object, bool> CanExecuteCommand = null;13         public Action<object> ExecuteCommand = null;14 15         public bool CanExecute(object parameter)16         {17             if (CanExecuteCommand == null) return true;18             return CanExecuteCommand(parameter);19         }20 21         public event EventHandler CanExecuteChanged;22 23         public void Execute(object parameter)24         {25             if (ExecuteCommand == null) return;26             ExecuteCommand(parameter);27         }28 29         public void OnCanExecuteChanged()30         {31             if (CanExecuteChanged == null) return;32             CanExecuteChanged(this, EventArgs.Empty);33         }34     }35 }

PersonCommand

  

   3.4 MainWindow.xaml調用 
 

 1 <Window x:Class="MVVMDemo.MainWindow" 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4         Title="MainWindow" Height="434.432" Width="607.471"> 5     <Grid Margin="0,0,2,5"> 6  7         <TextBlock  Name="lbShow" Text="{Binding PersonModel.Name}" Margin="10,274,-10,10" /> 8         <Button Command="{Binding PersonCommand}" Height="20" Width="120" Margin="214,211,214,93" Content="MVVM"></Button> 9        <!-- <Button  Height="20" Width="120" Content="{Binding ElementName=gb,Path=Value,UpdateSourceTrigger=PropertyChanged,Mode=OneWay}"></Button> -->10     </Grid>11 </Window>

 

 1 using MVVMDemo.ViewModel; 2 using System.Windows; 3  4 namespace MVVMDemo 5 { 6     /// <summary> 7     /// MainWindow.xaml 的互動邏輯 8     /// </summary> 9     public partial class MainWindow : Window10     {11         public MainWindow()12         {13             InitializeComponent();14             this.DataContext = new PersonViewModel();15             16         }17     }18 }

 

 

      3.5測試結果

    

 

   很簡單的例子，希望能看懂，這是基礎。