WPF之MVVM解析
来源:互联网 发布:网络喷子都是什么人 编辑:程序博客网 时间:2024/05/29 17:29
我们前面一节白话白眼,都只是从概念上了解了mvvm,了解和做还是差距很大,所以我们同样需要亲自动手实验来真的弄懂mvvm。
例子就取一个生活中的,用mvvm模式完成家庭的操作,比如显示查询家庭成员,增加家庭成员(娶妻生子等),减少家庭成员(嫁女老去等).
确定好这个例子我们就需要先准备一下数据,我们首先想到可能是用数据库,不过silverlight是浏览器客户端的东西,是不能和你以前使用asp.net一样主动直接连接数据库的,如果你真的要开始就连接数据库,你还得准备另外学习一些知识。
我们先构思一下自己的类的样子:
然后我们就可以开始工作,打开vs2010 创建一个silverlight应用程序family.sln.进入设计界面,照着步骤往下,想不明白也别管,到了最后你就完全明白了。
1.在解决方案管理按MVVM的模式新建Views、Models、viewmodels、commands文件夹,这个不是必须的,但是真正做项目的时候是必须,你的组织你的程序文件啊!否则成百上千的文件,你要找个文件都得找成近视眼;
2.在models文件夹下新建一个类familymember.cs,照抄上面的;
同时在cs文件中,将mainpage的构造函数修改一下:
7.运行一下,是不是看见了家庭成员列表。比起以前的asp.net开发是不是很繁杂啊,一点都不习惯啊!例子到这里好像还是没有看出太大的端倪,但应该可以看出view文件已经很白了,我们继续往下。
10.回到familymodelview.cs里面添加上一些语句,完整程序的如下
11.真谛:如果mvvm是象上面那样写程序,那还不如不要呢!记得前面我们白话的时候提过,view就像美女一样,基本靠“绑”,所以删除我们的哪些语句,让click事件滚蛋,直接在view的xaml文件中把命令绑上去。代码如下:
12.再次运行,看看是不是一样的效果。现在你应该明白这种模式的优势了吧,界面设计和程序设计者之间的自由度是不是发挥到了极致。
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,照抄上面的;
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.再次运行,看看是不是一样的效果。现在你应该明白这种模式的优势了吧,界面设计和程序设计者之间的自由度是不是发挥到了极致。
- WPF之MVVM解析
- WPF之MVVM解析
- WPF之MVVM解析
- wpf之mvvm
- wpf之三:WPF的MVVM模式
- WPF-MVVM
- wpf-mvvm
- wpf mvvm
- WPF MvvM
- WPF--MVVM之DataGrid数据源绑定
- Mvvm Light Toolkit for wpf/silverlight系列之准备工作
- Mvvm Light Toolkit for wpf/silverlight系列之数据绑定
- Mvvm Light Toolkit for wpf/silverlight系列之Messenger
- Mvvm Light Toolkit for wpf/silverlight系列之Messenger
- Mvvm Light Toolkit for wpf/silverlight系列之准备工作
- Mvvm Light Toolkit for wpf/silverlight系列之数据绑定
- Mvvm Light Toolkit for wpf/silverlight系列之Messenger
- Mvvm Light Toolkit for wpf/silverlight系列之Messenger
- 最小的k个元素
- windows phone开发学习--磁贴【续】
- 关于控件与验证控件一个不用回传的属性CausesValidation="False"
- dataGridView右键菜单并选中该行
- shell-删除文件的最后一行
- WPF之MVVM解析
- Dojo1.6新特性:再谈AMD规范
- MFC中添加控件打开文件
- ASp.net 剖析三层架构
- 修改MFC窗口的标题
- 部署项目在Linux服务器上jboss和nginx配都没有问题,局域网网内其他机器无法访问解决方法
- SQLOS的内存管理器和SQL SERVER的缓冲池
- vim常用按键(摘自鸟哥的私房菜)
- XenServer安装Linux虚拟机系统如何显示图形界面