Selector Class in WPF

Introduction

This article explains the Selector class inherited by WPF Controls. The Selector class is a subclass of ItemsControl. ItemsControl provides the functionality required to build a Control that includes a collection of displayable Items of any type. Selector adds the ability for one or more of those items to be selected by the user.

Background

In this article we'll use the TabControl control to see some of the properties and events provided by Selector.

TabControl shows a series of pages of controls, each with a visual tab. When you click one of the tabs it is selected and the appropriate page is displayed.

Solution

We use a TabControl, Buttons and two Labels. A TabControl is used to demonstrate the selector members. We'll demonstrate the properties of the class with code in the Click event of the button, that will update the blank label.

Procedure

Step 1

To Start we need a sample project. Create a new WPF application project in Visual Studio with the name, "SelectorDemo". Once the project is ready, replace the XAML of the main window with the code shown below.

<Window x:Class="SelectorDemo.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="150">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TabControl Name="MyTabControl" Grid.ColumnSpan="3" SelectionChanged="MyTabControl_SelectionChanged">
            <TabItem Header="Red" Background="Red" Selector.Selected="TabItem_Selected" Selector.Unselected="TabItem_Unselected"/>
            <TabItem Header="Yellow" Background="Yellow" Selector.Selected="TabItem_Selected" Selector.Unselected="TabItem_Unselected"/>
            <TabItem Header="Green" Background="Green" Selector.Selected="TabItem_Selected" Selector.Unselected="TabItem_Unselected"/>
            <TabItem Header="Blue" Background="Blue" Selector.Selected="TabItem_Selected" Selector.Unselected="TabItem_Unselected"/>
        </TabControl>
        <Label Grid.Row="1">Selected:</Label>
        <Label Grid.Row="1" Grid.Column="1" Name="SelectedTabLabel"/>
    </Grid>
</Window>

Step 2

SelectedIndex Property

The first is the SelectedIndex property. In the case of the TabControl, this allows you to determine which tab is currently selected by returning the zero-based index of the tab. For other controls, where multiple selections may be permitted, it returns the index of the first item that was selected. If a control has no selection then the property returns -1. This property is particularly useful when the items in the collection that the control is displaying can be accessed by index.

Step 3

Setting SelectedIndex

The SelectedIndex property can be updated from your code to programmatically change the current selection. For example, if you change the code for the Click event as shown below then clicking the button will switch to the green tab.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
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 SelectorDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void MyTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var tab = MyTabControl.SelectedItem as TabItem;
            SelectedTabLabel.Content = tab.Header;
            SelectedTabLabel.Background = tab.Background;
        }
        private void TabItem_Selected(object sender, RoutedEventArgs e)
        {
            var tab = sender as TabItem;
            string header = tab.Header.ToString();
            tab.Header = header + "*";
        }
        private void TabItem_Unselected(object sender, RoutedEventArgs e)
        {
            var tab = sender as TabItem;
            string header = tab.Header.ToString();
            tab.Header = header.Substring(0, header.Length - 1);
        }
    }
}

Output

The following is the sequence of outputs you will get after running your application. 

1.  On clicking the red button, you will get the red color in the bottom TabControl.

2.

 

3.

 

4.