Data templates are commonly used in three types of controls, as shown below:

  • 1. Change the data format of cells in Grid. CellTemplate can change the way cells display data.
  • 2. You can modify the ItemTemplate for list controls, such as tree controls, drop-down lists, and list controls.
  • 3. Modify the ContentTemplate, such as the data presentation for the UserControl.

CellTemplate template

Here is an example to demonstrate the use of CellTemplate. The example implements a DataGrid that displays a common data label and adds a new CellTemplate column with two custom buttons, as shown below.

<DataGrid Name="gd" AutoGenerateColumns="False" CanUserSortColumns="True"  CanUserAddRows="False">
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding UserName}" Width="100" Header="Student name"/>
        <DataGridTextColumn Binding="{Binding ClassName}" Width="100" Header="Class Name"/>
        <DataGridTextColumn Binding="{Binding Address}" Width="200" Header="Address"/>
        <DataGridTemplateColumn Header="Operation" Width="100" >
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                        <Button Content="Edit"/>
                        <Button Margin="8 0 0 0" Content="Delete" />
                    </StackPanel>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>
Copy the code

After the operation is complete, the DataGrid is used in the background to bind the data and query the binding effect.

List<Student> students = new List<Student>();
students.Add(new Student() { UserName = "Wang", ClassName = "Class 3, Grade 2", Address = "Guangzhou" });
students.Add(new Student() { UserName = "Xiao li", ClassName = "Class six, Grade Three", Address = Qingyuan City });
students.Add(new Student() { UserName = "Zhang", ClassName = "Class one, One Higher", Address = Shenzhen City });
students.Add(new Student() { UserName = "Black", ClassName = "Class one three", Address = "Ganzhou" });
gd.ItemsSource = students;
Copy the code

The final effect, in the last column of the table of data, is to generate two plain buttons in one column.

ItemTemplate

In the list control, there are often some requirements, such as the drop-down control or tree control to add a CheckBox selection box, an icon or a picture, this time, we can use custom DataTemplate to achieve this function. Next, we use an example to briefly demonstrate its function. Again, this example demonstrates using ListBox and ComboBox to bind a list of color codes and display their colors.

<Window.Resources>
    <DataTemplate x:Key="comTemplate">
        <StackPanel Orientation="Horizontal" Margin="5, 0">
            <Border Width="10" Height="10" Background="{Binding Code}"/>
            <TextBlock Text="{Binding Code}" Margin="5, 0"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>
<Grid>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <ComboBox Name="cob" Width="120" Height="30" ItemTemplate="{StaticResource comTemplate}"/>
        <ListBox Name="lib" Width="120" Height="100" Margin="5, 0"  ItemTemplate="{StaticResource comTemplate}"/>
    </StackPanel>
</Grid>
Copy the code

In the above code, we define a DataTemplate with a border 10px by 10px to display the color code, bind it to the border background color, and define a TextBlock to display the color code. Below is the binding code for the background

List<Color> ColorList = new List<Color>();
ColorList.Add(new Color() { Code = "#FF8C00" });
ColorList.Add(new Color() { Code = "#FF7F50" });
ColorList.Add(new Color() { Code = "#FF6EB4" });
ColorList.Add(new Color() { Code = "#FF4500" });
ColorList.Add(new Color() { Code = "#FF3030" });
ColorList.Add(new Color() { Code = "#CD5B45" });

cob.ItemsSource = ColorList;
lib.ItemsSource = ColorList;
Copy the code

The final test results are as follows:

ItemsControl

Defining an ItemsControl consists of two main steps: 1. Set up an ItemsPanel container to hold the outermost container 2 of the list. Define the DataTemplate of the subitems

<ItemsControl Name="ic">
 <ItemsControl.ItemsPanel>
     <ItemsPanelTemplate>
         <WrapPanel Orientation="Horizontal"/>
     </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>

 <ItemsControl.ItemTemplate>
     <DataTemplate>
         <Button Width="50" Height="50" Content="{Binding Code}"/>
     </DataTemplate>
 </ItemsControl.ItemTemplate>
</ItemsControl>
Copy the code

In the preceding code, a WarpPanel container is defined as the outermost container of ItemControl. The subitem data template is bound to a button. The background code binds several pieces of data.

List<Test> tests = new List<Test>();
tests.Add(new Test() { Code = "1" });
tests.Add(new Test() { Code = "2" });
tests.Add(new Test() { Code = "3" });
tests.Add(new Test() { Code = "4" });
tests.Add(new Test() { Code = "6" });
ic.ItemsSource = tests;
Copy the code



View the structure of the ItemsControl visual tree?



After analyzing the structure, it can be seen that the purple 1 is the outermost WrapPanel container, which is used to hold the arranged buttons. Since the Orientation= “Horizontal” is set in this example, the buttons are arranged horizontally. Then look at the orange 2. As you can see, the outer layer of the subitem is represented by a content, which is a button. Since the binding makes 5 data, 5 buttons with content from 1 to 6 are generated respectively.

  • ItemsPanel can place any element. Obviously not. An ItemsPanel container needs to satisfy one condition,

    Is an element that belongs to the Panel family, otherwise the following error will be displayed:

ContentTemplate

This thing is used too little, detailed can search the relevant use information.