×
Namespaces

Variants
Actions

Qt 和WP7上的滚动菜单栏

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

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

这篇文章展示了如何在Qt 和 WP7上创建滚动菜单栏。

Contents

简介

可滚动的项指的是可以用手指进行滑动的界面。我们可以利用Flickable元素为Qt创建一个屏幕上的滚动菜单栏,在WP7上我们使用ScrollViewer类实现这一效果。

Qt Windows Phone
Scrolling Menu Bar in Qt
Scrolling Menu Bar in WP7
Example of Qt Example of WP

基本理念

我们将创建一个可左右滚动的菜单栏,当用户点击图标按钮时,我们将执行某些任务。在这个示例中,当点击每一个菜单项时我们将一张图片显示在屏幕中间。

实现

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

Qt Project (main.qml)

首先我们将几个图标和缩略图添加到项目目录中。我们将图标添加到菜单项,当点击菜单项时,缩略图显示在屏幕中间。让我们创建一个Rectangle,并将一个Image放置在里面,来创建屏幕中间的图形区域。

Rectangle{
height: 113
width: 150
x:110
y:170
Image {
id: thumbnails
source: "images/thumbnails/1.jpeg"
}
}

现在让我们在屏幕底部创建另一个矩形来定义菜单栏区域。我们将所有的图标放置到Flickable区域里。

Flickable {
id: flickable
anchors.fill: parent
contentWidth: flickable.width *3.9; contentHeight: flickable.height
Image {
id: image1
source: "images/menuicons/higloss-accessibility.jpg"
x:0
smooth: true
opacity: !accessibility.pressed ? 1 : 0.5
MouseArea {
id:accessibility
// anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("2.jpeg");
}
}
 
//在这里添加其他的图标
 



//

当点击每一个菜单项时,我们调用JavaScrip函数changeImage()来改变屏幕中间的图片。这只是点击每个菜单项时显示事件处理。


 function changeImage(imageName)
{
thumbnails.source = "images/thumbnails/"+imageName;
}

WP7 Project (MainPage.xaml)

像Qt项目那样,我们在WP7项目中添加图标和缩略图。右键点击project explorer->Add->New Folder并命名为Images,在Images文件夹中创建两个文件MenuIconsThumbnails。将图片放入MenuIcons文件并将缩略图放入Thumbnails文件中;; 右键点击project explorer->Add->Existing Item将图片添加到不同的文件夹中。让我们在屏幕中间创建一个显示图片的区域。

<Image Name="ImageMain" Source="/Images/Thumbnails/5.jpeg" Height="113" Width="150" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,200,130,102"  />

让我们利用ScrollViewer来创建一个水平滚动区域。我们在ScrollViewer中添加一些图片来表示滚动条菜单项。

<StackPanel Margin="12,0,12,0">
<ScrollViewer VerticalScrollBarVisibility ="Disabled" HorizontalScrollBarVisibility="Hidden">
<Grid Margin="0,500,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
 
<Image Name="Image1" Source="/Images/MenuIcons/higloss-calendar.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,130,102" MouseEnter="Image1_MouseEnter" />
<Image Name="Image2" Source="/Images/MenuIcons/higloss-add.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="130,0,0,102" MouseEnter="Image2_MouseEnter"/>
<Image Name="Image3" Source="/Images/MenuIcons/higloss-agenda.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="260,0,0,102" MouseEnter="Image3_MouseEnter"/>
<Image Name="Image4" Source="/Images/MenuIcons/higloss-alert.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="390,0,0,102" MouseEnter="Image4_MouseEnter"/>
<Image Name="Image5" Source="/Images/MenuIcons/higloss-announcement.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="520,0,0,102" MouseEnter="Image5_MouseEnter"/>
<Image Name="Image6" Source="/Images/MenuIcons/higloss-attention.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="650,0,0,102" MouseEnter="Image6_MouseEnter"/>
<Image Name="Image7" Source="/Images/MenuIcons/higloss-award.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="780,0,0,102" MouseEnter="Image7_MouseEnter"/>
<Image Name="Image8" Source="/Images/MenuIcons/higloss-button-record.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="910,0,0,102" MouseEnter="Image8_MouseEnter"/>
<Image Name="Image9" Source="/Images/MenuIcons/higloss-button-repeat.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1040,0,0,102" MouseEnter="Image9_MouseEnter"/>
<Image Name="Image10" Source="/Images/MenuIcons/higloss-button-right-gold.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1170,0,0,102" MouseEnter="Image10_MouseEnter"/>
<Image Name="Image11" Source="/Images/MenuIcons/higloss-calendar-add.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1300,0,0,102" MouseEnter="Image11_MouseEnter"/>
<Image Name="Image12" Source="/Images/MenuIcons/higloss-calendar-check.jpg" Height="102" Width="130" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1430,0,0,102" MouseEnter="Image12_MouseEnter"/>
 
 
</Grid>
</ScrollViewer>
 
</StackPanel>

每点击一个菜单项我们将改变屏幕中间的图片。


//创建源
BitmapImage bi = new BitmapImage();
bi.UriSource = new Uri(@"/Images/Thumbnails/1.jpeg", UriKind.RelativeOrAbsolute);
ImageMain.Source = bi;


源代码

	                                                      *在Qt上完整的源代码在如下网站获得:
	                                                               File:ScrollMenuQt.zip 
	                                                       *在WP7上完整的源代码在如下网站获得:
                                                                              File:ScrollMenuWP7.zip

在MeeGo上的相关文章

                                                                               *Scrolling Toolbar with Flickable
This page was last modified on 16 July 2013, at 01:11.
132 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.

×