MVVMLight项目的绑定及各种使用场景示例分析

一、绑定：

 主要包含元素绑定和非元素绑定两种。

1、元素绑定：

是绑定的最简单形式，源对象是wpf的元素，并且源对象的属性是依赖项属性。

根据我们之前的知识 ，依赖项属性具有内置的更改通知支持。所以当我们的源对象中改变依赖项属性的值时，会立即更新目标对象中的绑定属性。

以上篇的例子来重写，我们不用额外定义全局公开的属性来支持数据的显示。

如下：

  <stackpanel orientation="vertical" horizontalalignment="left" >
         <textbox x:name="welcometext" width="200" margin="10,10,0,0"></textbox>
         <textblock text="{binding elementname=welcometext,path=text,stringformat='hello \{0\}'}" margin="10,10,0,0"></textblock>
  </stackpanel>

textblock 绑定了名称为welcometext的元素，并且将path指向text属性，所以他的值会跟着 welcometext的变化而变化。

2、非元素类型绑定： 

2.1 source属性：

绑定具体的数据对象：如系统信息跟我们定义的资源数据。

定义window下的全局资源

     <window.resources>
         <solidcolorbrush x:key="borderbrush">red</solidcolorbrush>
     </window.resources>

应用到视图中

<stackpanel margin="10,50,0,0" orientation="vertical" >
        <textblock text="{binding source={x:static systemfonts.iconfontfamily},path=source}" ></textblock>
        <textblock text="{binding source={staticresource borderbrush}}" foreground="{binding source={staticresource borderbrush}}"  ></textblock>
</stackpanel>

结果：

2.2 relativesource 属性：

设置该属性 可以根据当前目标对象的相对关系指向源目标。比如获取当前对象的父亲对象、兄弟对象或者自身的其他属性等一些数据。

<stackpanel margin="10,50,0,0" orientation="vertical" tooltip="top" >
      <stackpanel orientation="horizontal" >
          <textblock width="150" text="获取自身宽度:"  ></textblock>
          <textblock width="200" text="{binding path=width,relativesource={relativesource mode=self}}" ></textblock>
      </stackpanel>
      <stackpanel orientation="horizontal" tooltip="parent" >
          <textblock width="150" text="查找上一层tooltip:" ></textblock>  
          <textblock text="{binding path=tooltip,relativesource={relativesource mode=findancestor,ancestortype={x:type stackpanel}}}"></textblock>
      </stackpanel>
      <stackpanel orientation="horizontal">
          <textblock width="150" text="查找上二层tooltip:" ></textblock>
          <textblock text="{binding path=tooltip,relativesource={relativesource mode=findancestor,ancestortype={x:type stackpanel},ancestorlevel=2}}"></textblock>
      </stackpanel>                               
</stackpan>

 代码很容易理解，这边在创建relativesource的时候，mode模式有四种类型：

	mode成员名称	说明
	findancestor	引用数据绑定元素的父链中的上级。 这可用于绑定到特定类型的上级或其子类。 若要指定 ancestortype 和/或 ancestorlevel，这就是应使用的模式。
	previousdata	允许在当前显示的数据项列表中绑定上一个数据项（不是包含数据项的控件）。
	self	引用正在其上设置绑定的元素，并允许你将该元素的一个属性绑定到同一元素的其他属性上。
	templatedparent	引用应用了模板的元素，其中此模板中存在数据绑定元素。 这类似于设置 templatebindingextension，且仅在 binding 位于模板内部时适用。

注意：ancestortype 指得是查找的对象类型，ancestorlevel 代表搜索的层级的位置，如果是3，则忽略前两个发现的元素。

结果：

2.3 datacontext 属性：

如果想将一个对象绑定到一个由多个元素组成的视图块或者复合元素中，用datacontext 会更好开发和维护。如下

<stackpanel orientation="vertical" datacontext="uinfo" >
    <stackpanel orientation="horizontal" >
        <textblock text="名称：" width="100" ></textblock>
        <textbox text="{binding name}" width="100" ></textbox>
    </stackpanel>
    <stackpanel orientation="horizontal">
        <textblock text="性别：" width="100" ></textblock>
        <textbox text="{binding sex}" width="100" ></textbox>
    </stackpanel>
</stackpanel>

二、绑定的各种使用场景：

数据绑定有普通的控件绑定应用：比如 下拉框、单选框、复选框、普通文本框 、日期框等；

复杂的绑定有数据列表绑定，用户控件信息绑定等，比如 listbox，datagrid，usercontrol绑定等。

1、下拉框：

view代码：

<stackpanel margin="10,20,0,50">
  <textblock text="下拉框" fontweight="bold" fontsize="12" margin="0,5,0,5" ></textblock>
  <dockpanel x:name="combbox" >                
      <stackpanel dockpanel.dock="left" width="240">
          <combobox width="200" horizontalalignment="left" itemssource="{binding combboxlist}" selecteditem="{binding combboxitem}" displaymemberpath="text" selectedvaluepath="key" ></combobox>
      </stackpanel>
      
      <stackpanel dockpanel.dock="right" width="240" orientation="horizontal" datacontext="{binding combboxitem}" >
          <textblock text="{binding key,stringformat='结果：\{0\}'}" margin="0,0,15,0" ></textblock>
          <textblock text="{binding text}"></textblock>
      </stackpanel>
      
  </dockpanel>
</stackpanel>

 model代码：

 public class complexinfomodel:observableobject
    {
        private string key;
        /// <summary>
        /// key值
        /// </summary>
        public string key
        {
            get { return key; }
            set { key = value; raisepropertychanged(()=>key); }
        }
        private string text;
        /// <summary>
        /// text值
        /// </summary>
        public string text
        {
            get { return text; }
            set { text = value; raisepropertychanged(()=>text); }
        }
    }

 viewmodel代码：

        #region 下拉框相关
         private complexinfomodel combboxitem;
         /// <summary>
         /// 下拉框选中信息
         /// </summary>
         public complexinfomodel combboxitem
         {
             get { return combboxitem; }
             set { combboxitem = value; raisepropertychanged(() => combboxitem); }
         }
 
 
         private list<complexinfomodel> combboxlist;
         /// <summary>
         /// 下拉框列表
         /// </summary>
         public list<complexinfomodel> combboxlist
         {
             get { return combboxlist; }
             set { combboxlist = value; raisepropertychanged(()=>combboxlist); }
         }
         #endregio

说明：combboxitem是一个全局的属性，作用在当前页面的数据上下文中，结果显示的内容指向下拉框中的选中值，达到共用一个数据的目的。 

这边有四个地方需要注意的：itemssource：数据源；selecteditem：选中的项；displaymemberpath：绑定时显示的所属值；selectedvaluepath ：绑定时候key的所属值。 

结果：

2、单选框

    <stackpanel margin="10,0,0,50">
         <textblock text="单选框" fontweight="bold" fontsize="12" margin="0,5,0,5" ></textblock>
         <dockpanel x:name="radiobutton" >
             <stackpanel dockpanel.dock="left" width="240">
                 <radiobutton content="{binding singleradio}" ischecked="{binding issingleradiocheck}" horizontalalignment="right" width="240" >
                 </radiobutton>
             </stackpanel>
             <stackpanel dockpanel.dock="right" width="240" orientation="horizontal">
                 <textblock text="{binding issingleradiocheck,stringformat='结果：\{0\}'}" ></textblock>
             </stackpanel>
         </dockpanel>
     </stackpanel>

说明：注意这边使用到了两个属性： singleradio，issingleradiocheck，一个用于显示单选框内容，一个用于表示是否选中

结果：

3、组合单选框

我们一般会用单选框做组合表示唯一选项，比如性别包含男女，但是只能选择一个。而更多的场景是包含多个选项，但是只能单选的，这时候就需要做单选框组。

  <stackpanel margin="10,0,0,50">
       <textblock text="组合单选框" fontweight="bold" fontsize="12" margin="0,5,0,5"></textblock>
       <dockpanel x:name="groupradiobutton" >
           <stackpanel dockpanel.dock="left" width="240">
               <itemscontrol itemssource="{binding radiobuttons}">
                   <itemscontrol.itemtemplate>
                       <datatemplate>
                           <radiobutton content="{binding content}" ischecked="{binding ischeck}" groupname="radiobuttons"
                                        command="{binding datacontext.radiocheckcommand,relativesource={relativesource mode=findancestor,ancestortype=itemscontrol}}">  
                           </radiobutton>                                    
                       </datatemplate>
                   </itemscontrol.itemtemplate>
               </itemscontrol>
           </stackpanel>

           <stackpanel dockpanel.dock="right" width="240" orientation="horizontal">
               <textblock text="{binding radiobutton.content,stringformat='结果：\{0\}'}" ></textblock>
           </stackpanel>
       </dockpanel>
  </stackpanel

这边使用了itemscontrol，可以根据模板来定义内容，我们在模板中放置我们需要用到的内容。这边需要注意的是：groupname用一样的，来代表这是一个单选控件组合。

这边有是三个属性进行绑定相关：

radiobuttons：单选框列表数据（循环绑定）；content：单选框显示的内容；ischeck：单选框的是否选中。 

结果：

4、复选框，复选框与单选框的使用情况类似：

<stackpanel margin="10,0,0,50">
            <textblock text="复合框" fontweight="bold" fontsize="12" margin="0,5,0,5" ></textblock>
            <dockpanel x:name="groupcheckbutton" >
                <stackpanel dockpanel.dock="left" width="240">
                    <itemscontrol itemssource="{binding checkbuttons}" x:name="cbt" >
                        <itemscontrol.itemtemplate>
                            <datatemplate>
                                <checkbox content="{binding content}" ischecked="{binding ischeck}"
                                             command="{binding datacontext.checkcommand,relativesource={relativesource mode=findancestor,ancestortype=itemscontrol}}"/>
                            </datatemplate>
                        </itemscontrol.itemtemplate>
                    </itemscontrol>
                </stackpanel>
                <stackpanel dockpanel.dock="right" width="240" orientation="horizontal">
                    <textblock text="{binding checkinfo,stringformat='结果：\{0\}'}" ></textblock>
                </stackpanel>
            </dockpanel>
</stackpanel>

结果：

5、树形控件

view代码：

<stackpanel margin="10,0,0,50">
            <textblock text="树" fontweight="bold" fontsize="12" margin="0,5,0,5" ></textblock>
            <dockpanel x:name="treebutton" >
                <stackpanel dockpanel.dock="left" width="240">
                        <treeview itemssource="{binding treeinfo}" x:name="tree" borderthickness="0">
                        <treeview.itemtemplate>
                            <hierarchicaldatatemplate itemssource="{binding children}">
                                <textblock text="{binding nodename}"/>
                            </hierarchicaldatatemplate>
                        </treeview.itemtemplate>
                    </treeview>
                </stackpanel>
                
                <stackpanel dockpanel.dock="right" width="240" orientation="horizontal" datacontext="{binding selecteditem,elementname=tree}">
                        <textblock text="结果："/>
                    <textblock text="{binding nodeid,stringformat='nodeid：\{0\}'}"  margin="0,0,20,0"  />
                    <textblock text="{binding nodename,stringformat='nodename：\{0\}'}"/>
                </stackpanel>                    
            </dockpanel>
</stackpanel>

model代码

  public class treenodemodel : observableobject
     {
         public string nodeid { get; set; }
         public string nodename { get; set; }
         public list<treenodemodel> children { get; set; }
     }

viewmodel代码

 #region 树控件
        private list<treenodemodel> treeinfo;
        /// <summary>
        /// 树控件数据信息
        /// </summary>
        public list<treenodemodel> treeinfo
        {
            get { return treeinfo; }
            set { treeinfo = value; raisepropertychanged(()=>treeinfo); }
        }
  #endregion

 结果：

6、listbox

当我们需要用到循环的列表内容，并且模板化程度高的时候，建议使用listbox来做绑定。

view代码：

<stackpanel margin="10,0,0,50" orientation="vertical" >
  <textblock text="listbox模板" fontweight="bold" fontsize="12" margin="0,5,0,5" ></textblock>
      <dockpanel >
          <stackpanel horizontalalignment="left" dockpanel.dock="left" >
              <listbox x:name="lb" itemssource="{binding listboxdata}" width="500" borderthickness="0" >
                  <listbox.itemspanel>
                      <itemspaneltemplate>
                          <wrappanel width="{binding actualwidth,relativesource={relativesource ancestortype={x:type listbox}}}"/>
                      </itemspaneltemplate>
                  </listbox.itemspanel>
                  <listbox.itemtemplate>
                      <datatemplate>
                          <stackpanel>
                              <image source="{binding img}" width="96" height="96"/>
                              <textblock horizontalalignment="center" text="{binding info}"/>
                          </stackpanel>
                      </datatemplate>
                  </listbox.itemtemplate>
              </listbox>
          </stackpanel>
          <stackpanel dockpanel.dock="right" datacontext="{binding selecteditem,elementname=lb}" margin="15" orientation="vertical" >
              <textblock text="{binding info,stringformat='选中：\{0\}'}" ></textblock>
          </stackpanel>
      </dockpanel>
</stackpanel>

viewmodel代码：

     #region listbox 模板
      private ienumerable listboxdata;
      /// <summary>
      /// lisbox数据模板
      /// </summary>
      public ienumerable listboxdata
      {
          get { return listboxdata; }
          set { listboxdata = value;raisepropertychanged(()=>listboxdata); }
      }
      #endregion

初始数据：

private void initlistboxlist()
     {
      listboxdata = new observablecollection<dynamic>(){
        new { img="/mvvmlightdemo;component/images/1.jpg",info="樱桃" },
        new { img="/mvvmlightdemo;component/images/2.jpg",info="葡萄" },
        new { img="/mvvmlightdemo;component/images/3.jpg",info="苹果" },
        new { img="/mvvmlightdemo;component/images/4.jpg",info="猕猴桃" },
        new { img="/mvvmlightdemo;component/images/5.jpg",info="柠檬" },
     };
 

 结果：

7、用户控件的集合绑定：

listbox的列表绑定远远不能满足我们实际工作中的需求，

出于对灵活性、复用性以及代码精简的考虑，需要保证循环列表中的单个元素是独立的元素片段，类似web中的局部视图。 这时候，使用用户控件会好很多。

我们先写一个用户控件，分别设置了他的样式和绑定的属性值，如下：

<usercontrol x:class="mvvmlightdemo.content.fruitinfoview"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              mc:ignorable="d" 
              d:designheight="300" d:designwidth="300">
     <grid>
         <grid.resources>
             <style targettype="{x:type stackpanel}">
                 <style.triggers>
                     <trigger property="ismouseover" value="true">
                         <setter property="rendertransform">
                             <setter.value>
                                 <rotatetransform angle="10"></rotatetransform>
                             </setter.value>
                         </setter>
                         <setter property="background" value="#3b9cfb" />
                     </trigger>
                 </style.triggers>
             </style>
         </grid.resources>
         
         
         <stackpanel orientation="vertical" margin="10">
             <image source="{binding img}" width="96" height="96" />
             <textblock horizontalalignment="center" text="{binding info}"/>
         </stackpanel>
         
     </grid>
</usercontrol>

 在目标视图页面注册并使用：

xmlns:content="clr-namespace:mvvmlightdemo.content"

<stackpanel margin="10,0,0,50" orientation="vertical" >
                    <textblock text="用户控件模板列表" fontweight="bold" fontsize="12" margin="0,5,0,5" ></textblock>
                    <stackpanel horizontalalignment="left" width="500" >
                         <itemscontrol itemssource="{binding filist}" horizontalalignment="left" >
                            <itemscontrol.itemtemplate>
                                <datatemplate>
                                    <content:fruitinfoview />
                                </datatemplate>                       
                            </itemscontrol.itemtemplate>
                            <!-- 面板显示模板 -->
                            <itemscontrol.itemspanel>
                                <itemspaneltemplate>
                                    <wrappanel orientation="horizontal">
                                    </wrappanel>
                                </itemspaneltemplate>
                            </itemscontrol.itemspanel>
                        </itemscontrol>
                    </stackpanel>
</stackpanel>

  结果：

后记：这篇更确切的说是绑定的相关知识，只是应用了mvvm模式来实现。

工作太忙了，写的太慢，其实后面几篇都已经成稿了，一直放在note里面等待认真检查，品质太差怕误导其他开发人员。

以上就是mvvmlight项目的绑定及各种使用场景示例分析的详细内容，更多关于mvvmlight项目的绑定及各种使用场景的资料请关注其它相关文章！