ContentControl.ContentTemplate Property
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Gets or sets the data template that is used to display the content of the ContentControl.
Namespace: System.Windows.Controls
Assembly: System.Windows (in System.Windows.dll)
Syntax
'Declaration
Public Property ContentTemplate As DataTemplate
public DataTemplate ContentTemplate { get; set; }
<contentControl>
<contentControl.ContentTemplate>
dataTemplate
</contentControl.ContentTemplate>
</contentControl>
<contentControl ContentTemplate="templateReference"/>
XAML Values
dataTemplate
A DataTemplate object element that defines the display for this ContentControl. For more information, see Data Binding.templateReference
A StaticResource reference to an existing DataTemplate definition.
Both attribute and property element syntax for ContentTemplate are shown because defining the template inline as opposed to referencing an existing one as a resource are both equally valid scenarios.
Property Value
Type: System.Windows.DataTemplate
The data template that is used to display the content of the ContentControl.
Remarks
Dependency property identifier field: ContentTemplateProperty
If you want multiple ContentControl objects to use the same UIElement objects, set the ContentTemplate property. For example, suppose you need multiple buttons on your application to have the same graphic. You can create a DataTemplate that contains the graphic and use it as the ContentTemplate for the buttons. If you want the buttons to contain both shared elements and unique content, you can add a ContentPresenter to the DataTemplate and use the TemplateBinding Markup Extension on the Content properties to specify the location of the unique content.
You frequently set the ContentTemplate in a style, although it can also be set directly on an instance of a ContentControl.
Examples
The following example creates three buttons that display identical graphics by setting the ContentTemplate of the Button in a Style.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="ArrowButton" TargetType="Button">
<Setter Property="Margin" Value="5"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Height" Value="20"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<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>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Style="{StaticResource ArrowButton}"></Button>
<Button Style="{StaticResource ArrowButton}"></Button>
<Button Style="{StaticResource ArrowButton}"></Button>
</StackPanel>
The preceding example produces output that is similar to the following illustration.
Buttons that have identical graphics
.png "Three buttons that have the same content.")
The following example creates three buttons that display identical graphics and unique content. These buttons can have unique content as well as the shared graphic because the DataTemplate contains a ContentPresenter.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="ArrowButton" TargetType="Button">
<Setter Property="Margin" Value="5"/>
<Setter Property="Width" Value="50"/>
<Setter Property="Height" Value="20"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<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>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Style="{StaticResource ArrowButton}" Content="1"></Button>
<Button Style="{StaticResource ArrowButton}" Content="2"></Button>
<Button Style="{StaticResource ArrowButton}" Content="3"></Button>
</StackPanel>
The preceding example produces output that is similar to the following illustration.
Buttons that have identical graphics and unique content
.png "Three buttons that have shared and unique content.")
Version Information
Silverlight
Supported in: 5, 4, 3
Silverlight for Windows Phone
Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0
Platforms
For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.