• Article

How to: Customize Data Display with Data Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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
        Get
            Return photoValue
        End Get
        Set(ByVal value As String)
            photoValue = value
        End Set
    End Property
    Public Property Title() As String
        Get
            Return titleValue
        End Get
        Set(ByVal value As String)
            titleValue = value
        End Set
    End Property

End Class

    public class Thing
{
    public Thing(string title, string imageUri)
    {
        this.Title = title;
        this.Photo = imageUri;
    }

    public string Photo { get; set; }
    public string Title { get; set; }

}

  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 
MyThings.Add(flower)
MyThings.Add(snake)
MyThings.Add(sunset)

    //Create collection
MyThings = new ObservableCollection<Thing>();

//Create each object in the collection
Thing flower = new Thing("Flower", "flower.jpg");
Thing snake = new Thing("Snake", "snake.jpg");
Thing sunset = new Thing("Sunset", "sunset.jpg");

//Add the objects to the collection
MyThings.Add(flower);
MyThings.Add(snake);
MyThings.Add(sunset);

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.

    NoteNote:

    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.

    <Grid.Resources>
    <DataTemplate x:Key="CBTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <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"/>
        </Grid>
    </DataTemplate>
</Grid.Resources>

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.

    NoteNote:

    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

    //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

Compiling the Code

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