Selection List for Qt and WP7

Comments

Croozeus -

Hi Somnath,

Good work, we need more such articles.

It would be also good to add the list of visual differences between the components of the platforms. For example, here in WP7 selection list you have feasibility of app title being visible, showing the current selection text, etc.. would be good to have a para describing that these are available in WP7 selection list and not in QML and vice-versa.

croozeus 04:37, 15 November 2011 (EET)

Croozeus -

Just one more thing - instead of using the hard coded value in QML (y:51) it would be advisable to demonstrate using anchors.

croozeus 04:50, 15 November 2011 (EET)

Hamishwillee - Comparing like with like

Hi Somnath

Thanks, this is a useful article.

1. I find it unhelpful that the examples are quite different (and this is not quite captured by the images). Yes they both display a selection list, but Qt displays the list in a SelectionDialog which is launched from a SelectionListItem, and then returns the selected result to the SelectionListItem. While in Windows Phone you're just displaying the list in the view and then the selected item is displayed in a text box that follows. There is no need to do it like this - your Qt example could just as easily have been a ListView followed by a textview, and you could have used SelectionListItems for each of the seasons in the listview. I woud change this
   • As a note, the SelectionListItem is supposed to be used as I describe above. While you can use it as a "standalone control" (and they do in the "official" example) this is an odd usage.
2. The Summary is a "good start" at delivering what Croozeus refers to "would be good to have a para describing that these are available in WP7 selection list and not in QML and vice-versa.". To be more precise I think that the comment on the way that the WP control auto expands when you have 5 or more items is very useful - you could go on to explain that this is something you could implement in Qt using states in your ListView - however its not platform behaviour.
3. Other comparisons that I'd like to see between the components:
   • Can both do horizontal scroling lists (Qt can)
   • Do they support kinetic scrolling if you go off screen with your elements. Can you change the scrolling behaviour? (not on Qt)
   • Any limits on element numbers
   • can you change the appearance of the list elements. In Qt you can use the "standard" SelectionListItem for native look and feel or you can use your own delegate. What can you do on WP?
   • Explain that in Qt View owns model and/or delegate. Model owns elements. Compare to how WP models a list. (this is probably actually most important point, because it conceptually explains the architecture for a new user)
   • etc!
4. Once you've got a "Comparison between the two element types" your summary can be quite simple.

Make sense?

Regards

Hamish

hamishwillee 01:05, 22 November 2011 (EET)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:SelectionListQt.zip Media: SelectionListWP7.zip

---

Tested with

SDK: Windows Phone SDK 7.1

Devices(s): WP7 Emulator

---

Compatibility

Platform(s): WP7.1

---

Article

Keywords: SelectionListItem, ListPicker

Created: somnathbanik (14 Nov 2013)

Last edited: hamishwillee (10 Apr 2013)

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:

• In Qt, we use the SelectionListItem QML 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.
• 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.

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.

• 

  Qt SelectionDialog

• 

  WP7 ListPicker

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

• The full source code of Qt example is available here: File:SelectionListQt.zip
• The full source code of WP7 example is available here: File:SelectionListWP7.zip