Introduction to ItemsControl

Introduction

This article explains the ItemsControl class type that is a base class for WPF Controls. WPF controls inherit from ItemsControl when they display a collection of items in some fashion.
The ItemsControl layout  is used to show several tabs containing child controls.The tabs form the collection of items that the control represents.

Background

We have set the items in an ItemsControl using data binding. Here we have focused on configuring the collection using the Items property using XAML.
And also, on how the collection can be updated at run time without data binding.

Solution

Use the following procedure to create the sample.

Step 1: Create the WPF application

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="Button_Click">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 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 defines 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.

Output

 

  

Step 2: 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>

Step 3

The Items property returns an ItemCollection object. ItemCollection is a collection type designed to work with ItemsControls in a WPF environment. It includes functionality that ensures that the user interface elements of the control is updated 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.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace ItemsControlDemo

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

 

        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);

        }

    }

}

 

Step 4

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.

Output

Here is the sequence of outputs that we get after running the application.

1. 

 

 

2. On Clicking the team tag button, a list of names appear.

 

 

 

3. On clicking the test tab button, tab 3 appears.

 

 

 

4. On clicking the Tab 3 button, Tab 4 appears.

 

 

 

5. On clicking on Tab 4, Tab 5 appears.

 

 

 

6. Similarly, the tabd continue to appear when clicking the tags consecutively.

 

 

 

7. And, so on.

 

 

 

8.