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.

Page Navigation with State and Transition

From Wiki
Jump to: navigation, search

This article demonstrates how to create page navigation with State and Transition .

Article Metadata
Code ExampleTested with
Devices(s): N950/N9
Platform(s): MeeGo/Qt 4.7
Keywords: Page Navigation/ State/ Transition
Created: somnathbanik (28 Sep 2011)
Last edited: hamishwillee (11 Oct 2012)

Warning.pngWarning: Developers should use the Page and PageStack Qt Quick Components for Symbian or MeeGo to handle page navigation tasks.
This article pre-dates the introduction of these components, and while perfectly valid would only be used if you wanted to roll out your own transition behaviour instead of the default for your chosen platform.



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 we will create seven Items which we will treat as different pages inside the main Rectangle. Initially one of the Item will be active. Each Item will have an Image in it. We control the behavior of the Item by its State and Transition property. We create a menu bar with seven menus. When user clicks on any of these menu the page changes. Here we will display Image as the content of the pages, but it can be anything depending upon the application , like it can be a ListBox, Setting Page, Multimedia Player, etc.

Note.pngNote: This article has nothing new in terms of page navigation, but using State and Transition user will have a feel of smooth page change from Left to Right of the screen, other than a sudden change of the pages.

Page Navigation


We create seven Items which we consider as a single page. Each Item has an Image element which holds an image as the content of the page. When State of the Item is true we change its property along with the other pages also. Transition navigate the page with an easing effect of 700 millisecond duration. Thus user have a smooth feel of the changing page.


//page 1
Item {
id: page1
width: parent.width; anchors.bottom:
Image {
id: pageimage1
source: "images/thumbnails/1.jpeg"
State {
name: "Item"; when: mainRect.inPage1 == true
PropertyChanges { target: page1; x: 0 }
PropertyChanges { target: page2; x: -(parent.width * 1.5) }
PropertyChanges { target: page3; x: -(parent.width * 1.5) }
PropertyChanges { target: page4; x: -(parent.width * 1.5) }
PropertyChanges { target: page5; x: -(parent.width * 1.5) }
PropertyChanges { target: page6; x: -(parent.width * 1.5) }
PropertyChanges { target: page7; x: -(parent.width * 1.5) }
transitions: Transition {
NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }

Menu items are basically Images inside a Rectangle block. We have created seven Menu Items. When user clicks on the menu item we call its respective function and thus changes the State of the page.

Image {
id: image1
source: "images/menuicons/higloss-accessibility.jpg"
smooth: true
opacity: !accessibility.pressed ? 1 : 0.5
MouseArea {
// anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: displayPage1();

The function displayPage1() makes the State of all pages as false leaving the page1 as true.

function displayPage1()
if(mainRect.inPage7 == true)
mainRect.inPage7 = false
if(mainRect.inPage6 == true)
mainRect.inPage6 = false
if(mainRect.inPage5 == true)
mainRect.inPage5 = false
if(mainRect.inPage4 == true)
mainRect.inPage4 = false
if(mainRect.inPage3 == true)
mainRect.inPage3 = false
if(mainRect.inPage2 == true)
mainRect.inPage2 = false
if(mainRect.inPage1 == false)
mainRect.inPage1 = true

Source Code

The full source code of the example is available here:

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