ControlTemplate vs. DataTemplate vs. HierarchicalDataTemplate vs. ItemsPanelTemplate

If you don’t know what they are, then you need to go here first. 

Before we get into differences between them, let me show how one would typically use them. It’s a good practice that all your templates are embedded inside resources / styles. It makes your XAML centralized, shareable and easier to understand (a re factored XAML of sorts, waiting for ReSharper to include this refactoring 🙂 ).

Don’t Do:
<ListBox>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <!– Your Data Template Goes here–>
                </DataTemplate>
            </ListBox.ItemTemplate>
</ListBox>

Recommended:
<Window.Resources>
        <DataTemplate x:Key=”myDataTemplate”>
            <!– Your Data Template Goes here–>            
        </DataTemplate>
</Window.Resources>

<ListBox ItemTemplate=”{StaticResource myDataTemplate}” />

The above XAML holds true also for HierarchicalDataTemplate & ItemsPanelTemplate. But it won’t quite work for ControlTemplate, as ControlTemplate can be assigned to Template property of a class that inherits from ContentControl class, which ListBox doesn’t.

So the listbox code would typically look like this:

<ControlTemplate x:Key=”myControlTemplate” TargetType=”{x:Type ListBoxItem}”>
            <TextBox />
</ControlTemplate>

<ListBox>
            <ListBoxItem Template=”{StaticResource myControlTemplate}” />            
</ListBox>

But the problem with above snippet is, you are manually specifying item which is never the case in real world. Ideally you would like to bind ItemsSource Property of ListBox with some collection obtained at runtime from your data access layer. Solution to this problem is creating a style and binding it to ItemContainerStyle property of ListBox. By doing that you will be able to use ItemsSource for Binding & the ControlTemplate which is present inside the style will be applied to each binded item.

<ListBox x:Name=”myList” ItemsSource=”{Binding}” ItemContainerStyle=”{StaticResource myStyle}” />
<Style x:Key=”myStyle” TargetType=”{x:Type ListBoxItem}”>
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”{x:Type ListBoxItem}”>
                        <TextBox Text=”{Binding collectionPropertyName}” />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
</Style>

ItemsPanelTemplate is mainly used by controls inheriting from ItemsControl class for displaying their Items. ItemsPanelTemplate can be customized through ItemsPanel property of ItemsControl class or any class which inherits from ItemsControl.

<ListBox x:Name=”myList” ItemsPanel=”{StaticResource myItemsPanelTemplate}” />
<ItemsPanelTemplate x:Key=”myItemsPanelTemplate”>            
            <StackPanel Orientation=”Horizontal” />
</ItemsPanelTemplate>

The point of confusion is normally between selecting a ControlTemplate or DataTemplate. Normal saying goes as DataTemplate provides visualization to a business object while ControlTemplate does the same to a UI control. But in my project I see ControlTemplate used almost everywhere. Normally UI guys start creating screens while we are still giving shapes to our domain model (deadlines issues you see). Moreover, I feel one has to get slightly deep with WPF control properties to create an appealing professional UI.  So atleast here, we developers don’t quite mind giving a free hand to UI guys. We just go over to control templates residing inside styles & giving names of Business Object properties inside the bindings created by them. Also ControlTemplate triggers are based on UI control properties which is what UI team is often interested in. Few more differences are given here.

HierarchicalDataTemplate is an extension of DataTemplate with an additional ItemSource property. It is used to render hierarchical data in controls like treeview or menu. HierarchicalDataTemplate ends with a Data Template.

<HierarchicalDataTemplate DataType=”{x:Type Department}” ItemsSource=”{Binding Path=Classes}”>
            <TextBlock Text=”{Binding Path=DepartmentName}” />
</HierarchicalDataTemplate>

<DataTemplate DataType=”{x:Type UniversityClass}”>
            <TextBlock Text=”{Binding Path=ClassName}” />
</DataTemplate>

Hope the above helps you in getting started with WPF templates.