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.

Dynamic List Item in Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to add/remove Dynamic List Items in Qt and Windows Phone.

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 8.0, Qt SDK 1.2
Devices(s): N8 (Nokia Belle), Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1, Symbian^3 OS
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Keywords: Dynamic List
Created: somnathbanik (25 Apr 2012)
Last edited: hamishwillee (27 Jun 2013)



In this article we will create a Dynamic List in both Qt and Windows Phone, where user can add and delete list items from the list box dynamically. We will add a text input box to enter the item name, a button to add the item in the list box and to delete any item user can select the item from the list.


Let’s create an empty project for both Qt and Windows Phone. First we will work on Qt project and then will move on to WP7 project.

Qt Project (MainPage.qml)

Let’s create a text box input using TextArea Element. This is been created to get user input and to add the text in the ListView.

width: parent.width-60
anchors.horizontalCenter: parent.horizontalCenter

We add a button using ToolButton Element. When user clicks on the ToolButton it first checks whether the TextArea is empty or not and if it’s not empty then it append the text field from the TextArea into the ListModel.

text: "Add New Items" textAreaInput.bottom
anchors.topMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width-60
onClicked: {
if(textAreaInput !== "")
listModelItem.append({ "name":textAreaInput.text})
textAreaInput.text= "";

The method append() of the ListModel Element appends the text filed at the end of the ListView.

ListView {
width: parent.width;
height: parent.height - 80 buttonAdd.bottom
anchors.topMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
clip: true;
Component {
id: delegateItems
Item {
id: wrapper
width: parent.width -20
height: textItem.height
Text {
id: textItem
text: name
font.pixelSize: 21
anchors.fill: parent
listIndex= index;
dialogName = name;
model: listModelItem
delegate: delegateItems
focus: true

When user clicks on the items it brings a Dialog to notify user that the item will be deleted.

id: dialogItem
titleText: "Delete Item"
anchors.left: parent.left
anchors.leftMargin: 25
anchors.topMargin: 20
text:dialogName+" will be deleted !"
color: "white"
font.pixelSize: 21
buttons: ToolButton{
anchors.horizontalCenter: parent.horizontalCenter
text: "Ok"

Which finally calls the remove() method of ListModel to delete the specific item from the ListView.

WP7 Project (MainPage.xaml)

Similarly like Qt we add a text box input using TextBox, a button using Button and a list box using ListBox control in the XAML page.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox Height="72" HorizontalAlignment="Left" Margin="12,30,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="437" />
<Button Content="Add New Item" Height="72" HorizontalAlignment="Left" Margin="12,120,0,0" Name="button1" VerticalAlignment="Top" Width="437" Click="button1_Click" />
<ListBox Height="403" HorizontalAlignment="Left" Margin="12,198,0,0" Name="listBox1" VerticalAlignment="Top" Width="437" FontSize="36" SelectionChanged="listBox1_SelectionChanged" Loaded="Menu_Loaded"/>

Like Qt user can add some text in the TextBox area and when the user press the Button first it checks whether the text file is empty or not and then adds the text field into the ListBox as a list item.

private void button1_Click(object sender, RoutedEventArgs e)
if (textBox1.Text != "")
textBox1.Text = "";

The listBox1.Items.Add() method of the ListBox adds item in the list. When user select any item from the ListBox it display a notification to the user that the item will be deleted and then the item gets deleted from the ListBox.

private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
if (e.AddedItems.Count > 0)
MessageBox.Show(listBox1.SelectedItem.ToString()+" will be deleted");
((ListBox)sender).SelectedIndex = -1;

When user select any item from the ListBox the listBox1_SelectionChanged() event handler gets called and finds index of the selected item which then calls the listBox1.Items.RemoveAt() method to delete the specific item from the ListBox.

Source Code

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