Sliding Page Navigation in Qt and Windows Phone
This article demonstrates how to create a sliding page navigation in Qt and WP7.
See Also
Article Metadata
Code Example
Tested with
Compatibility
Platform Security
Article
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.
Sliding page navigation in Qt
Sliding page navigation 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. 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
- The full source code of Qt example is available here: File:SlidingPageNavigationQML.zip
- The full source code of WP7 example is available here: File:SlidingPageNavigationWP7.zip
Hamishwillee - Title slightly confusing/incorrect
What you're comparing here is a horizontal QML listbox with horizontal orientation and a Pivot control. I don't have a problem with this except that a QML listbox isn't really a "navigation" tool as such so you're describing it as though it was. I think that a reader coming new to this topic might think that this was a key navigation approach in Qt Quick.
The navigation approaches for Qt Quick Components are those provided by the PageStack/Page elements (which do just happen to slide in and out) or the tab navigation (which I think does a fade-in/out - can't remember).
What I think needs to be done is to explain that on Windows Phone the pivot control provides a paged interface where you can horizontally flick or scroll to the next page (update the image, to one that shows this better like http://msdn.microsoft.com/en-us/library/ff941098(v=vs.92).aspx ). Then note that there is no direct match to this sort of control on Symbian - which uses PageStack or tabbed interface for pages. However you can emulate this sort of UI using a ListView. That way you're making it clear that this is not an approved navigation.
You will also need to change the image for Qt - doesn't give me any sense of navigation, and the introduction "or Qt we will use QML VisualItemModel Element and " - since you're using a ListView - the model is really quite a minor part of the discussion. Further to this I'd actually declare the model after the listview, or not at all.
Hope that makes sense.hamishwillee 09:21, 30 April 2012 (EEST)
Somnathbanik - Compatibility
This article is Compatible for both Windows Phone 7 and Windows Phone 8.
We will update the title accordingly.somnathbanik 14:18, 5 June 2013 (EEST)