Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 05:09, 27 June 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Selection List for Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to create selection lists in Qt and Windows Phone 7.

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Keywords: SelectionListItem, ListPicker
Created: somnathbanik (14 Nov 2015)
Last edited: hamishwillee (27 Jun 2013)



Selection lists are lists of items from which the user can select one or more items. The lists can optionally be scrollable, and have a highlight to show single or multiple selections.

Both Qt and Windows Phone have support for selection lists:

This example creates selection lists in both Windows Phone and Qt. The selection lists contain the four seasons of the year as list items. When user selects any of the item it gets displayed in the screen.


The code below starts from an empty project for both Qt and WP7.

Qt Project (main.qml)

We took SelectionListItem component to get the selected item in the list. When user clicks on the SelectionListItem it opens SelectionDialog with the list item in it.

SelectionListItem {
id: item
title: "Select Season"
subTitle: selectionDialog.selectedIndex >= 0
? selectionDialog.model.get(selectionDialog.selectedIndex).name
: "Please select"
SelectionDialog {
id: selectionDialog
titleText: "Select one of the values"
selectedIndex: -1
model: ListModel {
ListElement { name: "Spring" }
ListElement { name: "Summer" }
ListElement { name: "Fall" }
ListElement { name: "Winter" }

When user select any item from the list it is displayed in the SelectionListItem in the subtitle field.

WP7 Project (MainPage.xaml)

  • Let’s add the reference Microsoft.Phone.Controls.Toolkit to the project .
  • Add namespace in XAML:
  • Add resources :
<local:Model x:Key="Model"/>
<DataTemplate x:Key="SeasonsTemplate">
<StackPanel Orientation="Horizontal">
Margin="0 0 6 0"/>
<TextBlock Text="{Binding}"/>

Then use the ListPicker to create the List item

ItemsSource="{Binding Seasons}"
Margin="{StaticResource PhoneMargin}"

By default the index 1 in the list is being selected.

WP7 Project (MainPage.xaml.cs)

When user clicks on any of the list item the SeasonsSelectionChanged() event is called and the selected item it being displayed in the screen.

private void SeasonsSelectionChanged(object sender, SelectionChangedEventArgs e)
SeasonsSelection.Text = "Current selection: " + ((0 < e.AddedItems.Count) ? e.AddedItems[0] : "[nothing]");


Using SelectionListItem we can create a list view of many items, but in case of WP7 the ListPicker control can have at max five items in the drop down list, if the list item is more than five then it opens a full-screen popup for the item selection. Both the effects are controlled by WP7 Toolkit's ListPicker control which combines both the experiences in the same API by automatically selecting the right UX based on the number of items in its list.

Source Code

This page was last modified on 27 June 2013, at 05:09.
88 page views in the last 30 days.