×
Namespaces

Variants
Actions
(Difference between revisions)

Scrolling horizontal menu bar in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy gallery)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 2: Line 2:
 
{{Abstract|This article demonstrates how to create Scrolling object in Qt and WP7.}}
 
{{Abstract|This article demonstrates how to create Scrolling object in Qt and WP7.}}
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media: ScrollMenuQt.zip]]  [[Media: ScrollMenuWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.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= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
Line 9: Line 9:
 
|platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= ScrollViewer / Flickable<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= ScrollViewer / Flickable<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|creationdate= 20th October,2011<!-- Format YYYYMMDD -->
 
|creationdate= 20th October,2011<!-- Format YYYYMMDD -->
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
|author= [[User:Somnathbanik]]
 
}}
 
}}
  
 
==Introduction==
 
==Introduction==
The scrollable item provides a surface that can be '''flicked'''. It placed the items on a surface that can be dragged and flicked, which brings a scrolling view. We will use the [http://doc.qt.nokia.com/4.7/qml-flickable.html#details Flickable] Element of Qt and [http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility%28v=VS.96%29.aspx ScrollViewer] class of WP7 to create a scrolling menu bar on the screen.  
+
The scrollable item provides a surface that can be '''flicked'''. It placed the items on a surface that can be dragged and flicked, which brings a scrolling view. We will use the [http://doc.qt.nokia.com/4.7/qml-flickable.html#details Flickable] Element of Qt and [http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility%28v=VS.96%29.aspx ScrollViewer] class of WP7 to create a scrolling menu bar on the screen.  
  
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
|  [[Image: ScrollMenuQt.png|thumb|201px| Scrolling Menu Bar in Qt ]]   
+
|  [[File: ScrollMenuQt.png|thumb|201px| Scrolling Menu Bar in Qt ]]   
|  [[Image: scrollMenuWP7.png|thumb|201px| Scrolling Menu Bar in WP7 ]]
+
|  [[File: scrollMenuWP7.png|thumb|201px| Scrolling Menu Bar in WP7 ]]
 
|}  
 
|}  
 
   
 
   
 
==Basic Idea==  
 
==Basic Idea==  
We will create a ''Left-Right'' Scrolling Menu Bar and when user clicks on the menu icon we perform some task. In this case we display an image in the middle of the screen on each menu item clicked.   
+
We will create a ''Left-Right'' Scrolling Menu Bar and when user clicks on the menu icon we perform some task. In this case we display an image in the middle of the screen on each menu item clicked.   
 
   
 
   
 
==Implementation==
 
==Implementation==
Lets create empty projects for both Qt and WP7. In this case we will first add code in Qt project and will put the similar code in WP7.  
+
Lets create empty projects for both Qt and WP7. In this case we will first add code in Qt project and will put the similar code in WP7.  
 
   
 
   
 
===Qt Project (main.qml)===
 
===Qt Project (main.qml)===
Line 49: Line 57:
 
</code>  
 
</code>  
 
   
 
   
Now let’s 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 [http://doc.qt.nokia.com/4.7/qml-flickable.html#details Flickable] area.  
+
Now let’s 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 [http://doc.qt.nokia.com/4.7/qml-flickable.html#details Flickable] area.  
 
   
 
   
 
   
 
   
Line 81: Line 89:
 
//
 
//
 
</code>
 
</code>
On each click of the Menu Item we call the JavaScript function  {{Icode|changeImage()}} to change the image on the middle of the screen. This is just to show the even handle on each menu item clicked.  
+
On each click of the Menu Item we call the JavaScript function  {{Icode|changeImage()}} to change the image on the middle of the screen. This is just to show the even handle on each menu item clicked.  
 
   
 
   
 
   
 
   
Line 142: Line 150:
  
 
==Source Code==
 
==Source Code==
*The full source code of Qt example is available here: [[File: ScrollMenuQt.zip]]
+
*The full source code of Qt example is available here: [[File: ScrollMenuQt.zip]]
*The full source code of WP7 example is available here: [[File: ScrollMenuWP7.zip]]
+
*The full source code of WP7 example is available here: [[File: ScrollMenuWP7.zip]]
  
  
 
==Related Article on MeeGo==
 
==Related Article on MeeGo==
*[[Scrolling_Toolbar_with_Flickable]]
+
*[[Scrolling Toolbar with Flickable]]

Revision as of 03:47, 24 April 2012

This article demonstrates how to create Scrolling object 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
SDK: Windows Phone SDK 7.1 for Windows Phone and Qt SDK for Qt code
Devices(s): WP7 Emulator
CompatibilityArticle
Keywords: ScrollViewer / Flickable
Created: somnathbanik (20 Oct 2014)
Last edited: hamishwillee (24 Apr 2012)

Contents

Introduction

The scrollable item provides a surface that can be flicked. It placed the items on a surface that can be dragged and flicked, which brings a scrolling view. We will use the Flickable Element of Qt and ScrollViewer class of WP7 to create a scrolling menu bar on the screen.

Scrolling Menu Bar in Qt
Scrolling Menu Bar in WP7

Basic Idea

We will create a Left-Right Scrolling Menu Bar and when user clicks on the menu icon we perform some task. In this case we display an image in the middle of the screen on each menu item clicked.

Implementation

Lets create empty projects for both Qt and WP7. In this case we will first add code in Qt project and will put the similar code in WP7.

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.

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

Now let’s 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"
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");
}
}
 
// 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;
}

WP7 Project (MainPage.xaml)

Like Qt project we add the icons and the thumbnail images in the WP7 project. Right Click project explorer->Add->New Folder and name as Images, inside Images folder we create two more folders MenuIcons and Thumbnails. 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 folder. 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" />

Lets use the ScrollViewer to create a Horizontal scrolling area. We add few 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"/>
 
 
</Grid>
</ScrollViewer>
 
</StackPanel>

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;

Source Code


Related Article on MeeGo

132 page views in the last 30 days.
×