.NET 4.0+

WPF Base Classes - ItemsControl

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

The thirty-fifth part of the Windows Presentation Foundation Fundamentals tutorial describes the ItemsControl class. This is a base class for WPF controls that display a collection of related items, including one layout control.

ItemsControl

The ItemsControl type is another base class for WPF controls, including one of the layout controls that we've seen earlier in this tutorial. WPF controls inherit from ItemsControl when they display a collection of items in some fashion. The ItemsControl layout control that was described earlier is TabControl, which is used to show several tabs containing child controls. The tabs form the collection of items that the control presents.

In many situations you will set the items in an ItemsControl using data binding. We'll see this later in the tutorial. In this article we'll look at configuring the collection using the Items property using XAML. You'll also see how the collection can be updated at run time without data binding.

To begin, create a new WPF application project in Visual Studio. Name the project, "ItemsControlDemo". Once the project is initialised, replace the XAML in the main window with the code shown below.

<Window x:Class="ItemsControlDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ItemsControl Demo"
        Width="250"
        Height="200">
    <TabControl Name="MyTabControl">
        <TabItem Header="Test Tab">
            <Button Height="22" Width="100">Click Me</Button>
        </TabItem>
        <TabItem Header="Team">
            <ListBox>
                <ListBox.Items>
                    <ListBoxItem>Mr Brown</ListBoxItem>
                    <ListBoxItem>Mr White</ListBoxItem>
                    <ListBoxItem>Mr Blonde</ListBoxItem>
                    <ListBoxItem>Mr Blue</ListBoxItem>
                    <ListBoxItem>Mr Orange</ListBoxItem>
                    <ListBoxItem>Mr Pink</ListBoxItem>
                </ListBox.Items>
            </ListBox>
        </TabItem>
    </TabControl>
</Window>

The above XAML defines a window that contains a TabControl with two TabItems. The first tab includes a button and the second holds a list box with several items. The TabControl's Items collection is the set of TabItems. The ListBox is also an ItemsControl. Its items are the ListBoxItem elements.

You can see that the Items property is defined differently for the two ItemsControls. The ListBox uses property element syntax and defines the Items property explicitly with the ListBox.Items XAML element. The contents of this tag define the list. For the TabControl the Items property is not included and the items appear directly within the main TabControl element. Both syntax variations are valid for both controls; you could define the TabItems within a TabControl.Items tag or you could omit the ListBox.Items element when populating the list.

When you run the program you should see the tabs, as follows. To show the list you can click the "Team" tab.

Items Property

You can access the Items property from code, allowing you to read and modify the collection. To demonstrate we'll add some code behind the button. Change the XAML for the button as follows to add a Click event:

<Button Height="22" Width="100" Click="Button_Click">Click Me</Button>

Let's start by enumerating the Items property of our TabControl. Add the following code behind the window to create the Click event functionality. The foreach loop iterates through all of the tabs in the TabControl's Items collection. The loop control variable is declared as TabItem in this case, as we know that this is the correct type for our scenario. Within the loop we read the header from the current tab and display its text in a message box. When you run the program you should see one message for each of the two tabs.

private void Button_Click(object sender, RoutedEventArgs e)
{
    foreach (TabItem item in MyTabControl.Items)
    {
        MessageBox.Show(item.Header.ToString());
    }
}

The Items property returns an ItemCollection object. ItemCollection is a collection type that is designed to work with ItemsControls in a WPF environment. It includes functionality that ensures that the user interface elements of the control update correctly and transparently when the collection is changed. The type implements several standard collection interfaces, including IList, ICollection and IEnumerable, which means you can use it as if it were a standard list.

To demonstrate, change the code behind the button as shown below. The new method adds a new TabItem to the TabControl's Items collection every time you click the button. It uses the Add method to add the new item and the Count property to determine how many tabs already exist. Both members are defined in the IList interface.

private void Button_Click(object sender, RoutedEventArgs e)
{
    int newTabNumber = MyTabControl.Items.Count + 1;

    TabItem tabItem = new TabItem();
    tabItem.Header = "Tab " + newTabNumber.ToString();
    MyTabControl.Items.Add(tabItem);
}