Export (0) Print
Expand All
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

ContentControl.ContentTemplate Property

July 28, 2014

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)
XMLNS for XAML: Not mapped to an xmlns.

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 for Windows Phone 8.

templateReference

A StaticResource reference to an existing DataTemplate definition. For more information, see [6b650743-0e38-420e-a328-5d5f008779a6#markup_extensions].

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.

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. For more information, see [6b650743-0e38-420e-a328-5d5f008779a6#markup_extensions].

You frequently set the ContentTemplate in a style, although it can also be set directly on an instance of a ContentControl.

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

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

Three buttons that have shared and unique content.

Windows Phone OS

Supported in: 8.1, 8.0, 7.1, 7.0

Windows Phone

Show:
© 2014 Microsoft