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

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