Namespaces
Variants
Actions
(Difference between revisions)

Scrolling horizontal menu bar in Qt and WP7

Jump to: navigation, search
m (Hamishwillee - Bot update - Fix metadata etc)
m (Hamishwillee - Subedit. Fix categories)
Line 1: Line 1:
−
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Qt Quick]][[Category:Porting]][[Category:MeeGo]][[Category:Symbian]]
+
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Qt Quick]][[Category:Porting]][[Category:MeeGo]][[Category:Symbian]][[Category:UI]][[Category:Silverlight]]
−
{{Abstract|This article demonstrates how to create Scrolling object in Qt and WP7.}}
+
{{Abstract|This article demonstrates how to create scrollable/flick-able objects in Qt and WP7.}}
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
Line 12: Line 12:
 
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|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
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
Line 21: Line 21:
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
−
|creationdate= 20th October,2011<!-- Format YYYYMMDD -->
+
|creationdate= 20111020
 
|author= [[User:Somnathbanik]]
 
|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.  
+
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 [http://doc.qt.nokia.com/4.7/qml-flickable.html#details QML Flickable] Element and Windows Phone uses the [http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility%28v=VS.96%29.aspx ScrollViewer] class.  
 +
 
 +
<gallery widths=200px heights=400px>
 +
File:ScrollMenuQt.png|Scrolling Menu Bar in Qt 
 +
File:scrollMenuWP7.png|Scrolling Menu Bar in WP7
 +
</gallery>
  
−
{| class="wikitable"
 
−
|-
 
−
|  [[File: ScrollMenuQt.png|thumb|201px| Scrolling Menu Bar in Qt ]] 
 
−
|  [[File: scrollMenuWP7.png|thumb|201px| 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==
 
==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)===
 
===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 {{Icode|Rectangle}} and a child {{Icode|Image}} inside it, to create the screen’s middle image area.
+
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 {{Icode|Rectangle}} and a child {{Icode|Image}} inside it, to create the screen’s middle image area.
−
<code cpp>
+
<code css>
−
+
 
Rectangle{
 
Rectangle{
 
             height: 113
 
             height: 113
Line 49: Line 44:
 
             x:110
 
             x:110
 
             y:170
 
             y:170
−
          Image {
+
            Image {
 
                 id: thumbnails
 
                 id: thumbnails
 
                 source: "images/thumbnails/1.jpeg"
 
                 source: "images/thumbnails/1.jpeg"
−
                }
+
            }
−
        }
+
}
−
+
 
</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 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.  
−
+
<code css>
−
+
−
<code cpp>
+
−
+
 
Flickable {
 
Flickable {
 
               id: flickable
 
               id: flickable
Line 83: Line 74:
 
   
 
   
 
// Add all others icon images here
 
// Add all others icon images here
−
 
 
…
 
…
−
…
 
−
…
 
−
//
 
 
</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.  
−
+
<code csharp>
−
<code cpp>
+
−
+
 
function changeImage(imageName)
 
function changeImage(imageName)
 
   {
 
   {
Line 99: Line 84:
 
       }
 
       }
 
</code>
 
</code>
 +
 +
{{Tip|Note that this implementation uses the {{Icode|Flickable}} directly. It would possibly be even easier to use a horizontally aligned {{Icode|ListView}} for the menu - this is also a flickable element.}}
  
 
==WP7 Project (MainPage.xaml)==
 
==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'''->E'''xisting Item''' to add the images in the respective folder. Lets create the area to display screen’s middle image.
+
First add the icons and the thumbnail images in the WP7 project:
−
+
# '''Right Click''' project explorer->'''Add'''->'''New Folder''' and name as '''Images'''
−
<code cpp>
+
#* 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 folders.  
 +
Lets create the area to display screen’s middle image.
 +
<code xml>
 
<Image Name="ImageMain" Source="/Images/Thumbnails/5.jpeg" Height="113" Width="150" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,200,130,102"  />  
 
<Image Name="ImageMain" Source="/Images/Thumbnails/5.jpeg" Height="113" Width="150" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,200,130,102"  />  
−
 
 
</code>
 
</code>
 
   
 
   
−
Lets use the [http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility%28v=VS.96%29.aspx ScrollViewer] to create a ''Horizontal'' scrolling area. We add few images inside the [http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility%28v=VS.96%29.aspx ScrollViewer]  which represents the scroll bar menu item.  
+
Use the [http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility%28v=VS.96%29.aspx ScrollViewer] to create a ''Horizontal'' scrolling area. We add images inside the {{Icode|ScrollViewer}} which represents the scroll bar menu item.  
 
<code xml>
 
<code xml>
−
 
 
<StackPanel Margin="12,0,12,0">
 
<StackPanel Margin="12,0,12,0">
 
                 <ScrollViewer VerticalScrollBarVisibility ="Disabled" HorizontalScrollBarVisibility="Hidden">
 
                 <ScrollViewer VerticalScrollBarVisibility ="Disabled" HorizontalScrollBarVisibility="Hidden">
Line 128: Line 116:
 
                         <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="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"/>
 
                         <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>
 
                     </Grid>
 
                 </ScrollViewer>
 
                 </ScrollViewer>
 
                
 
                
 
             </StackPanel>
 
             </StackPanel>
−
 
 
</code>
 
</code>
 
   
 
   
 
On click of each menu item we change the middle screen image.   
 
On click of each menu item we change the middle screen image.   
−
+
<code csharp>  
−
+
−
<code csharp>
+
−
+
 
// Create source.
 
// Create source.
−
            BitmapImage bi = new BitmapImage();
+
BitmapImage bi = new BitmapImage();
−
            bi.UriSource = new Uri(@"/Images/Thumbnails/1.jpeg", UriKind.RelativeOrAbsolute);
+
bi.UriSource = new Uri(@"/Images/Thumbnails/1.jpeg", UriKind.RelativeOrAbsolute);
−
            ImageMain.Source = bi;
+
ImageMain.Source = bi;
−
+
 
</code>
 
</code>
  
Line 152: Line 134:
 
*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 10:13, 25 April 2012

This article demonstrates how to create scrollable/flick-able objects in Qt and WP7.

WP Metro Icon Porting.png
WP Metro Icon UI.png
Article Metadata
Code Example
Tested with
SDK: Windows Phone SDK 7.1 for Windows Phone and Qt SDK for Qt code
Devices(s): WP7 Emulator
Compatibility
Platform(s): WP7.1
Article
Keywords: ScrollViewer / Flickable
Created: somnathbanik (20 Oct 2011)
Last edited: hamishwillee (25 Apr 2012)

Contents

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.

  • Scrolling Menu Bar in Qt

  • Scrolling Menu Bar in WP7

Implementation

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 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;
       }
Tip.png
Tip: 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.

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

Retrieved from "http://www.developer.nokia.com/Community/Wiki/index.php?title=Scrolling_horizontal_menu_bar_in_Qt_and_WP7&oldid=146153"
202 page views in the last 30 days.
Featured links
Develop
Distribution
Blogs
Community
Resources
Site Map
Terms & Conditions
Privacy Policy
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved