.NET 4.0+

WPF Data Binding - Data Templates

by Richard Carr, published at http://www.blackwasp.co.uk/WPFDataTemplates.aspx

The one hundred and third part of the Windows Presentation Foundation Fundamentals tutorial continues to investigate data binding. The topic of this article is the use of data templates with items controls, to control the display of items in a list.

Creating a Data Template

Data templates are added to an item control using the ItemTemplate property. The template is created as a DataTemplate object. In XAML, this means using property element syntax for the property and adding the child control, with its bindings, as the DataTemplate element's content.

Let's modify the ListBox's XAML to add a basic data template. The code below replaces the basic text for each item in the list with a StackPanel. The panel contains three TextBlocks, each with different styling and each bound to a property from ContactDetails.

<ListBox Grid.Column="1" Margin="0 0 0 3" ItemsSource="{Binding Contacts}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock FontWeight="Bold" FontSize="12" Text="{Binding Name}"/>
                <TextBlock FontSize="10" Text="{Binding Telephone}"/>
                <TextBlock FontStyle="Italic" FontSize="10" Text="{Binding Email}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Run the program to see the results. When you add new items to the list, you'll see that they are displayed using the template. Other than the styling, the list box operates as before. The image below shows the window with three items added to the list and with the first contact selected.

Each of the items in the list is bound to an item from the collection in exactly the same manner as any other data binding. This means that you can include input controls and use two-way bindings in the data template so that the user can update the items from the list. To demonstrate, replace the XAML for the ListBox with the code below. This swaps the TextBlocks for borderless TextBoxes. If, at runtime, you click the text in one of the controls and edit it, the underlying ContactDetails object is updated to match.

<ListBox Grid.Column="1" Margin="0 0 0 3" ItemsSource="{Binding Contacts}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBox FontWeight="Bold" FontSize="12" BorderThickness="0"
                            Background="Transparent" Text="{Binding Name}"/>
                <TextBox FontSize="10" BorderThickness="0"
                            Background="Transparent" Text="{Binding Telephone}"/>
                <TextBox FontStyle="Italic" BorderThickness="0" FontSize="10"
                            Background="Transparent" Text="{Binding Email}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>