Page transition in Qt and WP7
This article demonstrates how to create page navigation with sliding transition effect in Qt and WP7
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
Introduction
In this article we will see how to navigate page using sliding transition. Though in Qt and WP7 we have used different technique to bring the same kind of effect. In WP7 we have used Silverlight Toolkit to navigate the complete page and for Qt we used State and Transition to navigate elements inside a ListView. But in both the cases we can have almost the same feel.
We create two pages, when user clicks on the first page’s button it takes him to the second page with a sliding transition view. And the user can also come back to the first page when he clicks on the back button.
Sliding Transition in Qt
Sliding Transition in WP7
Implementation
Let’s create an empty project for both Qt and WP7. First we will work on Qt project and then will move on to WP7 project.
Qt Project (main.qml)
Both the First and the Second pages are Items which have a ListView and Button . When user clicks on the button the default State of the object get changed and PropertyChanges enables the Items’s property value to its current state to new state. This creates a sliding effect in page navigation.
//Page 1
Item {
id: view1
width: parent.width
height: parent.height
ListView {
Text {
id: header1
text: qsTr("First Page")
color: "white"
font.pixelSize: 30
font.bold: true;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.top :parent.top
}
Button{
id: button1
text: "Go next"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
onClicked:
{
loadSecond();
}
}
id: lView1;
width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
}
states:
State {
name: "ListView"; when: screen.inFirstScreen == true
PropertyChanges { target: lView1; x: 0 }
PropertyChanges { target: photoListViewIngredient2; x: -(parent.width * 1.5) }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }
}
}
//Page 2
Item {
id: view2
width: parent.width
height: parent.height
anchors.top: parent.top; anchors.bottom: parent.bottom
ListView {
Text {
id: header2
text: qsTr("Second Page")
color: "white"
font.pixelSize: 30
font.bold: true;
anchors.horizontalCenter: parent.horizontalCenter;
anchors.top :parent.top
}
Image {
id: image2
source: "Nokia-Lumia-800-Logo.jpg"
anchors.top:header2.bottom
anchors.horizontalCenter: parent.horizontalCenter
height: 170
width: 320
}
Button{
id: button2
text: "Go back"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
onClicked:
{
loadFirst();
}
}
id: lView2;
width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
}
states:
State {
name: "ListView"; when: screen.inSecondScreen == true
PropertyChanges { target: lView2; x: 0 }
PropertyChanges { target: lView1; x: -(parent.width * 1.5) }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }
}
}
WP7 Project (MainPage.xaml)
Let’s first download theSilverlight Toolkit and add the reference Microsoft.Phone.Controls.Toolkit to the project. We will add a new XAML file (NewPage.xaml), this page will play the same role as that of the SecondPage, where as MainPage.xaml plays the same role as that of FirstPage in Qt . Add the namespace reference in both the XAML files
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Now let’s add the transition code in both the XAML file, so that when user navigates each page it give a sliding effect .
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:SlideTransition Mode="SlideRightFadeIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:SlideTransition Mode="SlideRightFadeIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
At this stage if we compile and run the application we will see that there is no transition while page navigation. To get the transition during page navigation, edit the method InitializePhoneApplication() of App.xaml.cs file. Replace the line
RootFrame = new PhoneApplicationFrame();
To
RootFrame = new TransitionFrame();
The Sliverlight Toolkit also provides other types of transition styles like Turnstile, Swivel, Rotate, etc.
Source Code
- The full source code of Qt example is available here: File:PageTransitionQt.zip
- The full source code of WP7 example is available here: File:PageTransitionWP7.zip
Vasarik - WP7 Transitions
I put the effort in to implement the Silverlight toolkit to create WP7 page transitions only to find out they are of limited use in terms of how the are implemented and how they look. Currently, the leaving page is started before the next page's start amination is even loaded. This can be seen by putting a bad resource name into the page that is to be loaded. So it's impossible to create transitions that flow together and therefore look smooth. A slow leaving animation is always going to leave the user the impression that the page vanished, and so the only way to use these is have them run so quickly the user doesn't notice how jerky the whole motion is.
I'm not sure that the engine implementation has a choice, but it is an opensource codeplex component added to the platform, which means it will be restricted to the Silverlight engine. If this is the case, Microsoft will need to add native support to make their UI flow as well as their iOS equivalent.
I've had to take it out, and I'm now doing it the old fashioned way. It doesn't look great, but it still provides a more realistic flow than putting it into the hands of this engine.vasarik 13:14, 4 June 2012 (EEST)