WPF快速入門系列(8)——MVVM快速入門
一、引言
在前面介紹了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 Fields
private 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 Member
public 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程式設計。在接下來的時間裡，我打算寫一些具有實戰性的內容，因為我之前都是分享一些初級的入門系列，接下來打算分享一些實際的專案實現，以及領域驅動設計方面的內容，希望得到大家的督促和支援。