Different Types Of Templates In WPF

Now, let’s see what happens with the data template.

Additional Step: ListBox with DataTemplate.

Add ListBox.ItemTemplate tag and create the Data Template within it, as shown below.

<ListBox Name="dataTemplate">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <Image Source="{Binding CoverImage}" Height="200" Width="150"/>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center">
                    <TextBlock Text="{Binding Name}" FontSize="16"/>
                    <TextBlock Text="{Binding Author}" FontSize="16"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Output

For proper pictorial presentation of the data objects, we should create ItemsControl with DataTemplate but what if we need to customize the default layout of items? In this case ItemsPanelTemplate comes into the picture.

ItemsPanelTemplate

ItemsPanelTemplate enables you to customize the panel, which defines the layout of items in ItemControls like ListBox and ListView. Every ItemControl has its default panel.

For example, the Default panel for ListBox is VirtualizingStackPanel.

To understand it in more detail, let's customize the layout of ListBox in the example stated above. Listbox renders all the items vertically aligned one after the other, each item occupying the whole row. This layout can be customized, as shown below.

Add ListBox.ItemsPanel tag and create ItemsPanelTemplate within it.

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="3"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

Output

It’s clear now that the template of ItemControls like ListBox & ListView can be customized, using DataTemplate and ItemsPanelTemplate. WPF also provides an ItemControl called TreeView, which is hierarchical in nature. DataTemplate and ItemPanelTemplate are of no use in this case.

HierarchialDataTemplate

HierarchialDataTemplate enables you to customize the template of Parent TreeViewItems as well as their Child TreeViewItems.

Let’s take an example to understand it in more detail

1. Create a Child class and declare a string type property “Title”, as shown below.

   public class Child
   {
       public Child(string title)
       {
           Title = title;
       }
       public string Title { get; set; }
   }

2. Create a Parent class and declare a string type property “Title” and a List of type Child class “ChildItems”, as shown below.

   public class Parent
   {
       public Parent(string title)
       {
           Title = title;
           ChildItems = new List<Child>();
       }
       public string Title { get; set; }
       public List<Child> ChildItems { get; set; }
   }

3. Now, create a dummy Hierarchical collection.

   var parent1 = new Parent("Parent #1")
   {
       ChildItems = {
           new Child("Child Item #1.1"),
           new Child("Child Item #1.2"),
           new Child("Child Item #1.3")
       }
   };
   var parent2 = new Parent("Parent #2")
   {
       ChildItems = {
           new Child("Child Item #2.1"),
           new Child("Child Item #2.2"),
           new Child("Child Item #2.3")
       }
   };
   this.treeView.Items.Clear();
   List<Parent> parents = new List<Parent>();
   parents.Add(parent1);
   parents.Add(parent2);

4. Add a TreeView and create a HierarchialDataTemplate for it

   <Grid>
       <TreeView Name="treeView">
           <TreeView.ItemTemplate>
               <HierarchicalDataTemplate ItemsSource="{Binding ChildItems}">
                   <StackPanel Orientation="Horizontal">
                       <Rectangle Height="10" Width="10" Fill="Red"/>
                       <TextBlock Text="{Binding Title}"/>
                   </StackPanel>
               </HierarchicalDataTemplate>
           </TreeView.ItemTemplate>
       </TreeView>
   </Grid>

5. Bind the hierarchical collection parent to the TreeView this.treeView.ItemsSource = parent;

Output

The template has changed the look and feel of the parents as well as their child items.

Conclusion

There are a lot of things we can do using these templates. I have taken very simple examples to make you understand the basics of all four types of templates. I hope this helps. Thank you for reading.