Qt 和WP7上的滚动菜单栏
文章信息
这篇文章展示了如何在Qt 和 WP7上创建滚动菜单栏。
Contents |
简介
可滚动的项指的是可以用手指进行滑动的界面。我们可以利用Flickable元素为Qt创建一个屏幕上的滚动菜单栏，在WP7上我们使用ScrollViewer类实现这一效果。
| Qt | Windows Phone |
|---|---|
 |
 |
| 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文件夹中创建两个文件MenuIcons和Thumbnails。将图片放入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
(no comments yet)