×
Namespaces

Variants
Actions
Revision as of 08:33, 30 November 2012 by hamishwillee (Talk | contribs)

Tab Control in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

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

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 7.1 and Qt SDK v1.2
Devices(s): WP7 Emulator
CompatibilityArticle
Keywords: Tab Control
Created: somnathbanik (21 Oct 2011)
Last edited: hamishwillee (30 Nov 2012)

Contents

Introduction

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.


Implementation

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: parent.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">
 
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/1.jpeg" />
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Tab 2">
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/2.jpeg" />
</Grid>
</controls:PivotItem>
<controls:PivotItem Header="Tab 3">
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="103,101,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="Thumbnails/3.jpeg"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>

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

231 page views in the last 30 days.