Take a few minutes to study Figures 16.1 and 16.2. If you look closely, you’ll see almost every control we have discussed thus far in the book represented somewhere in one of these two charts. There are a few notable exceptions, but almost every control we have used either inherits from ItemsControl or ContentControl. We know that ContentControl has a Content property that allows it to render almost anything, and we’ve seen references to ItemsControl throughout the book as it relates to lists. We could state that the primary difference between these two base classes is that ContentControl supports the rendering of a single item, whereas ItemsControl supports the rendering of multiple items.

Figure 16.1. The most common list-related classes.

Figure 16.2. The most common content-related classes.

For the remainder of this hour, we look at several important features of all ItemsControl derivatives. We’ll also pay special attention to classes that inherit from Selector. As we uncover important aspects of these base classes, we’ll extend the Contact Manager with some new features.

Looking back over Figure 16.1 we can see just how many controls there are that are related to ItemsControl. The good part about this is that everything we discuss here regarding the base class can be applied to the usage of every derivative.

public class MyTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        DataTemplate dataTemplate;

        //custom logic for determining the template

        return dataTemplate;
    }
}

We are now going to work with the SideBar.xaml. Currently it displays a very simple, barely usable list of contacts. We’ll spice it up using some of our newfound knowledge. Let’s get started working on that now:

It may not have occurred to you when we first introduced data templates in Hour 15, “Digging Deeper into Data Binding,” but you can use any type of element to create your template. In this case we’ve simulated a “contact card” style. Notice that from within a DataTemplate you can make full use of styles and converters (and even other templates). You can even catch events:

As you can see, DataTemplates used as an ItemTemplate behave naturally, bubbling and tunneling events the same as anything else. We’re almost finished with the sidebar now. Let’s add some sorting to finish things off:

As you can see, ItemsControl is quite powerful. We could not demonstrate every feature in this example, but we wanted to make you aware of the possibilities. We’ll use additional features such as ItemsPanel and GroupStyle in Hour 17, “Building a Media Viewer,” so you’ll be ready for it when you see it.

If we look again at Figure 16.1 we see that there is another important base class descended directly from ItemsControl. The Selector class is probably the next most important to understand because its functionality is shared by several very commonly used controls: ComboBox, ListBox, ListView, and TabControl. Selector takes all the functionality of ItemsControl and adds to it the capability to select one or more items. Several important properties come into play at this level. We would like to discuss those properties which we have found the most useful.

To begin with, you can determine which item is selected (or set the selected item) using the SelectedItem property. You can achieve the same effect by working with the SelectedIndex property. This second property represents which element index in the Items collection is selected. Anytime the selection changes, the SelectionChanged event is fired. You can handle this directly or using attached events, as we did with the ComboBox in the Text Editor toolbar from Hour 9. One final property to note is IsSynchronizedWithCurrentItem, which allows you to synchronize the selection across multiple selectors. For example, you might have two ComboBox instances bound to the same collection, and they need to keep their SelectedItem synchronized.

We’ve been using controls that inherit from Selector since the very beginning. But let’s take one more opportunity to examine some XAML and consider it based on our new understanding:

Hopefully this last task helped you to see how each of the base classes contributed functionality to ComboBox. Also, it is important to understand just how the IsSynchronizedWithCurrentItem property works, because using this in some scenarios can cause surprising and undesirable behavior.

To make the States available to our ComboBox, we’ve used a new technique. The ObjectDataProvider is a simple class that lets us point to an ObjectType and a Method. At runtime, the provider locates the ObjectType and calls the method to obtain a set of data. By placing this in the application resources, we have made available a single state list that the entire application can use.

In this hour we have taken a deep dive into the world of ItemsControl. As one of the most important base classes in WPF, this control provides a great deal of functionality that will affect much of what you build with this technology. This control allows for the rendering of multiple items, allowing for custom templating and stylization of each item in the list. Additionally, ItemsControl can arrange its items using any type of Panel and can perform grouping of items as well. For selectable lists, WPF offers Selector and its descendents, each one meeting a specific UI need and providing a wealth of UI possibilities.