Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 05:05, 27 June 2013 by hamishwillee (Talk | contribs)

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

Grid View in Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to display content in grid layout using Qt and Windows Phone.

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 8.0, Qt 1.2 SDK
Devices(s): Nokia Lumia 820, Lumia 920
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Symbian
Article
Keywords: Grid View
Created: somnathbanik (22 Oct 2014)
Last edited: hamishwillee (27 Jun 2013)

Contents

Introduction

A grid layout is one where elements are arranged in columns and rows. Qt Quick provides the GridView Element and for WP7 we have the Grid class. This code example shows how we lay out items (in this case images) on both platforms.

Implementation

Qt (GridModel.qml)

Qt uses an architecture where views display data that is defined in a separate model - the same model can be displayed differently depending on the view used.

For this example we use a simple QML ListModel Element from which the GridView can fetch data and display in grid view. The model is declared (in this case) in its own file GridModel.qml:

ListModel {
ListElement {
portrait: "Thumbnails/1.jpeg"
}
ListElement {
portrait: "Thumbnails/2.jpeg"
}
ListElement {
portrait: "Thumbnails/3.jpeg"
}
ListElement {
portrait: "Thumbnails/4.jpeg"
}
ListElement {
portrait: "Thumbnails/1.jpeg"
}
}

This ListModel contains a number of QML ListElements, each which stores the path of an image in its portrait role.

Qt Project (main.qml)

The positioning and size of the GridView are defined by its width and height parameters. The model parameter specifies the model to use - in this case it's GridModel, which tells Qt Quick to pull in the model definition from the file GridModel.qml in the current directory.

The actual column/row layout is calculated by the view from the cellWidth and cellHeight to use as much of the available space as possible.

GridView 
{
id: grid
anchors.fill: parent
cellWidth: (parent.width)/2;
cellHeight: cellWidth;
width: parent.width; height: parent.height
model: GridModel {}
delegate: Column {
Image {
source: portrait;
anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter
}
}
}

The appearance of each cell is defined in the delegate property. The delegate is an image centred in the cell - it accesses the model's portrait data role for each item to get the file path of the image to display.


WP7 Project (MainPage.xaml)

Windows Phone 7 (XAML) uses a very different approach for element layout. In this case the rows and columns in the grid are first defined, and then the elements are assigned to column and row positions.

To be more precise, inside the Grid, we define the set of RowDefinition objects inside a RowDefinitions group, and the set of ColumnDefinition objects inside a ColumnDefinitions group. We place objects in specific cells of the Grid using the Grid.Column and Grid.Row properties. To make the grid view flickable we have placed the Grid inside ListBox.

<!--ContentPanel - place additional content here-->
<ListBox Grid.Row="1" >
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
 
<Image Source="Thumbnails\1.jpeg" Grid.Row="0" Grid.Column="0" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\2.jpeg" Grid.Row="0" Grid.Column="1" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\3.jpeg" Grid.Row="1" Grid.Column="0" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\4.jpeg" Grid.Row="1" Grid.Column="1" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="Thumbnails\5.jpeg" Grid.Row="2" Grid.Column="0" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
 
</Grid>
</ListBox>

In this case the images are placed in a specific row and column.

Source Code

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

×