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.

Pop up screen with State and Transition

From Wiki
Jump to: navigation, search

This article demonstrates how to create a pop up screen with State and Transition .

Article Metadata
Code ExampleTested with
Devices(s): N950/N9
Platform(s): MeeGo/Qt 4.7
Keywords: Pop up window
Created: somnathbanik (22 Sep 2011)
Last edited: hamishwillee (11 Oct 2012)



The State element of an object defines the configuration and property of the object. All item has a default state that defines the default configuration of objects and property values. On the other hand the Transition element defines animated transitions that occur on state changes. A Transition defines the animations to be applied when a State change occurs.

Basic Idea

In this article first we will display the Flickr content in a list view from Flickr API. Once user clicks on the any of the Flickr item it will display the image details in a pop up window. This pop up screen has an initial scale value to 0 and state to false. When user clicks on the list item, it changes its state to true and scale value to 1 with an easing effect of 500 millisecond. Thus user can see a pop up window emerged from the middle of the screen with image details.

Flickr List View
Flickr Detail in Pop up screen

Note.pngNote: Here we will not discuss how to create the List View with the Flickr API, its pretty similar like the other list view. For more information you can refer to the source code. We will straight way jump on to the Click Even to display the pop up screen.


  • We parse the Flickr API and display the content in List View.
  • In main.qml we create an Item (stepsNewWindow) of scale: 0.0 and assign a boolean property (inStepNewWindow) to false as its state.
property bool inStepNewWindow: false
  • Item(stepsNewWindow) changes its property to scale: 1 when its state (inStepNewWindow) is true , with an easing effect of 500 millisecond duration
State {
name: "Rectangle"; when: mainwindow.inStepNewWindow == true
PropertyChanges { target: stepsNewWindowRect; x: 0 }
PropertyChanges { target: stepsNewWindow; scale: 1 }
transitions: Transition {
NumberAnimation { properties: "x,scale"; duration: 500; easing.type: Easing.InOutQuad }
  • In NewsDelegate.qml when user clicks on any of the Flickr item, it passes the Flickr details to the pop up screen variables and makes the state to true, which changes the property of the Item(stepsNewWindow) to scale 1. And thus a pop up window comes up with the content detail.
MouseArea {
anchors.fill: parent
mainwindow.inStepNewWindow = true;
stepsNewWindowRect.visible = true;
stepsNewWindowText.text = "Title:" +title + "\n"+ "Author:"+photoAuthor + "\n" + "Date:"+photoDate + "\n" +"Type:"+ photoType;
imageDetail.source = imagePath;
imageDescription.text = description;

Source Code

The full source code of the example is available here:

This page was last modified on 11 October 2012, at 01:20.
274 page views in the last 30 days.