×
Namespaces

Variants
Actions
(Difference between revisions)

Sliding Page Navigation in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories, add SeeAlso)
Line 1: Line 1:
[[Category:Qt Quick]][[Category:Windows Phone]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Porting]]
+
[[Category:Qt Quick]][[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:UI]]
 
{{Abstract|This article demonstrates how to create a sliding page navigation in Qt and WP7.}}
 
{{Abstract|This article demonstrates how to create a sliding page navigation in Qt and WP7.}}
 +
{{SeeAlso|
 +
* [http://msdn.microsoft.com/en-us/library/ff941123(v=vs.92).aspx Pivot Control for Windows Phone] (MSDN)
 +
}}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= [[Media:SlidingPageNavigationWP7.zip]] [[Media:SlidingPageNavigationQML.zip]]  
 
|sourcecode= [[Media:SlidingPageNavigationWP7.zip]] [[Media:SlidingPageNavigationQML.zip]]  
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= N8(Nokia Belle), Windows Phone  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= N8 (Nokia Belle)
 
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
 
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
|platform= WP7.1, Symbian^3 OS  <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Windows Phone 7.5, Symbian^3
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing= Self-Signed <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= Self-Signed
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|capabilities= None
 
|keywords= Page Navigation <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= Page Navigation <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 20: Line 23:
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= 12th April, 2012<!-- Format YYYYMMDD -->
+
|creationdate= 20120412
 
|author= [[User:Somnathbanik]]
 
|author= [[User:Somnathbanik]]
 
}}
 
}}
Line 26: Line 29:
 
In this article we will see how to create sliding page navigation for both in Qt and WP7. For Qt we will use [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html QML VisualItemModel Element] and for WP7 we will use [http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28v=VS.92%29.aspx Pivot] controls.  
 
In this article we will see how to create sliding page navigation for both in Qt and WP7. For Qt we will use [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html QML VisualItemModel Element] and for WP7 we will use [http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28v=VS.92%29.aspx Pivot] controls.  
  
{| class="wikitable"
+
<gallery widths=200px heights=400px>
|-
+
File: SlidingPageNavigationQML.png|Sliding page navigation in Qt
! Qt !! Windows Phone
+
File: SlidingPageNavigationWP7.png|Sliding page navigation in WP7
|-
+
</gallery>
|
+
[[File: SlidingPageNavigationQML.png|thumb|201px| Sliding page navigation in Qt]]
+
||
+
[[File: SlidingPageNavigationWP7.png|thumb|201px| Sliding page navigation in WP7 ]]
+
 
+
|-
+
| Example of Qt || Example of WP
+
|}
+
  
 
==Implementation==
 
==Implementation==
Line 43: Line 38:
 
===Qt Project (MainPage.qml)===
 
===Qt Project (MainPage.qml)===
 
We use [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html VisualItemModel]  and added three [http://doc.qt.nokia.com/4.7/qml-item.html Items] inside it. Each of these Items are individual views.  
 
We use [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html VisualItemModel]  and added three [http://doc.qt.nokia.com/4.7/qml-item.html Items] inside it. Each of these Items are individual views.  
<code cpp>
+
<code css>
 
+
VisualItemModel {
    VisualItemModel {
+
 
         id: itemModel
 
         id: itemModel
 
         Item {
 
         Item {
Line 82: Line 76:
 
     }
 
     }
 
</code>
 
</code>
 +
 
We add the [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html VisualItemModel] in the [http://doc.qt.nokia.com/4.7/qml-listview.html ListView]  {{Icode|model}} and set the  {{Icode|orientation}} as  ''Horizontal''.
 
We add the [http://doc.qt.nokia.com/4.7/qml-visualitemmodel.html VisualItemModel] in the [http://doc.qt.nokia.com/4.7/qml-listview.html ListView]  {{Icode|model}} and set the  {{Icode|orientation}} as  ''Horizontal''.
<code cpp>
+
<code css>
 
ListView {
 
ListView {
 
         id: view
 
         id: view
Line 94: Line 89:
 
         cacheBuffer: 200
 
         cacheBuffer: 200
 
     }
 
     }
 
 
</code>
 
</code>
 +
 
This will give a horizontal flickable motion of the [http://doc.qt.nokia.com/4.7/qml-item.html Items].
 
This will give a horizontal flickable motion of the [http://doc.qt.nokia.com/4.7/qml-item.html Items].
 +
 
=== WP7 Project (MainPage.xaml)===
 
=== WP7 Project (MainPage.xaml)===
 
In WP7 we create three [http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28v=VS.92%29.aspx Pivot] controls in ''MainPage.xaml''  file. Each of these [http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28v=VS.92%29.aspx Pivot] controls will be an individual views.
 
In WP7 we create three [http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28v=VS.92%29.aspx Pivot] controls in ''MainPage.xaml''  file. Each of these [http://msdn.microsoft.com/en-us/library/microsoft.phone.controls.pivot%28v=VS.92%29.aspx Pivot] controls will be an individual views.
Line 117: Line 113:
  
 
On sliding the views the {{Icode|pivot_SelectionChanged()}} event is called and change the color of the dots bottom down the screen.
 
On sliding the views the {{Icode|pivot_SelectionChanged()}} event is called and change the color of the dots bottom down the screen.
<code cpp>
+
<code csharp>
 
private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
 
private void pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
 
         {
 
         {
Line 138: Line 134:
  
 
==Summary==
 
==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.
+
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:
  
 
* [[How to create a Page Control component in QML]]
 
* [[How to create a Page Control component in QML]]

Revision as of 09:00, 30 April 2012

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)
Compatibility
Platform(s): Windows Phone 7.5, 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 (30 Apr 2012)

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

169 page views in the last 30 days.
×