數據綁定ItemsControl

本篇內容主要講解“數據綁定ItemsControl ”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“數據綁定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 ”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！