ItemsControl 数据绑定的两种方式

     最近在学习itemscontrol这个控件的时候，查看了msdn上面的一个例子，并且自己做了一些修改，这里主要使用了两种方式来进行相应的数据绑定，一种是使用datacontext，另外一种是直接将一个类绑定到前台，其实这两种方式原理差不多都是将数据模型的对象添加到一个observablecollection集合中，然后再绑定到前台,下面分别介绍两种绑定方式：

第一种

是将数据存储在一个observablecollection集合中，然后作为itemscontrol的datacontext对象，下面分别贴出相关的代码： 

<window x:class="testgrid.mainwindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:testgrid"
  title="mainwindow" height="350" width="525"> 
 <grid>
  <itemscontrol margin="10" x:name="myitemscontrol" itemssource="{binding}">   
   <itemscontrol.template>
    <controltemplate targettype="itemscontrol">
     <border borderbrush="aqua" borderthickness="1" cornerradius="15">
      <itemspresenter/>
     </border>
    </controltemplate>
   </itemscontrol.template>   
   <itemscontrol.itemspanel>
    <itemspaneltemplate>
     <wrappanel/>
    </itemspaneltemplate>
   </itemscontrol.itemspanel>   
   <itemscontrol.itemtemplate>
    <datatemplate datatype="{ x:type local:datasource}">
     <datatemplate.resources>
      <style targettype="textblock">
       <setter property="fontsize" value="18"/>
       <setter property="horizontalalignment" value="center"/>
      </style>
     </datatemplate.resources>
     <grid>      
      <rectangle fill="green"/>      
      <ellipse fill="red"/>
      <stackpanel>
       <textblock margin="3,3,3,0" text="{binding path=priority,mode=twoway}"/>
       <textblock margin="3,0,3,7" text="{binding path=taskname,mode=twoway}"/>
      </stackpanel>
     </grid>
    </datatemplate>
   </itemscontrol.itemtemplate>  
   <itemscontrol.itemcontainerstyle>
    <style>
     <setter property="control.width" value="100"/>
     <setter property="control.margin" value="5"/>
     <style.triggers>
      <trigger property="control.ismouseover" value="true">
       <setter property="control.tooltip" value="{binding relativesource={x:static relativesource.self}, path=content.description}"/>
      </trigger>
     </style.triggers>
    </style>
   </itemscontrol.itemcontainerstyle>
  </itemscontrol>
 </grid> 
</window>

    这里需要注意的地方是 itemssource="{binding}"这句必须添加，否则后台的数据是无法添加到前台的，这个需要注意，这里贴出后台的代码 

using system.windows.documents;
using system.windows.input;
using system.windows.media;
using system.windows.media.imaging;
using system.windows.navigation;
using system.windows.shapes;

namespace testgrid
{
 /// <summary>
 /// mainwindow.xaml 的交互逻辑
 /// </summary>
 public partial class mainwindow : window
 {
  private observablecollection<datasource> item = null;
  public mainwindow()
  {
   initializecomponent();
   item = new observablecollection<datasource>();
   item.add(
    new datasource()
    {
     priority = "1",
     taskname = "hello"
    }
    );
   item.add(
     new datasource()
    {
     priority = "2",
     taskname = "whats"
    }
    );
   item.add(
    new datasource()
    {
     priority = "3",
     taskname = "your"
    }
    );
   item.add(
    new datasource()
    {
     priority = "4",
     taskname = "name"
    }
    );
   item.add(
    new datasource()
    {
     priority = "5",
     taskname = "can"
    }
    );
   item.add(
    new datasource()
    {
     priority = "6",
     taskname = "you"
    }
    );
   this.myitemscontrol.datacontext = item;

  }
 }
}

using system.windows.documents;
using system.windows.input;
using system.windows.media;
using system.windows.media.imaging;
using system.windows.navigation;
using system.windows.shapes;

namespace testgrid
{
 /// <summary>
 /// mainwindow.xaml 的交互逻辑
 /// </summary>
 public partial class mainwindow : window
 {
  private observablecollection<datasource> item = null;
  public mainwindow()
  {
   initializecomponent();
   item = new observablecollection<datasource>();
   item.add(
    new datasource()
    {
     priority = "1",
     taskname = "hello"
    }
    );
   item.add(
     new datasource()
    {
     priority = "2",
     taskname = "whats"
    }
    );
   item.add(
    new datasource()
    {
     priority = "3",
     taskname = "your"
    }
    );
   item.add(
    new datasource()
    {
     priority = "4",
     taskname = "name"
    }
    );
   item.add(
    new datasource()
    {
     priority = "5",
     taskname = "can"
    }
    );
   item.add(
    new datasource()
    {
     priority = "6",
     taskname = "you"
    }
    );
   this.myitemscontrol.datacontext = item;

  }
 }
}

  这里最重要的一句就是 this.myitemscontrol.datacontext = item;这个是将刚才的集合绑定到itemscontrol控件上，这里需要我们的注意。

第二种

  另外一种方式的数据绑定就是将一个类绑定到这个itemscontrol控件上，具体的方式如下：

<window x:class="testgrid.mainwindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:testgrid"
  title="mainwindow" height="350" width="525">
 <window.resources>
  <local:mydata x:key="mydatasource"/>
 </window.resources>
 <grid>
  <itemscontrol margin="10" x:name="myitemscontrol" itemssource="{binding source={staticresource mydatasource}}">   
   <itemscontrol.template>
    <controltemplate targettype="itemscontrol">
     <border borderbrush="aqua" borderthickness="1" cornerradius="15">
      <itemspresenter/>
     </border>
    </controltemplate>
   </itemscontrol.template>   
   <itemscontrol.itemspanel>
    <itemspaneltemplate>
     <wrappanel/>
    </itemspaneltemplate>
   </itemscontrol.itemspanel>   
   <itemscontrol.itemtemplate>
    <datatemplate datatype="{ x:type local:datasource}">
     <datatemplate.resources>
      <style targettype="textblock">
       <setter property="fontsize" value="18"/>
       <setter property="horizontalalignment" value="center"/>
      </style>
     </datatemplate.resources>
     <grid>      
      <rectangle fill="green"/>      
      <ellipse fill="red"/>
      <stackpanel>
       <textblock margin="3,3,3,0" text="{binding path=priority,mode=twoway}"/>
       <textblock margin="3,0,3,7" text="{binding path=taskname,mode=twoway}"/>
      </stackpanel>
     </grid>
    </datatemplate>
   </itemscontrol.itemtemplate>  
   <itemscontrol.itemcontainerstyle>
    <style>
     <setter property="control.width" value="100"/>
     <setter property="control.margin" value="5"/>
     <style.triggers>
      <trigger property="control.ismouseover" value="true">
       <setter property="control.tooltip" value="{binding relativesource={x:static relativesource.self}, path=content.description}"/>
      </trigger>
     </style.triggers>
    </style>
   </itemscontrol.itemcontainerstyle>
  </itemscontrol>
 </grid> 
</window>

这里我们通过资源来引用一个类，让后使用  itemssource="{binding source={staticresource mydatasource}}"将这个类绑定到itemssource控件上面，这里贴出相关的代码，我们定义了一个mydata的类，将该类作为数据源绑定到前台上，这个类的代码如下

using system;
using system.collections.generic;
using system.collections.objectmodel;
using system.linq;
using system.text;
using system.threading.tasks;

namespace testgrid
{
 public class mydata:observablecollection<datasource>
 {
  public mydata()
  { 
   add (new datasource()
    {
     priority = "1",
     taskname = "my"
    }
    );
   add(new datasource()
    {
     priority = "2",
     taskname = "name"
    }
    );
   add(new datasource()
    {
     priority = "3",
     taskname = "is"
    }
    );
   add(new datasource()
    {
     priority = "4",
     taskname = "ye"
    }
    );
   add(new datasource()
    {
     priority = "5",
     taskname = "bo"
    }
    );
  
  }
  
 }
}

  这里面很重要的一部就是让这个类继承自 observablecollection<datasource>，然后来添加相应的数据源，我们在使用继承的时候需要注意这些技巧。

  其实这两种情况都是将一个数据集合绑定到前台，只不过是一些绑定的方式有所不同，实际的原理都是一样的！

以上就是itemscontrol 数据绑定的两种方式的详细内容，更多关于itemscontrol 数据绑定的资料请关注其它相关文章！