Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

How to: Customize Data Display with Data Templates


A data template allows you to specify how data is displayed. For example, your object might contain an image and a string. You could define the data template to display the string on the right of the image, the left, or overlay the image. You can add margins between the image and text, a border, or background color with data templates. In addition, you can apply the same data template to all the objects in your collection when using an ItemsControl.

The following examples show the steps to customize the presentation of a data collection in a bound control:

  • Define a data source.

  • Create a data template.

  • Create a control that displays the data.

  • Connect the control to the data source.

For more information about using data templates with controls and styles, see How to: Share Content Among Controls.

Normally, you use a data template by identifying it explicitly by name. However, starting in Silverlight 5, you can create data templates that are associated with an object implicitly by type. For more information, see DataTemplate.DataType. In Silverlight 5, you can also bind to ancestors in the visual tree, which is particularly useful for templates. For more information, see Binding.RelativeSource.

To define a data source

  1. Create the class that defines each object in the collection.

    Public Class Thing
        Public Sub New(ByVal title As String, ByVal imageUri As String)
            Me.Title = title
            Me.Photo = imageUri
        End Sub
        Private photoValue As String
        Private titleValue As String
        Public Property Photo() As String
                Return photoValue
            End Get
            Set(ByVal value As String)
                photoValue = value
            End Set
        End Property
        Public Property Title() As String
                Return titleValue
            End Get
            Set(ByVal value As String)
                titleValue = value
            End Set
        End Property
    End Class
  2. Create a collection of objects.

    'Create collection 
    MyThings = New ObservableCollection(Of Thing)()
    'Create each object in the collection 
    Dim flower As New Thing("Flower", "flower.jpg")
    Dim snake As New Thing("Snake", "snake.jpg")
    Dim sunset As New Thing("Sunset", "sunset.jpg")
    'Add the objects to the collection 

To create a data template

  1. In the resources, create a DataTemplate element. Give the template an x:Key so that it can be referenced by the control.

    Note Note:

    You can set the ItemTemplate directly on the control, but the template is reusable if you create it as a resource.

  2. Define the layout for each item in the collection. In this case, we use a Grid to display each item as an image in the right column and text in the left.

  3. Bind the properties to the data source.

        <DataTemplate x:Key="CBTemplate">
                    <ColumnDefinition />
                    <ColumnDefinition />
                <Image Grid.Column="0" Width="50" Height="50" 
                    Source="{Binding Photo}" Stretch="Fill"/>
                <TextBlock Grid.Column="1" Text="{Binding Title}" 
                    Margin="10" HorizontalAlignment="Left" FontSize="20"/>

To create a control that displays the data

  1. Create a control that derives from ItemsControl, which can display multiple items. In this example, we use a ComboBox.

    Note Note:

    This example uses an ItemsControl because we are displaying a collection of data. You can also use data templates with any ContentControl by setting the ContentTemplate.

  2. Bind the ItemsSource to the data source.

  3. Set the ItemTemplate to the DataTemplate that you've created.

    <ComboBox x:Name="CB1" VerticalAlignment="Top" HorizontalAlignment="Left" 
        ItemTemplate="{StaticResource CBTemplate}" ItemsSource="{Binding}" />

To connect the control to the data source

  • Set the DataContext on the root element so that all the bindings have a source value.

    'LayoutRoot is the name of the root Grid 
    LayoutRoot.DataContext = MyThings

Run the sample

  • To view a running version of this example, click the following link.

    Run this sample

This topic assumes that your project includes three images named flower.jpg, snake.jpg, and sunset.jpg with Build Action values set to Resource.

Community Additions

© 2015 Microsoft