MVVM模式大家應(yīng)該不陌生吧，陌生的快來(lái)看看，可是WPF/Silverlight開(kāi)發(fā)中，必備的設(shè)計(jì)模式。

　　MVVM模式解決了，我們?cè)陂_(kāi)發(fā)WPF/Silverlight應(yīng)用程序過(guò)程中產(chǎn)生的業(yè)務(wù)層、表示層比較混亂問(wèn)題，使表示層和業(yè)務(wù)層完全分離。

　　早在2005年，John Gossman寫(xiě)了一篇關(guān)于Model-View-ViewModel模式的博文，這種模式被他所在的微軟的項(xiàng)目組用來(lái)創(chuàng)建Expression Blend。　

　　從上圖可以看出來(lái)，View表示層就是我們通常的XAML，用來(lái)表示前臺(tái)界面，ViewModel視圖模塊層的作用用來(lái)連接業(yè)務(wù)邏輯和視圖層的關(guān)鍵部分，通常我們發(fā)出的命令或者事件都是通過(guò)這層傳送給業(yè)務(wù)邏輯層的，Model就是我們的實(shí)際數(shù)據(jù)，業(yè)務(wù)邏輯代碼等。

　　下面我們用一個(gè)Silverlight簡(jiǎn)單例子來(lái)講解MVVM模式　

　　這個(gè)程序就是實(shí)現(xiàn)簡(jiǎn)單查詢(xún)，輸入ID號(hào)，查詢(xún)符合結(jié)果的內(nèi)容

　　新建一個(gè)Silverlight項(xiàng)目，并按照下圖新建目錄　　

　　Command我們用來(lái)存放查詢(xún)用的命令，Model我們用來(lái)存放數(shù)據(jù)，View我們用來(lái)存放顯示查詢(xún)的UserControl，ViewModel我們用來(lái)存放查詢(xún)的ViewModel

　　我們先建立Model層用來(lái)存儲(chǔ)訪(fǎng)問(wèn)要查詢(xún)的數(shù)據(jù)

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

　　接下來(lái)，我們新建UserControl用來(lái)表示查詢(xún)的頁(yè)面(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>

到這里我們已經(jīng)建好了Model,View層，接下來(lái)，我們建立ViewModel

public?class?QueryDataViewModel?:?INotifyPropertyChanged?
{?
#region?變量?
///?<summary>?
///?查詢(xún)的數(shù)據(jù)?
///?</summary>?
private?Collection<DataItem>?_DataList?=?null;?
///?<summary>?
///?查詢(xún)命令?
///?</summary>?
private?ICommand?_QueryCommand?=?null;?
///?<summary>?
///?搜索關(guān)鍵字?
///?</summary>?
private?string?_SearchText?=?string.Empty;?
///?<summary>?
///?搜索結(jié)果?
///?</summary>?
private?string?_SearchResult?=?string.Empty;?
#endregion?

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

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

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

#region?方法?
///?<summary>?
///?查詢(xún)數(shù)據(jù)?
///?</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?
}

　　這是一個(gè)很簡(jiǎn)單的ViewModel，我們定義了兩個(gè)屬性，SearchText表示查詢(xún)關(guān)鍵字，SearchResult表示查詢(xún)結(jié)果，QueryCommand表示查詢(xún)命令，后面我們會(huì)和View綁定。

　　QueryDataCommand還沒(méi)有實(shí)現(xiàn)，接下來(lái)我們創(chuàng)建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已經(jīng)建立完成。

　　我們將ViewModel綁定到View

　　View的代碼

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

///?<summary>?
///?構(gòu)造函數(shù)?
///?</summary>?
public?QueryData()?
{?
InitializeComponent();?

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

///?<summary>?
///?點(diǎn)擊事件?
///?</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);?
}?
}?
}

　　因?yàn)镾ilverlight沒(méi)有Command，我們只能采用這個(gè)方法調(diào)用Command，wpf則可以在xaml里面直接綁定這個(gè)命令

　　前臺(tái)xaml我們把輸入框，后結(jié)果框綁定

　　輸入框

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

　　我們把View放到頁(yè)面上

<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最簡(jiǎn)單的例子已經(jīng)建立完成。我們發(fā)現(xiàn)表示層和業(yè)務(wù)邏輯層從此實(shí)現(xiàn)了分離，同時(shí)，我們?cè)趩卧獪y(cè)試上也可以剝離表示層進(jìn)行。

標(biāo)簽：