Partager via


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.