BlackWaspTM

This web site uses cookies. By using the site you accept the cookie policy.This message is for compliance with the UK ICO law.

Windows Presentation Foundation
.NET 4.0+

WPF Data Binding - Data Templates

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.

Main Window XAML

We can now add the basic XAML. The window design includes a ListBox to hold the items from the observable collection and three TextBoxes for the editable properties of the single ContactDetails instance. There's also a Button that we'll use for adding the item shown in the TextBoxes to the list.

Replace the XAML in the main window with the following:

<Window x:Class="DataTemplateDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="300"
        Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        
        <TextBlock>Contacts</TextBlock>
        <ListBox Grid.Column="1" Margin="0 0 0 3"/>

        <TextBlock Grid.Row="1">Name</TextBlock>
        <TextBox Grid.Row="1" Grid.Column="1" Height="22"/>

        <TextBlock Grid.Row="2">Telephone Number</TextBlock>
        <TextBox Grid.Row="2" Grid.Column="1" Height="22"/>

        <TextBlock Grid.Row="3">Email Address</TextBlock>
        <TextBox Grid.Row="3" Grid.Column="1" Height="22"/>

        <Button Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right"
                Height="22" Width="50">Add</Button>
    </Grid>
</Window>

The window design should appear similar to that pictured below:

WPF Data Templates Example Window

Adding Data Bindings

We can now set up the basic data binding for the window. As in previous articles, we need to set the data context for the window and apply binding expressions to the controls. Let's start with the data context. Modify the constructor for the window to set the DataContext property to a new ContactList instance, as follows:

public MainWindow()
{
    InitializeComponent();
    DataContext = new ContactList();
}

The ListBox's ItemsSource must be bound to the Contacts property of the data object:

<ListBox Grid.Column="1" Margin="0 0 0 3" ItemsSource="{Binding Contacts}"/>

To allow the single contact to be editable we can bind the three text boxes to its properties. As the property in the data object is named, "EditableContact", the path to each property includes this, and the property name, separated by a full stop (period).

<TextBlock Grid.Row="1">Name</TextBlock>
<TextBox Grid.Row="1" Grid.Column="1" Height="22"
            Text="{Binding EditableContact.Name}"/>

<TextBlock Grid.Row="2">Telephone Number</TextBlock>
<TextBox Grid.Row="2" Grid.Column="1" Height="22"
            Text="{Binding EditableContact.Telephone}"/>

<TextBlock Grid.Row="3">Email Address</TextBlock>
<TextBox Grid.Row="3" Grid.Column="1" Height="22"
            Text="{Binding EditableContact.Email}"/>

The last step is to add the Click event for the Button control to allow new items to be added to the list. Modify the XAML for the button to register the event, as follows:

<Button Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right"
        Height="22" Width="50" Click="Add_Click">Add</Button>

Finally, add the code for the Click event. This casts the DataContext as a ContactsList object so that it is possible to call the AddEditable method.

private void Add_Click(object sender, RoutedEventArgs e)
{
    var contacts = DataContext as ContactList;
    contacts.AddEditableContact();
}

If you run the program and add items, you'll see that the list box shows, "DataTemplateDemo.ContactDetails", instead of the information entered. This is because there is no data template and the DisplayMemberPath property has not been set. WPF has no way to know what to display, so simply converts the object to a string.

NB: If you only wish to show plain text from a single property of the bound objects, you can set DisplayMemberPath to the name of the property to show.

11 October 2014