How to change the interaction mode (XAML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

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.

Note  In a Universal 8.1 app, items can't be selectable and clickable at the same time. If you're developing for Windows 10 then see Remarks for behavioral changes.

 

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

What you need to know

Technologies

Prerequisites

Instructions

Step 1: Disable selection

You can disable item selection.

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. So if you don't set a value (either in markup or imperatively) then the control will default to this mode.

  1. Either do not set the SelectionMode property, or set it 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);
}

Remarks

The interaction model behavior for a Windows 10 app is different than for previous platforms (but a Universal 8.1 app running on Windows 10 will retain the 8.1 behavior). A Windows 10 app should adopt an interaction model that is either selection or invoke. Review your scenarios to determine which model to adopt.

Another combination is to set IsItemClickEnabled to false and SelectionMode to ListViewSelectionMode.None. This is the read-only configuration.

A final configuration, which is used least often, is to set IsItemClickEnabled to true and SelectionMode to any value except ListViewSelectionMode.None. In this configuration first ItemClick is raised and then SelectionChanged is raised.

Quickstart: Adding ListView and GridView controls

ListView

GridView

ListViewSelectionMode