ItemsControl的两种数据绑定方式

简介: 原文:ItemsControl的两种数据绑定方式     最近在学习ItemsControl这个控件的时候,查看了MSDN上面的一个例子,并且自己做了一些修改,这里主要使用了两种方式来进行相应的数据绑定,一种是使用DataContext,另外一种是直接将一个类绑定到前台,其实这两种方式原理差不多都...
原文: 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;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestGrid
{
   public class DataSource :  INotifyPropertyChanged
    {
       public event PropertyChangedEventHandler PropertyChanged;
       public  DataSource()
       {
       }

       private string priority;
       public string Priority
       {
           get
           { 
               return priority; 
           }
           set 
           { 
               priority = value;
               OnPropertyChanged("Priority");
           }
       }


       private string taskname;
       public string TaskName
       {
           get
           {
               return taskname;
           }
           set
           {
               taskname = value;
               OnPropertyChanged("TaskName");
           }
       }

       protected void OnPropertyChanged(string propName)
       {
           if (PropertyChanged != null)
           {
               PropertyChanged(this, new PropertyChangedEventArgs(propName));           
           }
       
       }

       private List<DataSource> datasources;

       public List<DataSource> DataSources
       {
           get { return datasources; }
           set { datasources = value; }
       }
        
    }
}

  这里最重要的一句就是 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>,然后来添加相应的数据源,我们在使用继承的时候需要注意这些技巧。

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

目录
相关文章
|
4月前
|
C#
WPF/C#:数据绑定到方法
WPF/C#:数据绑定到方法
44 0
|
前端开发
MVVM模式下 DataTemplate 中控件的绑定
原文:MVVM模式下 DataTemplate 中控件的绑定   今天给ListBox中通过DataTemplate生成的Button绑定命令时,一开始Button始终找不到绑定的命令。现找到了正确的绑定方式,特来记录一下。
1783 0
|
C# 存储
WPF 实现跑马灯效果的Label控件,数据绑定方式实现
原文:WPF 实现跑马灯效果的Label控件,数据绑定方式实现 项目中需要使用数据绑定的方式实现跑马灯效果的Label,故重构了Label控件;具体代码如下 using System; using System.
2397 0
|
前端开发
MVVM里绑定TreeView控件的SelectedItem
原文:MVVM里绑定TreeView控件的SelectedItem 来源:http://stackoverflow.com/questions/9143107/get-selected-treeviewitem-using-mv...
1056 0
|
C# 容器
WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历)
原文:WPF: WrapPanel 容器的数据绑定(动态生成控件、遍历) 问题:        有一些CheckBox需要作为选项添加到页面上,但是数目不定。
2506 0
|
C#
WPF中Expander与ListBox(ItemsControl)嵌套中的问题
原文:WPF中Expander与ListBox(ItemsControl)嵌套中的问题 1. 当ListBox放在Expander中时,为了要实现实时更新数据的效果,这里使用了    ObservableCollection类型来作为数据源,         初始的简单例子如下:只有一个List...
1805 0
|
C#
数据绑定(二)把控件作为Binding源
原文:数据绑定(二)把控件作为Binding源 下面的代码把一个TextBox的Text属性关联在了Slider的Value属性上 效果如...
808 0
|
容器
数据绑定(五)使用集合对象作为列表控件的ItemsSource
原文:数据绑定(五)使用集合对象作为列表控件的ItemsSource ItemsSource属性可以接收一个IEnumerable接口派生类的实例作为自己的值,ItemsSource里存放的是一条一条的数据,列表式控...
855 0
|
容器
数据绑定(八)使用Binding的RelativeSource
原文:数据绑定(八)使用Binding的RelativeSource 当一个Binding有明确的数据来源时可以通过为Source或ElementName赋值的办法让Binding与之关联,有的时候由于不能确定Source的对象叫什么名字,但知道它与作为Binding目标的对象在UI布局上有相对关系,比如控件自己关联自己的某个数据、关联自己某级容器的数据,就要使用Binding的RelativeSource属性。
785 0
|
C#
WPF下Itemscontrol分组 样式
原文 WPF下Itemscontrol分组 样式     ...
2311 0