What is difference between a ControlTemplate
and a DataTemplate
in WPF?
7 Answers
Typically a control is rendered for its own sake, and doesn't reflect underlying data. For example, a Button
wouldn't be bound to a business object - it's there purely so it can be clicked on. A ContentControl
or ListBox
, however, generally appear so that they can present data for the user.
A DataTemplate
, therefore, is used to provide visual structure for underlying data, while a ControlTemplate
has nothing to do with underlying data and simply provides visual layout for the control itself.
A ControlTemplate
will generally only contain TemplateBinding
expressions, binding back to the properties on the control itself, while a DataTemplate
will contain standard Binding expressions, binding to the properties of its DataContext
(the business/domain object or view model).
Very basically a ControlTemplate
describes how to display a Control while a DataTemplate
describes how to display Data.
For example:
A Label
is a control and will include a ControlTemplate
which says the Label
should be displayed using a Border
around some Content (a DataTemplate
or another Control).
A Customer
class is Data and will be displayed using a DataTemplate
which could say to display the Customer
type as a StackPanel
containing two TextBlocks
one showing the Name and the other displaying the phone number. It might be helpful to note that all classes are displayed using DataTemplates
, you will just usually use the default template which is a TextBlock
with the Text
property set to the result of the Object's ToString
method.
Troels Larsen has a good explanation on MSDN forum
<Window x:Class="WpfApplication7.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <DataTemplate x:Key="ButtonContentTemplate"> <StackPanel Orientation="Horizontal"> <Grid Height="8" Width="8"> <Path HorizontalAlignment="Stretch" Margin="0,0,1.8,1.8" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" Data="M0.5,5.7 L0.5,0.5 L5.7,0.5"/> <Path HorizontalAlignment="Stretch" Margin="2,3,0,0" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" Data="M3.2,7.5 L7.5,7.5 L7.5,3.5"/> <Path HorizontalAlignment="Stretch" Margin="1.2,1.4,0.7,0.7" VerticalAlignment="Stretch" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Data="M2.5,2.5 L7.5,7.5"/> <Path HorizontalAlignment="Stretch" Margin="1.7,2.0,1,1" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" Data="M3,7.5 L7.5,7.5 L7.5,3.5"/> <Path HorizontalAlignment="Stretch" Margin="1,1,1,1" VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" Data="M1.5,6.5 L1.5,1 L6.5,1.5"/> </Grid> <ContentPresenter Content="{Binding}"/> </StackPanel> </DataTemplate> <ControlTemplate TargetType="Button" x:Key="ButtonControlTemplate"> <Grid> <Ellipse Fill="{TemplateBinding Background}"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Window.Resources> <StackPanel> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="1"/> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="2"/> <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="3"/> </StackPanel> </Window>
(Templates blatently stolen from http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate.aspx and http://msdn.microsoft.com/en-us/library/system.windows.controls.contentcontrol.contenttemplate%28VS.95%29.aspx respectively)
Anyway, the ControlTemplate decides how the Button itself looks, while the ContentTemplate decides how the Content of the button looks. So you could bind the content to one of you data classes and have it present itself however you wanted it.
ControlTemplate
: Represents control style.
DataTemplate
: Represents data style(How would you like to show your data).
All controls are using default control template that you can override through template property.
For exampleButton
template is a control template.
Button
content template is a data template
<Button VerticalAlignment="Top" >
<Button.Template>
<ControlTemplate >
<Grid>
<Rectangle Fill="Blue" RadiusX="20" RadiusY="20"/>
<Ellipse Fill="Red" />
<ContentPresenter Content="{Binding}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="50">
<TextBlock Text="Name" Margin="5"/>
<TextBox Text="{Binding UserName, Mode=TwoWay}" Margin="5" Width="100"/>
<Button Content="Show Name" Click="OnClickShowName" />
</StackPanel>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
public String UserName
{
get { return userName; }
set
{
userName = value;
this.NotifyPropertyChanged("UserName");
}
}
ControlTemplate
DEFINES the visual appearance, DataTemplate
REPLACES the visual appearance of a data item.
Example: I want to show a button from rectangular to circle form => Control Template.
And if you have complex objects to the control, it just calls and shows ToString()
, with DataTemplate
you can get various members and display and change their values of the data object.
All of the above answers are great but there is a key difference that was missed. That helps make better decisions about when to use what. It is ItemTemplate
property:
DataTemplate is used for elements that provide ItemTemplate property for you to replace its items' content using
DataTemplate
s you define previously according to bound data through a selector that you provide.But if your control does not provide this luxury for you then you still can use a
ContentView
that can display its content from predefinedControlTemplate
. Interestingly, you can change theControlTemplate
property of yourContentView
at runtime. One more thing to note that unlike controls withItemTemplate
property, you cannot have aTemplateSelector
for this (ContentView) control. However, you still can create triggers to change theControlTemplate
at runtime.