Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Qt 和WP7上的tab控件

From Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 15 Jul 2013 编辑

这篇文章展示了如何在Qt 和WP7上创建tab控件。

Contents

简介

tab控件提供了一套基于选项卡的界面。一个tab界面是由tab头上的按钮和tab中的内容组成的。在Qt中,我们利用TabGroup来创建tab,但是在WP7中它有自己的一个Pivot控件来创建tab。在这篇文章中我们不会在代码中直接写Pivot,而是从toolbox中拖出并自动生成代码,这样我们也能看到如何在每个页面中像添加其他控件那样添加Pivot控件。

Qt Windows Phone
Tab Control in Qt
Tab Control in WP7
Example of Qt Example of WP

基本理念

我们将会创建三个tab并且每个tab的内容都不同。当用户点击tab时显示它里面的内容,在这里我们将使用不同的图片作为tab里的内容。对于Qt我们使用TabGroup,对于WP7我们使用Pivot控件。

实现

让我们在Qt 和 WP7上分别创建一个空的项目。在这个实例中我们首先在Qt项目中添加代码,然后将代码移植到WP7上。

Qt Project (main.qml)

首先我们在项目文件夹中添加一些缩略图。这些是我们将要用作tab内容的图片。当用户点击tab时它将显示对应的内容。

//定义一个有三个按钮的tab bar并将tab链接内容
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" }
}
//定义一个空白的tab group以便我们能够添加内容页
TabGroup {
id: tabGroup
anchors { left: parent.left; right: parent.right; top: tabBarLayout.bottom; bottom: parent.bottom }
//定义一个空白的tab1
Page {
id: tab1content
Image {
id: image1
anchors.centerIn: parent
source: "Thumbnails/1.jpeg"
}
}
//定义一个空白的tab2
Page {
id: tab2content
Image {
id: image2
anchors.centerIn: parent
source: "Thumbnails/2.jpeg"
}
}
//定义一个空白的tab3
Page {
id: tab3content
Image {
id: image3
anchors.centerIn: parent
source: "Thumbnails/3.jpeg"
}
}
}

TabGroupTabBarLayout 组件是一起工作的。TabBarLayout 保存TabButton,并且每个TabButton指向不同的内容Page

WP7 Project (MainPage.xaml)

在WP7项目中,首先我们从toolbox中添加Pivot控件。右击ToolBox->Choose Items-> 选择Pivot,现在将Pivot控件从toolbox中加载到XAML页面。当我们将Pivot控件添加到XAML页面时,我们将会看到WP风格的tab。我们将图片定义为tab的内容。因此当用户点击不同的tab时显示不同的图片。

<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>

源代码

This page was last modified on 15 July 2013, at 22:21.
203 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×