.NET 4.0+

WPF Data Binding - ItemsSource

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

The one hundred and second part of the Windows Presentation Foundation Fundamentals tutorial looks further at data binding. This article explains how collections can be bound to items controls.

ItemsControl

Earlier in the WPF tutorial we looked at the ItemsControl class. This is the base class for controls that display a collection of items, including the ListBox, ComboBox and TabControl controls. We saw how to set the list of items being displayed using the Items property.

When you want to use data binding to set the collection of items, you don't bind the Items property. Items is actually read-only; you can add and remove items from the list but you cannot replace the collection. Instead of binding Items, you can use the ItemsSource property.

ItemsSource can be data bound to any sequence that implements the IEnumerable interface, although the type of collection used does determine the way in which the control is updated when items are added to or removed. When ItemsSource is set, the Items property cannot be used to control the displayed values. If you later set ItemsSource to null, Items becomes usable again.

To demonstrate data binding with ItemsSource, we need a sample project. Create a new WPF application in Visual Studio, naming the solution, "ItemsSourceDemo". Replace the XAML in the main window with the following:

<Window x:Class="ItemsSourceDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ItemsSource Demo"
        Height="200"
        Width="250">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ListBox Grid.ColumnSpan="2" Margin="1"/>
        <TextBox Name="NewItemInput" Grid.Row="1" Margin="1"/>
        <Button Grid.Column="1" Grid.Row="1" Margin="1">Add</Button>
    </Grid>
</Window>

The XAML creates a window that contains a ListBox, a TextBox and a Button. We'll add code so that clicking the Add button copies any text in the TextBox to a new item in the list, using data binding for the list's content.

Binding ItemsSource

Let's create a new class to hold a list of items that can be bound to the ListBox. Add a new class file named, "DataObject". Replace the code for the class with the following:

public class DataObject
{
    public DataObject()
    {
        ListOfItems = new List<string>();
        ListOfItems.Add("One");
        ListOfItems.Add("Two");
        ListOfItems.Add("Three");
    }

    public IList<string> ListOfItems { get; set; }
}

The class includes a list of strings named, "ListOfItems", which is prepopulated with three items. Modify the constructor for the MainWindow class to set an instance of the class as the data context for the window:

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

Finally, add the ItemsSource binding by changing the XAML for the ListBox, as follows:

<ListBox Grid.ColumnSpan="2" Margin="1" ItemsSource="{Binding ListOfItems}"/>

The syntax is no different from the binding expressions we've seen in earlier articles. Run the program to see the results. You should find that the three items set in the data object's constructor are displayed in the ListBox.