一、引言

　　在前面介紹了WPF一些核心的內容，其中包括WPF布局、依賴屬性、路由事件、綁定、命令、資源樣式和模板。然而，在WPF還衍生出了一種很好的編程框架，即WVVM，在Web端開發有MVC，在WPF客戶端開發中有MVVM，其中VM就相當于MVC中C(Control)。在Web端，微軟開發了Asp.net MVC這樣的MVC框架，同樣在WPF領域，微軟也開發了Prism這樣的MVVM框架。Prism項目地址是：http://compositewpf.codeplex.com/SourceControl/latest。大家有興趣的可以下載源碼研究下。

　　本文所有源碼下載：FristMVVMProject.zip

二、MVVM模式是什么？

　　既然講到MVVM模式，自然第一個問題就是MVVM的含義。MVVM是Model-View-ViewModel的縮寫形式，它通常被用于WPF或Silverlight開發。這三者之間的關系如下圖所示：

　　下面我們分別來介紹下這三部分。

模型(Model)

　　Model——可以理解為帶有字段，屬性的類。

視圖(View)

　　View——可以理解為我們所看到的UI。

視圖模型(View Model)

View Model在View和Model之間，起到連接的作用，并且使得View和Model層分離。View Model不僅僅是Model的包裝，它還包含了程序邏輯，以及Model擴展，例如，如果Model中有一個公開屬性不需要在UI上顯示，此時我們可以不再View Model中去定義它。

在MVVM模式下，WPF程序的運行流程如下圖所示：

?

　　在MVVM中，VM的地位可以說是舉足輕重。使用MVVM模式具有以下幾個特點：

• 視圖的cs文件包括極少的代碼，其核心邏輯都被放在View Model類中，從而使得程序邏輯與視圖耦合度降低。
• ViewModel類作為View的DataContext。
• 在MVVM下，所有的事件和動作都被當成命令，如按鈕的點擊操作，此時不是觸發點擊事件，而是綁定到一個點擊命令，再由命令去執行對應的邏輯。

三、使用MVVM模式來實現WPF程序

　　前面介紹了MVVM一些基礎知識，下面通過一個實例來說明下如何在WPF程序中應用MVVM模式。在之前實現WPF程序時，我們可能會把所有的后臺邏輯都放在視圖的后臺文件中，這樣的實現方式的好處更直觀，方便，對于一些小的應用程序這樣做當然沒什么問題，但是對于復雜的應用程序這樣寫的話，可能會導致后臺代碼顯得非常臃腫，到最好變得難以維護。此時想到的解決方案就是職責分離，使后臺的邏輯分離到其他類中，MVVM其實我理解就是達到這個目的。下面我們按照MVVM的組成部分來實現下這個MVVM程序。

　　第一步：自然是數據部分了，即Model層的實現。在這里定義了一個Person類，其中包含了2個基本的屬性。

public class Person{public string Name { get; set; }public int Age { get; set; }}

　　為了進行測試，下面創建一個靜態方法來獲得測試數據。

public class PersonDataHelper{public static ObservableCollection<Person> GetPersons(){ObservableCollection<Person> samplePersons = new ObservableCollection<Person>();samplePersons.Add(new Person() {Name = "張三", Age = 33});samplePersons.Add(new Person() { Name ="王五", Age= 22 });samplePersons.Add(new Person() { Name = "李四", Age = 35 });samplePersons.Add(new Person() { Name = "LearningHard", Age = 27 });return samplePersons;}}

　　第二步：實現ViewModel層，實現數據和界面之間的邏輯。在視圖模型類中，包含了屬性和命令，因為在MVVM中，事件都當成命令來進行處理，其中命令只能與具有Command屬性的控件進行綁定。既然要包含命令，首先就需要實現一個命令，這里自定義的命令需要實現ICommand接口。這里我們定義了一個QueryCommand。具體的實現代碼如下所示：

public class QueryCommand :ICommand{#region Fieldsprivate Action _execute;private Func<bool> _canExecute;#endregion public QueryCommand(Action execute): this(execute, null){ }public QueryCommand(Action execute, Func<bool> canExecute){if (execute == null)throw new ArgumentNullException("execute");_execute = execute;_canExecute = canExecute;}#region ICommand Memberpublic event EventHandler CanExecuteChanged{add{if (_canExecute != null){CommandManager.RequerySuggested += value;}}remove{if (_canExecute != null){CommandManager.RequerySuggested -= value;}}}public bool CanExecute(object parameter){return _canExecute == null ? true : _canExecute();}public void Execute(object parameter){_execute();}#endregion}

　　接下來就是定義我們的ViewModel類了，具體的實現代碼如下所示：

1 public class PersonListViewModel : INotifyPropertyChanged 2 { 3 #region Fields 4 private string _searchText; 5 private ObservableCollection<Person> _resultList; 6 #endregion 7 8 #region Properties 9 10 public ObservableCollection<Person> PersonList { get; private set; } 11 12 // 查詢關鍵字 13 public string SearchText 14 { 15 get { return _searchText; } 16 set 17 { 18 _searchText = value; 19 RaisePropertyChanged("SearchText"); 20 } 21 } 22 23 // 查詢結果 24 public ObservableCollection<Person> ResultList 25 { 26 get { return _resultList; } 27 set 28 { 29 _resultList = value; 30 RaisePropertyChanged("ResultList"); 31 } 32 } 33 34 public ICommand QueryCommand 35 { 36 get { return new QueryCommand(Searching, CanSearching); } 37 } 38 39 #endregion 40 41 #region Construction 42 public PersonListViewModel() 43 { 44 PersonList = PersonDataHelper.GetPersons(); 45 _resultList = PersonList; 46 } 47 48 #endregion 49 50 #region Command Handler 51 public void Searching() 52 { 53 ObservableCollection<Person> personList = null; 54 if (string.IsNullOrWhiteSpace(SearchText)) 55 { 56 ResultList = PersonList; 57 } 58 else 59 { 60 personList = new ObservableCollection<Person>(); 61 foreach (Person p in PersonList) 62 { 63 if (p.Name.Contains(SearchText)) 64 { 65 personList.Add(p); 66 } 67 } 68 if (personList != null) 69 { 70 ResultList = personList; 71 } 72 } 73 } 74 75 public bool CanSearching() 76 { 77 return true; 78 } 79 80 #endregion 81 82 #region INotifyPropertyChanged Members 83 84 public event PropertyChangedEventHandler PropertyChanged; 85 86 #endregion 87 88 #region Methods 89 private void RaisePropertyChanged(string propertyName) 90 { 91 // take a copy to prevent thread issues 92 PropertyChangedEventHandler handler = PropertyChanged; 93 if (handler != null) 94 { 95 handler(this, new PropertyChangedEventArgs(propertyName)); 96 } 97 } 98 #endregion 99 }

　　第三步：實現View層，設計我們的視圖，設置它的DataContext屬性為ViewModel類。具體的XAML代碼如下所示：

<Window x:Class="MVVMDemo.View.PersonsView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:MVVMDemo.ViewModel"Title="PersonsView" Height="350" Width="400"><!--設置DataContex是ViewModel類，當然你也可以使用后臺代碼設置--><Window.DataContext><local:PersonListViewModel /></Window.DataContext><Grid><Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="*"/></Grid.RowDefinitions><TextBox Grid.Row="0" Name="searchtxt" Text="{Binding Path=SearchText, Mode=TwoWay}" HorizontalAlignment="Left" Height="30" Width="280" Margin="10,0,0,0"></TextBox><Button Grid.Row="0" Name="searchBtn" Content="Search" Command="{Binding Path=QueryCommand}" Width="80" Height="30" HorizontalAlignment="Right" Margin="0,0,10,0"></Button><DataGrid Grid.Row="1" Name="datGrid" HorizontalAlignment="Center"VerticalAlignment="Top" ItemsSource="{Binding Path=ResultList}" Width="300"></DataGrid></Grid> </Window>

　　到此，我們的MVVM的WPF程序就已經完成了，下面就是要看看程序是否達到我們預期的目的。具體的運行結果如下圖所示：

四、總結

　　到這里，本文的內容就分享完了，并且本文也是WPF系列的最后一篇了，希望這個系列可以使得初學者快速上手WPF編程。在接下來的時間里，我打算寫一些具有實戰性的內容，因為我之前都是分享一些初級的入門系列，接下來打算分享一些實際的項目實現，以及領域驅動設計方面的內容，希望得到大家的督促和支持。

?

?

?

總結

以上是生活随笔為你收集整理的WPF快速入门系列(8)——MVVM快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。