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.

Turnstile Menu using Qt Quick

From Wiki
Jump to: navigation, search

This article demonstrates how to create a Turnstile menu using Qt Quick.

Article Metadata
Code Example
Installation file: Media: TurnstileQML.sis
Tested with
Devices(s): N8 (Nokia Belle)
Platform(s): Symbian^3 OS
Platform Security
Signing Required: Self-Signed
Keywords: Rotation, Image, Transition
Created: somnathbanik (03 Apr 2012)
Last edited: hamishwillee (11 Oct 2012)



In this article we will see how to create a Turnstile menu using QML Rotation Element. We will create four Images and will set the Rotation angle and origin to zero as default. When we click on any of the menu we change its angle and (x,y) origin . For each Image we set a Transition time duration with it angle property.

Note.pngNote: We tried using QML elements to bring an animation effect like Windows Phone Turnstile effect. The effect might not be exactly the same as that of Windows Phone Turnstile effect. Please try the example and share your feedback. To know more about Windows Phone Turnstile, please visit MSDN.


Let’s create an empty QML project. We create four Images and places in grid view.

Image {
id: imageGreen
source: "Images/green.png"
anchors.topMargin: 70
anchors.right: parent.right
anchors.rightMargin: 25
opacity: mouseAreaGreen.pressed ? 0.5 :1.0
anchors.fill: parent
durationBlue = 1000;
durationGreen = 1500;
durationYellow = 500;
durationRed = 900;
if (imageRed.state == '') imageRed.state = "right"; else imageRed.state = ''
if (imageGreen.state == '') imageGreen.state = "right"; else imageGreen.state = ''
if (imageYellow.state == '') imageYellow.state = "right"; else imageYellow.state = ''
if (imageBlue.state == '') imageBlue.state = "right"; else imageBlue.state = ''
textBody.visible = true;
transform: Rotation
id: rotationimageGreen
origin.x: 0;
origin.y: 0;
axis { x: 0; y: 1; z: 0 }
angle: 0
smooth: true
states : State {
name: "right"
PropertyChanges { target: rotationimageGreen; angle : -90; origin.x: -200; origin.y: 0; }
transitions: Transition {
NumberAnimation { target: rotationimageGreen; property: "angle"; duration: durationGreen }

By default each Images are set to angle zero and with zero (x,y) origin. When user clicks on Images it changes it state and all other Images, which finally changes the Image Rotation angle and x origin. We also set a Transition effect for smooth animation whose duration depends on [ Image}} clicks.


This article shows how to use the QML Rotation Element to create a Turnstile effect for menu. The Images displayed here are in a very basic way, you can use ListModel to display the Images in a GridView or in ListView order.

Source Code

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