×
Namespaces

Variants
Actions
Revision as of 01:52, 22 November 2011 by hamishwillee (Talk | contribs)

Selection List for Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create Selection List in Qt and WP7

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): WP7 Emulator
CompatibilityArticle
Keywords: SelectionListItem, ListPicker
Created: somnathbanik (14 Nov 2014)
Last edited: hamishwillee (22 Nov 2011)

Contents

Introduction

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

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 displays in the screen.

In Qt, we use the Qt Quick Component SelectionListItem element to launch a Selection Dialog which contains the list. When a season is selected the dialog closes and populates the SelectionListItem subtitle with the selected season.

The Windows Phone 7 code uses the ListPicker control from Silverlight for Windows Phone Toolkit. When an item is selected it is displayed as the "Current" item in a separate text box.

Qt Windows Phone
Selection List for Qt
Selection List for WP7
Example of Qt Example of WP

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

108 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.

×