.NET 4.0+

WPF Base Classes - Selector

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

The thirty-sixth part of the Windows Presentation Foundation Fundamentals tutorial looks at another WPF control base class. This article describes the Selector class, which is subclassed by controls that allow the user to select from a list of values.

Selector

The Selector class is another type that is inherited by Windows Presentation Foundation (WPF) controls, including one of the WPF layout controls that we've seen earlier in the tutorial. Selector is a subclass of ItemsControl, the type described in the previous article. 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.

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.

To continue 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/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TabControl Name="MyTabControl" Grid.ColumnSpan="3">
            <TabItem Header="Red" Background="Red"/>
            <TabItem Header="Yellow" Background="Yellow"/>
            <TabItem Header="Green" Background="Green"/>
            <TabItem Header="Blue" Background="Blue"/>
        </TabControl>

        <Label Grid.Row="1">Selected:</Label>
        <Label Grid.Row="1" Grid.Column="1" Name="SelectedTabLabel"/>
        <Button Grid.Row="1" Grid.Column="2" Margin="2">Update</Button>
    </Grid>
</Window>

The above XAML describes a window that contains a TabControl, two Labels and a Button, as shown in the image below. We'll use the TabControl to demonstrate the Selector members. We'll demonstrate the properties of the class with code in the Click event of the button, which will update the blank label.

SelectedIndex Property

The first property we'll look at is SelectedIndex. 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, 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.

To demonstrate we need to add some code to the Click event of the button. Start by modifying the button's XAML to define the event, as follows:

<Button Grid.Row="1" Grid.Column="2" Margin="2" Click="Button_Click">Update</Button>

Now you can add the code below to the C# behind the window. This reads the SelectedIndex property and displays the index of the selected tab in a label.

private void Button_Click(object sender, RoutedEventArgs e)
{
    SelectedTabLabel.Content = MyTabControl.SelectedIndex;
}

Try running the program, selecting tabs and clicking the button to see the results.

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, clicking the button will switch to the green tab.

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyTabControl.SelectedIndex = 2;
}

You can also set the SelectedIndex to -1 to clear the selection:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyTabControl.SelectedIndex = -1;
}