Posted by: Zeeshan Amjad | February 6, 2010

DataTemplate Vs ControlTemplate


WPF define different template, such as data template, control template, hierarchical data template and item panel template. Here is a class diagram to explain this.

Template_02

We already know that hierarchical data template apply with hierarchical data type, such as tree control, menu or tool bar. Items panel template uses when we are working with items collection such as list box item. But when should we apply data template and when should we apply control template. Let’s take a look at class diagram of control template.

Template_03

The first difference is that we can apply control template only with control and its inherited class. On the other hand we can apply data template to literally any class.

The main concept of data template is data or in other words contents. We define data template when we need to specify how to display that data. On the other hand control template when we want to specify the control. In other words how the control display the data.

Let’s take a look at example of list box. We will apply the data template and control template in list box. Here is a simple program to show uses of both control template and data template on list box item. Here is XAML code of this program.

  1: <Window x:Class="WpfControlTemplate.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:WpfControlTemplate"
  5:     Title="Template" Height="300" Width="300">
  6:     <Window.Resources>
  7:         <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
  8:             <Setter Property="Margin" Value="5"/>
  9:             <Setter Property="Height" Value="20"/>
 10:             <Setter Property="Template">
 11:                 <Setter.Value>
 12:                     <ControlTemplate TargetType="{x:Type ListBoxItem}">
 13:                         <Grid>
 14:                             <Ellipse Width="{TemplateBinding Width}"
 15:                                      Height="{TemplateBinding Height}">
 16:                                 <Ellipse.Fill>
 17:                                     <LinearGradientBrush>
 18:                                         <GradientStop Offset="0" Color="Blue"/>
 19:                                         <GradientStop Offset="0.5" Color="AliceBlue"/>
 20:                                         <GradientStop Offset="1" Color="Blue"/>
 21:                                     </LinearGradientBrush>
 22:                                 </Ellipse.Fill>
 23:                             </Ellipse>
 24:                             <ContentPresenter VerticalAlignment="Center" 
 25:                                               HorizontalAlignment="Center"/>
 26:                         </Grid>
 27:                     </ControlTemplate>
 28:                 </Setter.Value>
 29:             </Setter>
 30:         </Style>
 31:     </Window.Resources>
 32:     <Grid>
 33:         <ListBox Name="list" Margin="5">
 34:             <ListBox.ItemTemplate>
 35:                 <DataTemplate>
 36:                     <TextBlock Text="{Binding Path=Subject}"/>
 37:                 </DataTemplate>
 38:             </ListBox.ItemTemplate>
 39:         </ListBox>
 40:     </Grid>
 41: </Window>
 42: 

Here is complete C# code of the program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace WpfControlTemplate
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             List<Student> subjects = new List<Student>();
 25: 
 26:             subjects.Add(new Student(100, "Linear Algebra"));
 27:             subjects.Add(new Student(200, "Data Structure"));
 28:             subjects.Add(new Student(200, "Software Engineering"));
 29:             subjects.Add(new Student(100, "Differential Equation"));
 30:             subjects.Add(new Student(100, "Complex Analysis"));
 31:             subjects.Add(new Student(200, "Database"));
 32:             subjects.Add(new Student(100, "Number Theory"));
 33: 
 34:             InitializeComponent();
 35: 
 36:             list.ItemsSource = subjects;
 37:         }
 38:     }
 39: 
 40:     public class Student
 41:     {
 42:         public Student(int department, String subject)
 43:         {
 44:             Department = department;
 45:             Subject = subject;
 46:         }
 47: 
 48:         public int Department
 49:         { get; set; }
 50: 
 51:         public String Subject
 52:         { get; set; }
 53:     }
 54: }
 55: 

This is the output of the program.

ControlAndDataTemplate

Advertisements

Responses

  1. Thanks for this information. I followed the example and it works perfectly. I do have a question about extending this. I added an Add and Remove button which add to or remove from the list respectively. However, when I add to the list, the UI doesn’t update, is there something else that has to be done?

    • Use ObservableCollection class instead of List. It would be something like this.

      ObservableCollection subjects = new ObservableCollection();

      To use ObservableCollection also use the System.Collections.ObjectModel name space.

      using System.Collections.ObjectModel;


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: