How to change the interaction mode (Windows Store apps using C#/VB/C++ and XAML)

By default, a user can select a single item in a ListView or GridView. You can change the SelectionMode property to a ListViewSelectionMode enumeration value to enable multi-selection or to disable selection. You can also change a ListView or GridView so that a user clicks items like buttons instead of selecting them. Items can't be selectable and clickable at the same time.

Roadmap: How does this topic relate to others? See:

• Roadmap for Windows Store apps using C# or Visual Basic
• Roadmap for Windows Store apps using C++

What you need to know

Technologies

• ListView
• GridView

Prerequisites

• How to add a list view
• How to add a grid view

Instructions

Step 1: Disable selection

You can disable item selection.

• Set the SelectionMode property to the ListViewSelectionMode.None enumeration value.

Here's a ListView with selection disabled.

<ListView x:Name="itemList"
  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
  SelectionMode="None"/>

Step 2: Enable single-selection

Single selection is the default mode for a ListView or GridView control. You need to set this only if you changed it from the default before.

1. Set the SelectionMode property to the ListViewSelectionMode.Single enumeration value.
2. To get the selected item, use the SelectedItem property.
3. To get the index of the selected item, use the SelectedIndex property.

Here, set the selection mode to Single in code.

itemList.SelectionMode = ListViewSelectionMode.Single;

Step 3: Enable simple multi-selection

A user can select multiple items without using modifier keys. A user clicks, taps, or presses the space bar to toggle the selection of the item that has focus.

1. Set the SelectionMode property to the ListViewSelectionMode.Multiple enumeration value.
2. To get the selected items, use the SelectedItems property.

Step 4: Enable non-contiguous multi-selection

A user can select multiple items using the Ctrl and Shift modifier keys. Using the modifier keys enables various ways to select and deselect items.

1. Set the SelectionMode property to the ListViewSelectionMode.Extended enumeration value.
2. To get the selected items, use the SelectedItems property.

Here's a GridView with multi-selection enabled.

<GridView x:Name="itemGrid"
  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
  SelectionChanged="ItemView_SelectionChanged"
  SelectionMode="Extended"/>

Step 5: Enable item click

You can make an item clickable like a button.

1. Set the SelectionMode property to the ListViewSelectionMode.None enumeration value.
2. Set the IsItemClickEnabled property to true.
3. Add a handler for the ItemClick event. In the event handler, add code to perform some action.

Here's a GridView with clickable items. The code in the ItemClick handler navigates to a new page and passes the clicked item as the data for the new page.

<GridView x:Name="itemGridView"
          Margin="116,0,116,46"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick"/>

private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the split page, configuring the new page
    // by passing required information as a navigation parameter
    this.Frame.Navigate(typeof(SplitPage), e.ClickedItem);
}

Related topics

Quickstart: Adding ListView and GridView controls

ListView

GridView

ListViewSelectionMode

Build date: 11/29/2012