WPF外包技术分享—WPF的MVVM架构解析(分享)
Posted on 2012-09-09 17:24 WPF外包团队 — 长年承接WPF项目外包与WP8应用外包 阅读(944) 评论(0) 编辑 收藏 举报例子就取一个生活中的，用mvvm模式完成家庭的操作，比如显示查询家庭成员，增加家庭成员（娶妻生子等），减少家庭成员（嫁女老去等).
确定好这个例子我们就需要先准备一下数据，我们首先想到可能是用数据库，不过silverlight是浏览器客户端的东西，是不能和你以前使用asp.net一样主动直接连接数据库的，如果你真的要开始就连接数据库，你还得准备另外学习一些知识。
我们先构思一下自己的类的样子:
class familymember
{
public string Name{get,set;}//姓名
public string Sex{get,set;}//性别（不使用bool,因为现在有中性人了）
public string Title{get,set;}//称谓
public int Age{set,get;}//年龄
}
然后我们就可以开始工作，打开vs2010 创建一个silverlight应用程序 family.sln.进入设计界面，照着步骤往下，想不明白也别管，到了最后你就完全明白了。
1.在解决方案管理按MVVM的模式新建Views、Models、viewmodels、commands文件夹,这个不是必须的，但是真正做项目的时候是必须，你的组织你的程序文件啊！否则成百上千的文件，你要找个文件都得找成近视眼；
2.在models文件夹下新建一个类familymember.cs,照抄上面的；
public class familymember//家庭成员类
{
public string Name{get；set;}--姓名
public string Sex{get；set;}--性别（不使用bool,因为现在有中性人了）
public string Title{get；set;}--称谓
public int Age{set；get;}--年龄
}
3.继续在models文件下再新建一个类family.cs,当然你可以不另外创建，直接写在familymember.cs里面
using System.Collections.Generic; //List类在此名称空间下
public class family//家庭类（就是familymember类的集合）
public class family
{
private List<familymember> _family;
public List<familymember> initfamily()
{
_family = new List<familymember>()
{
new familymember{Name="王大爷",Age=120,Sex="男",Title="太爷"},
new familymember{Name="王老爷",Age=80,Sex="男",Title="爷爷"},
new familymember {Name="王中钱",Age=50,Sex="男",Title="老爸"},
new familymember {Name="王夫人",Age=48,Sex="女",Title="老妈"},
new familymember {Name ="王大二",Age=25,Sex="男",Title="大儿子"},
new familymember {Name="王八蛋",Age=20,Sex="男",Title="小儿子"},
new familymember {Name ="王小妹",Age=18,Sex="女",Title="小女儿"}
};
return _family ;
}
}
4.设计我们的viewmodel文件，在viemodels文件夹下我们新建一个familyviewmodel.cs类
public class familymodelview
{
public List<familymember> myfamily { get; set; }
public familymodelview()
{
//构造函数中初始化家庭成员列表
myfamily = new family().initfamily();
}
}
5.在views下面建一个文件familyview.xaml,这个是用来显示家庭成员的；
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions >
<RowDefinition Height="auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" >
<TextBlock Text="输入查询条件"/>
<TextBox Name="txtsearch" Width="100" Height="23"/>
<Button Name="btnsearch" Content="查询"/>
<Button Name="btnadd" Content="添加"/>
<Button Name="btndel" Content="删除"/>
</StackPanel>
<sdk:DataGrid Grid.Row="1" Width="300" Name="mygrid" ItemsSource="{Binding myfamily}" HorizontalAlignment="Left" IsReadOnly="True">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Name}" Header="姓名" Width="80"/>
<sdk:DataGridTextColumn Binding="{Binding Title}" Header="称谓" Width="80"/>
<sdk:DataGridTextColumn Binding="{Binding Sex}" Header="性别" Width="50"/>
<sdk:DataGridTextColumn Binding="{Binding Age}" Header="年龄" Width="50"/>
<sdk:DataGridTemplateColumn x:Name="c1" Header="删除" >
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Name="btndelete" Content="Del" Click="btndelete_Click"/>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
6.开始拼装，在Mainpage.xaml文件中写上
<Grid x:Name="LayoutRoot" Background="White" >
<local:familyview/>
</Grid>
同时在cs文件中，将mainpage的构造函数修改一下：
public MainPage()
{
InitializeComponent();
this.LayoutRoot.DataContext = new familymodelview();
}
7.运行一下，是不是看见了家庭成员列表。比起以前的asp.net开发是不是很繁杂啊，一点都不习惯啊！例子到这里好像还是没有看出太大的端倪，但应该可以看出view文件已经很白了，我们继续往下。
8.现在王小二娶了媳妇董雨进门，那么这个家庭列表就增加了，我们需要添加方法，如果是asp.net,在view.cs文件调用一下解决了,但这样那个xaml文件又复杂了，理性人和感性人又得纠结了。在mvvm中这个要玩的是familymodelview.cs这个文件。添加一个addmember方法
public void addmember(familymember p)
{
MessageBox.Show("恭喜，你的家庭成员增加了");
}
同时我们把查询和删除的方法也添加上.......
9.方法添加完了，我们需要把这个方法绑定到view里面的添加按钮上，这个时候就需要用到Icommand接口了。在commad下建一个relaycommand.cs
public class relaycommand:ICommand
{
private bool _isenabled;
private Action _handler;
public relaycommand(Action handler)
{
handler = _handler;
}
public bool IsEnabled
{
get { return _isenabled; }
set
{
_isenabled = value;
if (CanExecuteChanged != null)
{
this.CanExecuteChanged(this, EventArgs.Empty);
}
}
}
public bool CanExecute(object parameter)
{
//throw new NotImplementedException();
return IsEnabled;
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
//throw new NotImplementedException();
_handler();
}
}
10.回到familymodelview.cs里面添加上一些语句，完整程序的如下
public List<familymember> myfamily { get; set; }
public string searchtext { get; set; }//这个是用于和那个搜索条件绑定用的
private ICommand _addfamilymembercommand;
private ICommand _deletefamilymembercommand;
private ICommand _searchmembercommand;
public ICommand addfamilymembercommand
{
get { return _addfamilymembercommand; }
}
public ICommand deletefamilymembercommand
{
get { return _deletefamilymembercommand; }
}
public ICommand searchmembercommand
{
get { return _searchmembercommand; }
}
//构造函数
public familymodelview()
{
myfamily = new family().initfamily();
_searchmembercommand = new relaycommand(searchfamilymember) { IsEnabled = true };
_addfamilymembercommand = new relaycommand(addfamilymember) { IsEnabled = true };
_deletefamilymembercommand = new relaycommand(removefamilymember) { IsEnabled = true };
}
//实现功能的方法
public void addfamilymember()
{
MessageBox.Show("恭喜，你的家庭成员增加了");
}
public void removefamilymember()
{
MessageBox.Show("sorry，你的家庭成员减少了");
}
public void searchfamilymember()
{
List<familymember> mylists = null;
if (!string.IsNullOrEmpty(searchtext))
{
mylists = new List<familymember>();
foreach (familymember p in myfamily)
{
if (p.Name.Contains(searchtext))
mylists.Add(p);
}
myfamily = mylists;
}
}
}
10.这个时候回到view界面，程序再狠，也不可能知道艺术家在xaml文件中发挥到天上还是地上，所以作为程序员的你还需要在多废点脑细胞，谁让你能呢！如果说view是个美人，那viewmodel是view背后的那个男人，view要发挥作用是离不开viewmodel的，在view的cs文件中写上：
public partial class familyview : UserControl
{
familymodelview family1 = new familymodelview();
public familyview()
{
InitializeComponent();
}
private void btndelete_Click(object sender, RoutedEventArgs e)
{
family1.
}
private void btnsearch_Click(object sender, RoutedEventArgs e)
{
family1.searchtext = this.txtsearch.Text.Trim();
family1.searchmembercommand.Execute(null );
}
}
运行一下看看，点击添加和删除，是不是提示成功了。别以为到这里就真的会了mvvm，仔细想想，是不是有一点感觉：绕老绕去的写了好多代码其实都是在做无用功，特别是那个Icommand接口。如果你这么想，就说明你真的用心学了。
11.真谛：如果mvvm是象上面那样写程序，那还不如不要呢！记得前面我们白话的时候提过，view就像美女一样，基本靠“绑”，所以删除我们的哪些语句，让click事件滚蛋，直接在view的xaml文件中把命令绑上去。代码如下：
<Button Name="btnsearch" Content="查询" Command="{Binding searchmembercommand}"/>
<Button Name="btnadd" Content="添加" Command="{Binding addfamilymembercommand}" />
<Button Name="btndel" Content="删除" Command="{Binding deletefamilymembercommand}" />
12.再次运行，看看是不是一样的效果。现在你应该明白这种模式的优势了吧，界面设计和程序设计者之间的自由度是不是发挥到了极致。
