MVVM模式大家應該不陌生吧，陌生的快來看看，可是WPF/Silverlight開發中，必備的設計模式。

　　MVVM模式解決了，我們在開發WPF/Silverlight應用程序過程中產生的業務層、表示層比較混亂問題，使表示層和業務層完全分離。

　　早在2005年，John Gossman寫了一篇關于Model-View-ViewModel模式的博文，這種模式被他所在的微軟的項目組用來創建Expression Blend。　

　　從上圖可以看出來，View表示層就是我們通常的XAML，用來表示前臺界面，ViewModel視圖模塊層的作用用來連接業務邏輯和視圖層的關鍵部分，通常我們發出的命令或者事件都是通過這層傳送給業務邏輯層的，Model就是我們的實際數據，業務邏輯代碼等。

　　下面我們用一個Silverlight簡單例子來講解MVVM模式　

　　這個程序就是實現簡單查詢，輸入ID號，查詢符合結果的內容

　　新建一個Silverlight項目，并按照下圖新建目錄　　

　　Command我們用來存放查詢用的命令，Model我們用來存放數據，View我們用來存放顯示查詢的UserControl，ViewModel我們用來存放查詢的ViewModel

　　我們先建立Model層用來存儲訪問要查詢的數據

public?class?DataItem?
{?
public?int?ID?{?get;?set;?}?
public?string?Name?{?get;?set;?}?
}

public?static?class?DataDemo?
{?
private?static?Collection<DataItem>?_DataList?=?null;?

public?static?Collection<DataItem>?DataList?
{?
get
{?
if?(_DataList?==?null)?
{?
_DataList?=?InitDataList();?
}?
return?_DataList;?
}?
}?

private?static?Collection<DataItem>?InitDataList()?
{?
Collection<DataItem>?lists?=?new?Collection<DataItem>();?
for?(int?i?=?0;?i?<?100;?i++)?
{?
DataItem?item?=?new?DataItem();?
item.ID?=?i?+?1;?
item.Name?=?"例子"?+?(i?+?1);?
lists.Add(item);?
}?
return?lists;?
}?
}

　　接下來，我們新建UserControl用來表示查詢的頁面(View)

<UserControl?x:Class="MVVMDemo.View.QueryData"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d=//schemas.microsoft.com/expression/blend/2008
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MVVMDemo.ViewModel"
mc:Ignorable="d"?Height="256"?Width="256">?
<Grid?x:Name="LayoutRoot">?
<Button?x:Name="btnSearch"?Height="24"?HorizontalAlignment="Left"
Margin="164,8,0,0"?VerticalAlignment="Top"?Width="84"?Content="搜索"/>?
<TextBox?x:Name="txtKeyword"?Height="24"?HorizontalAlignment="Left"?
Margin="8,8,0,0"?VerticalAlignment="Top"?Width="152"?TextWrapping="Wrap"?
d:LayoutOverrides="HorizontalAlignment"/>?
<TextBox?x:Name="txtResult"?HorizontalAlignment="Left"?Margin="8,36,0,8"?
Width="240"?TextWrapping="Wrap"?d:LayoutOverrides="VerticalAlignment"/>?
</Grid>?
</UserControl>

到這里我們已經建好了Model,View層，接下來，我們建立ViewModel

public?class?QueryDataViewModel?:?INotifyPropertyChanged?
{?
#region?變量?
///?<summary>?
///?查詢的數據?
///?</summary>?
private?Collection<DataItem>?_DataList?=?null;?
///?<summary>?
///?查詢命令?
///?</summary>?
private?ICommand?_QueryCommand?=?null;?
///?<summary>?
///?搜索關鍵字?
///?</summary>?
private?string?_SearchText?=?string.Empty;?
///?<summary>?
///?搜索結果?
///?</summary>?
private?string?_SearchResult?=?string.Empty;?
#endregion?

#region?屬性?
///?<summary>?
///?搜索關鍵字?
///?</summary>?
public?string?SearchText?
{?
get?{?return?this._SearchText;?}?
set
{?
this._SearchText?=?value;?
if?(this.PropertyChanged?!=?null)?
this.PropertyChanged(this,?new?PropertyChangedEventArgs("SearchText"));?
}?
}?
///?<summary>?
///?搜索結果?
///?</summary>?
public?string?SearchResult?
{?
get?{?return?this._SearchResult;?}?
set
{?
this._SearchResult?=?value;?

if?(this.PropertyChanged?!=?null)?
this.PropertyChanged(this,?new?PropertyChangedEventArgs("SearchResult"));?
}?
}?
///?<summary>?
///?查詢命令?
///?</summary>?
public?ICommand?QueryCommand?
{?
get?{?return?_QueryCommand;?}?
}?
#endregion?

#region?構造函數?
public?QueryDataViewModel(Collection<DataItem>?dataList)?
{?
this._DataList?=?dataList;?
_QueryCommand?=?new?QueryDataCommand(this);?
}?
#endregion?

#region?方法?
///?<summary>?
///?查詢數據?
///?</summary>?
public?void?QueryData()?
{?
if?(!string.IsNullOrEmpty(this.SearchText))?
{?
DataItem?dataItem?=?null;?
foreach?(DataItem?item?in?this._DataList)?
{?
if?(item.ID.ToString()?==?this.SearchText)?
{?
dataItem?=?item;?
break;?
}?
}?
if?(dataItem?!=?null)?
{?
this.SearchResult?=?string.Format("ID:{0}\nName:{1}",?dataItem.ID,?dataItem.Name);?
}?
}?
}?
#endregion?

#region?INotifyPropertyChanged?成員?

public?event?PropertyChangedEventHandler?PropertyChanged;?

#endregion?
}

　　這是一個很簡單的ViewModel，我們定義了兩個屬性，SearchText表示查詢關鍵字，SearchResult表示查詢結果，QueryCommand表示查詢命令，后面我們會和View綁定。

　　QueryDataCommand還沒有實現，接下來我們創建QueryCommand

public?class?QueryDataCommand?:?ICommand?
{?
private?QueryDataViewModel?_QueryDataViewModel;?

public?QueryDataCommand(QueryDataViewModel?queryDataViewModel)?
{?
this._QueryDataViewModel?=?queryDataViewModel;?
}?

#region?ICommand?成員?

public?bool?CanExecute(object?parameter)?
{?
return?true;?
}?

public?event?EventHandler?CanExecuteChanged?
{?
add?{?}?
remove?{?}?
}?

public?void?Execute(object?parameter)?
{?
this._QueryDataViewModel.QueryData();?
}?

#endregion?
}

　　到目前為止，ViewModel已經建立完成。

　　我們將ViewModel綁定到View

　　View的代碼

public?partial?class?QueryData?:?UserControl?
{?
private?QueryDataViewModel?_QueryDataViewModel?=?null;?

///?<summary>?
///?構造函數?
///?</summary>?
public?QueryData()?
{?
InitializeComponent();?

this._QueryDataViewModel?=?new?QueryDataViewModel(MVVMDemo.DataDemo.DataList);?
base.DataContext?=?this._QueryDataViewModel;?
this.btnSearch.Click?+=?new?RoutedEventHandler(btnSearch_Click);?
}?

///?<summary>?
///?點擊事件?
///?</summary>?
///?<param?name="sender"></param>?
///?<param?name="e"></param>?
void?btnSearch_Click(object?sender,?RoutedEventArgs?e)?
{?
if?(this._QueryDataViewModel?!=?null)?
{?
this._QueryDataViewModel.SearchText?=?this.txtKeyword.Text;?
this._QueryDataViewModel.QueryCommand.Execute(null);?
}?
}?
}

　　因為Silverlight沒有Command，我們只能采用這個方法調用Command，wpf則可以在xaml里面直接綁定這個命令

　　前臺xaml我們把輸入框，后結果框綁定

　　輸入框

　　輸入框?Text="{Binding?SearchText,Mode=TwoWay}"
　　結果框?Text="{Binding?SearchResult,Mode=OneWay}"

　　我們把View放到頁面上

<UserControl?x:Class="MVVMDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d=//schemas.microsoft.com/expression/blend/2008
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MVVMDemo.View"
mc:Ignorable="d"?Height="256"?Width="256">?
<Grid>?
<local:QueryData></local:QueryData>?
</Grid>?
</UserControl>

　　到目前為止，MVVM最簡單的例子已經建立完成。我們發現表示層和業務邏輯層從此實現了分離，同時，我們在單元測試上也可以剝離表示層進行。

標簽：