Revision as of 09:00, 30 April 2012

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

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:

• How to create a Page Control component in QML
• QML Sliding Pages

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