×
Namespaces

Variants
Actions
Revision as of 01:11, 16 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
128 page views in the last 30 days.
×