Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Sliding Page Navigation in Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to create a sliding page navigation in Qt and WP7.

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): N8 (Nokia Belle), Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1, Symbian^3
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Capabilities: None
Article
Keywords: Page Navigation
Created: somnathbanik (12 Apr 2012)
Last edited: hamishwillee (27 Jun 2013)

Contents

Introduction

In this article we will see how to create sliding page navigation for both in Qt and WP7. For Qt we will use QML VisualItemModel Element and for WP7 we will use Pivot controls.

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. We will create three views and will slide upon them.

Qt Project (MainPage.qml)

We use VisualItemModel and added three Items inside it. Each of these Items are individual views.

VisualItemModel {
id: itemModel
Item {
width: view.width;
height: view.height
Image {
id: imagePage1
source: "home.png"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter : parent.horizontalCenter
}
Component.onDestruction: print("destroyed 1")
}
Item {
width: view.width;
height: view.height
Image {
id: imagePage2
source: "calendar.png"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter : parent.horizontalCenter
}
Component.onDestruction: print("destroyed 2")
}
Item {
width: view.width;
height: view.height
Image {
id: imagePage3
source: "image.png"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter : parent.horizontalCenter
}
Component.onDestruction: print("destroyed 3")
}
}

We add the VisualItemModel in the ListView model and set the orientation as Horizontal.

ListView {
id: view
anchors { fill: parent; bottomMargin: 30 }
model: itemModel
preferredHighlightBegin: 0; preferredHighlightEnd: 0
highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem; flickDeceleration: 2000
cacheBuffer: 200
}

This will give a horizontal flickable motion of the Items.

WP7 Project (MainPage.xaml)

In WP7 we create three Pivot controls in MainPage.xaml file. Each of these Pivot controls will be an individual views.

<controls:Pivot x:Name="pivot" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,-38,0,0" Width="480" Height="800" SelectionChanged="pivot_SelectionChanged"  >
<controls:PivotItem>
<local:PivotPage1 Margin="-12,0,-12,0" />
</controls:PivotItem>
 
<controls:PivotItem>
<local:PivotPage2 Margin="-12,0,-12,0" />
</controls:PivotItem>
 
<controls:PivotItem>
<local:PivotPage3 Margin="-12,0,-12,0" />
</controls:PivotItem>
</controls:Pivot>

On sliding the views the pivot_SelectionChanged()event is called and change the color of the dots bottom down the screen.

private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (stackPage.Children.Count > 0)
{
for (int i = 0; i < pivot.Items.Count; i++)
{
Ellipse el = (Ellipse)stackPage.Children[i];
el.Fill = new SolidColorBrush(Colors.Gray);
el.Opacity = 0.6;
}
Ellipse elSelected = (Ellipse)stackPage.Children[pivot.SelectedIndex];
elSelected.Fill = new SolidColorBrush(Colors.Green);
elSelected.Opacity = 1;
}
}

I have added few icons on the screens, we can add other content also.

Summary

Though I have added the Qt code in this article to show the porting in one place, but there are articles which talks the similar things on Qt. To know more about the Qt sliding page navigation implementations you can refer to the below articles also:

Source Code

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

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×