ItemsControl two ways of data binding

Recently, when learning the ItemsControl control, I checked an example above MSDN and made some modifications myself. Here we mainly use two methods to perform corresponding data binding. One is to use DataContext, and the other is to directly bind a class to the foreground. In fact, the principles of these two methods are almost the same as adding the data model object to an ObservableCollection collection, and then binding it to the foreground. The following are two binding methods:

The first type

It is to store the data in an ObservableCollection collection and then serve as the DataContext object of ItemsControl. The relevant codes are posted below:

<Window x:Class=""
  xmlns="/winfx/2006/xaml/presentation"
  xmlns:x="/winfx/2006/xaml"
  xmlns:local="clr-namespace:TestGrid"
  Title="MainWindow" Height="350" Width="525"> 
 <Grid>
  <ItemsControl Margin="10" x:Name="myItemsControl" ItemsSource="{Binding}">   
   <>
    <ControlTemplate TargetType="ItemsControl">
     <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
      <ItemsPresenter/>
     </Border>
    </ControlTemplate>
   </>   
   <>
    <ItemsPanelTemplate>
     <WrapPanel/>
    </ItemsPanelTemplate>
   </>   
   <>
    <DataTemplate DataType="{ x:Type local:DataSource}">
     <>
      <Style TargetType="TextBlock">
       <Setter Property="FontSize" Value="18"/>
       <Setter Property="HorizontalAlignment" Value="Center"/>
      </Style>
     </>
     <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>
   </>  
   <>
    <Style>
     <Setter Property="" Value="100"/>
     <Setter Property="" Value="5"/>
     <>
      <Trigger Property="" Value="True">
       <Setter Property="" Value="{Binding RelativeSource={x:Static }, Path=}"/>
      </Trigger>
     </>
    </Style>
   </>
  </ItemsControl>
 </Grid> 
</Window>

The thing to note here is that the sentence ItemsSource="{Binding}" must be added, otherwise the data in the background cannot be added to the front desk. This requires attention. The code for the background is posted here.

using ;
using ;
using ;
using ;
using ;
using ;

namespace TestGrid
{
 /// &lt;summary&gt;
 /// Interaction logic /// &lt;/summary&gt;
 public partial class MainWindow : Window
 {
  private ObservableCollection&lt;DataSource&gt; item = null;
  public MainWindow()
  {
   InitializeComponent();
   item = new ObservableCollection&lt;DataSource&gt;();
   (
    new DataSource()
    {
     Priority = "1",
     TaskName = "hello"
    }
    );
   (
     new DataSource()
    {
     Priority = "2",
     TaskName = "whats"
    }
    );
   (
    new DataSource()
    {
     Priority = "3",
     TaskName = "your"
    }
    );
   (
    new DataSource()
    {
     Priority = "4",
     TaskName = "name"
    }
    );
   (
    new DataSource()
    {
     Priority = "5",
     TaskName = "can"
    }
    );
   (
    new DataSource()
    {
     Priority = "6",
     TaskName = "you"
    }
    );
    = item;

  }
 }
}

using ;
using ;
using ;
using ;
using ;
using ;

namespace TestGrid
{
 /// &lt;summary&gt;
 /// Interaction logic /// &lt;/summary&gt;
 public partial class MainWindow : Window
 {
  private ObservableCollection&lt;DataSource&gt; item = null;
  public MainWindow()
  {
   InitializeComponent();
   item = new ObservableCollection&lt;DataSource&gt;();
   (
    new DataSource()
    {
     Priority = "1",
     TaskName = "hello"
    }
    );
   (
     new DataSource()
    {
     Priority = "2",
     TaskName = "whats"
    }
    );
   (
    new DataSource()
    {
     Priority = "3",
     TaskName = "your"
    }
    );
   (
    new DataSource()
    {
     Priority = "4",
     TaskName = "name"
    }
    );
   (
    new DataSource()
    {
     Priority = "5",
     TaskName = "can"
    }
    );
   (
    new DataSource()
    {
     Priority = "6",
     TaskName = "you"
    }
    );
    = item;

  }
 }
}

The most important sentence here is = item; This is to bind the collection just now to the ItemsControl control, which requires our attention here.

The second type

Another way of data binding is to bind a class to this ItemsControl control. The specific method is as follows:

<Window x:Class=""
  xmlns="/winfx/2006/xaml/presentation"
  xmlns:x="/winfx/2006/xaml"
  xmlns:local="clr-namespace:TestGrid"
  Title="MainWindow" Height="350" Width="525">
 <>
  <local:MyData x:Key="myDataSource"/>
 </>
 <Grid>
  <ItemsControl Margin="10" x:Name="myItemsControl" ItemsSource="{Binding Source={StaticResource myDataSource}}">   
   <>
    <ControlTemplate TargetType="ItemsControl">
     <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
      <ItemsPresenter/>
     </Border>
    </ControlTemplate>
   </>   
   <>
    <ItemsPanelTemplate>
     <WrapPanel/>
    </ItemsPanelTemplate>
   </>   
   <>
    <DataTemplate DataType="{ x:Type local:DataSource}">
     <>
      <Style TargetType="TextBlock">
       <Setter Property="FontSize" Value="18"/>
       <Setter Property="HorizontalAlignment" Value="Center"/>
      </Style>
     </>
     <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>
   </>  
   <>
    <Style>
     <Setter Property="" Value="100"/>
     <Setter Property="" Value="5"/>
     <>
      <Trigger Property="" Value="True">
       <Setter Property="" Value="{Binding RelativeSource={x:Static }, Path=}"/>
      </Trigger>
     </>
    </Style>
   </>
  </ItemsControl>
 </Grid> 
</Window>

Here we refer to a class through resources, and then use ItemsSource="{Binding Source={StaticResource myDataSource}}" to bind this class to the ItemsSource control. Here we post the relevant code. We define a MyData class and bind the class as a data source to the foreground. The code of this class is as follows

using System;
using ;
using ;
using ;
using ;
using ;

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"
    }
    );
  
  }
  
 }
}

One of the very important parts here is to let this class inherit from ObservableCollection<DataSource> and then add the corresponding data source. We need to pay attention to these techniques when using inheritance.

In fact, both cases are binding a data set to the foreground, but some binding methods are different, and the actual principles are the same!

The above is the detailed content of the two methods of ItemsControl data binding. For more information about ItemsControl data binding, please follow my other related articles!