×
Namespaces

Variants
Actions

Selection List for Qt and Windows Phone

From Nokia Developer 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
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Symbian
Article
Keywords: SelectionListItem, ListPicker
Created: somnathbanik (14 Nov 2014)
Last edited: hamishwillee (27 Jun 2013)

Contents

Introduction

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.

Implementation

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
y:51
title: "Select Season"
subTitle: selectionDialog.selectedIndex >= 0
? selectionDialog.model.get(selectionDialog.selectedIndex).name
: "Please select"
onClicked: selectionDialog.open()
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:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:local="clr-namespace:SelectionListWp7"
  • Add resources :
<phone:PhoneApplicationPage.Resources>
<local:Model x:Key="Model"/>
<DataTemplate x:Key="SeasonsTemplate">
<StackPanel Orientation="Horizontal">
<Ellipse
Fill="{Binding}"
Width="20"
Height="20"
Margin="0 0 6 0"/>
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>

Then use the ListPicker to create the List item

 
<StackPanel>
<toolkit:ListPicker
x:Name="SeasonsSelector"
Header="Season"
ItemsSource="{Binding Seasons}"
SelectedIndex="1"
SelectionChanged="SeasonsSelectionChanged"/>
<TextBlock
x:Name="SeasonsSelection"
Margin="{StaticResource PhoneMargin}"
CacheMode="BitmapCache"/>
</StackPanel>

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]");
}

Summary

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 08:09.
91 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×