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. Thanks for all your past and future contributions.

Tab Control in Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to create a "tab-based" user interface in Qt and Windows Phone.

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Keywords: Tab Control
Created: somnathbanik (21 Oct 2011)
Last edited: hamishwillee (27 Jun 2013)



A tabbed interface provides a set of tab buttons, which may be selected to change the view (the content displayed). This code example creates three tabs and each tab has its own content. When user clicks on the tab it displays its content - in this case one of three images.

For Qt we will use TabGroup and related elements.

For Windows phone we use a Pivot control. There is a template that can be used to create tab based applications, but we won't use it here - instead we will use it from the toolbox, so that we can also see how to add the Pivot control on any part of the page like other controls.


Qt Project (main.qml)

In Qt, tabs are defined using the TabBarLayout and TabGroup:

  • The TabBarLayout defines the position of the Tab bar, and contains TabButton elements which provide the button text for each tab and the id of the element containing their content.
  • The TabGroup defines the pages/content to be displayed for each tab - these are referenced in the TabButtons by id.
// define a tab bar layout with three buttons and link them to the content
TabBarLayout {
id: tabBarLayout
anchors { left: parent.left; right: parent.right; top: }
TabButton { tab: tab1content; text: "Tab 1" }
TabButton { tab: tab2content; text: "Tab 2" }
TabButton { tab: tab3content; text: "Tab 3" }
// define a blank tab group so we can add the pages of content later
TabGroup {
id: tabGroup
anchors { left: parent.left; right: parent.right; top: tabBarLayout.bottom; bottom: parent.bottom }
// define the content for tab 1
Page {
id: tab1content
Image {
id: image1
anchors.centerIn: parent
source: "Thumbnails/1.jpeg"
// define the content for tab 2
Page {
id: tab2content
Image {
id: image2
anchors.centerIn: parent
source: "Thumbnails/2.jpeg"
// define content for tab 3
Page {
id: tab3content
Image {
id: image3
anchors.centerIn: parent
source: "Thumbnails/3.jpeg"

Windows Phone 7 (MainPage.xaml)

First we will add the Pivot control in the toolbox:

  1. Right Click on ToolBox->Choose Items-> Select Pivot
  2. Now drag-drop the Pivot control from the toolbox to the XAML page.

Once we add the Pivot on the XAML page, we will see the tabs on WP style. On each tab content we add image which defines as its content. Thus when user clicks on any of the tabs it displays a different image.

<controls:Pivot Height="574" HorizontalAlignment="Left" Margin="12,27,0,0" Name="pivot1" Title="" VerticalAlignment="Top" Width="444">
<controls:PivotItem Header="Tab 1">
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/1.jpeg" />
<controls:PivotItem Header="Tab 2">
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/2.jpeg" />
<controls:PivotItem Header="Tab 3">
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/3.jpeg"/>

The way this works is fairly self-explanatory; the Pivot tags contain PivotItem definitions which define the tab text, and which themselves contain the tab content.

Source Code

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