WPF之MVVM解析

概述     我们前面一节白话白眼，都只是从概念上了解了mvvm，了解和做还是差距很大，所以我们同样需要亲自动手实验来真的弄懂mvvm。             例子就取一个生活中的，用mvvm模式完成家庭的 *** 作，比如显示查询家庭成员，增加家庭成员（娶妻生子等），减少家庭成员（嫁女老去等).           确定好这个例子我们就需要先准备一下数据，我们首先想到可能是用数据库，不过silverlig      我们前面一节白话白眼，都只是从概念上了解了mvvm，了解和做还是差距很大，所以我们同样需要亲自动手实验来真的弄懂mvvm。
            例子就取一个生活中的，用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,照抄上面的；     

class familymember          {               public string name{get,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,title="爷爷"},new familymember {name="王中钱",Age=50,title="老爸"},new familymember {name="王夫人",Age=48,Sex="女",title="老妈"},new familymember {name ="王大二",Age=25,title="大儿子"},new familymember {name="王八蛋",Age=20,title="小儿子"},new familymember {name ="王小妹",Age=18,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解析所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。