MVVM模式大家應該不陌生吧，陌生的快來看看，可是WPF/Silverlight開發中，必備的設計模式。 MVVM模式解決了，我們在開發WPF/Silverlight應用程序過程中產生的業務層、表示層比較混亂問題，使表示層和業務層完全分離。早在2005年，John Gossman寫了一篇關於Model-View-ViewModel模式的博文，這種模式被他所在的微軟的項目
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=http://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
這是一個很簡單的ViewModel，我們定義了兩個屬性，SearchText表示查詢關鍵字，SearchResult表示查詢結果，QueryCommand表示查詢命令，後面我們會和View綁定。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
}
QueryDataCommand還沒有實現，接下來我們創建QueryCommand
到目前爲止，ViewModel已經建立完成。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綁定到View
View的代碼
因爲Silverlight沒有Command，我們只能採用這個方法調用Command，wpf則可以在xaml裏面直接綁定這個命令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);
}
}
}
前臺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=http://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最簡單的例子已經建立完成。我們發現表示層和業務邏輯層從此實現了分離，同時，我們在單元測試上也可以剝離表示層進行。
本文來自xsi640的博客，
原文地址:http://www.dotnetdev.cn/2009/12/mvvm%ef%bc%88model-view-viewmodel%ef%bc%89%e5%ae%9e%e4%be%8b%e8%ae%b2%e8%a7%a3/