(Difference between revisions)

Scrolling horizontal menu bar in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
hamishwillee (Talk | contribs)
m (Hamishwillee -)
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Qt Quick]][[Category:Porting]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:UI]][[Category:Silverlight]]
[[Category:Porting Windows Phone and Qt]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:XAML]][[Category:Windows Phone 7.5]][[Category:Windows Phone 8]][[Category:Code Examples]]
{{Abstract|This article demonstrates how to create scrollable/flick-able objects in Qt and WP7.}}
{{Abstract|This article demonstrates how to create scrollable/flick-able objects in Qt and WP7.}}
Line 5: Line 5:
|sourcecode= [[Media:ScrollMenuWP7.zip]] [[Media:ScrollMenuQt.zip]]  
|sourcecode= [[Media:ScrollMenuWP7.zip]] [[Media:ScrollMenuQt.zip]]  
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
|devices= Nokia Lumia 820, Lumia 920
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1] for Windows Phone and Qt SDK for Qt code
|sdk= [http://www.microsoft.com/en-us/download/details.aspx?id=35471 Windows Phone SDK 8.0]
|platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
|platform= Windows Phone 8.0/ 7.1
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->

Latest revision as of 08:09, 27 June 2013

This article demonstrates how to create scrollable/flick-able objects 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
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Keywords: ScrollViewer / Flickable
Created: somnathbanik (20 Oct 2011)
Last edited: hamishwillee (27 Jun 2013)


[edit] Introduction

This code example creates a horizontally scrolling menu bar. When an item in the menu is selected we perform some task - in this case we display an image in the middle of the screen.

The Qt example uses the QML Flickable Element and Windows Phone uses the ScrollViewer class.

[edit] Implementation

[edit] Qt Project (main.qml)

First we take few icons and thumbnail images in the project directory. We will add the icons as the menu item and the thumbnails are the images to be displayed on the middle of the screen on each menu item clicked. Lets create a Rectangle and a child Image inside it, to create the screen’s middle image area.

height: 113
width: 150
Image {
id: thumbnails
source: "images/thumbnails/1.jpeg"

Now create another Rectangle on the bottom of the screen that defines the area of the menu bar. We add all the icon images inside a Flickable area.

Flickable {
id: flickable
anchors.fill: parent
contentWidth: flickable.width *3.9; contentHeight: flickable.height
Image {
id: image1
source: "images/menuicons/higloss-accessibility.jpg"
smooth: true
opacity: !accessibility.pressed ? 1 : 0.5
MouseArea {
// anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("2.jpeg");
// Add all others icon images here

On each click of the Menu Item we call the JavaScript function changeImage() to change the image on the middle of the screen. This is just to show the even handle on each menu item clicked.

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

Tip.pngTip: Note that this implementation uses the Flickable directly. It would possibly be even easier to use a horizontally aligned ListView for the menu - this is also a flickable element.

[edit] WP7 Project (MainPage.xaml)

First add the icons and the thumbnail images in the WP7 project:

  1. Right Click project explorer->Add->New Folder and name as Images
    • inside Images folder we create two more folders MenuIcons and Thumbnails.
  2. Put the icons and thumbnail images in the MenuIcons and Thumbnails folder;
    • Right-Click project explorer->Add->Existing Item to add the images in the respective folders.

Lets create the area to display screen’s middle image.

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

Use the ScrollViewer to create a Horizontal scrolling area. We add images inside the ScrollViewer which represents the scroll bar menu item.

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

On click of each menu item we change the middle screen image.

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

[edit] Source Code

[edit] Related Article on MeeGo

This page was last modified on 27 June 2013, at 08:09.
178 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.