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. Thanks for all your past and future contributions.

Placing Tiles in a QML GridView

From Wiki
Jump to: navigation, search

This article explains how to place tiles in a GridView using QML

Article Metadata
Created: gnuton (28 Oct 2011)
Last edited: hamishwillee (30 Jan 2013)


Tiles are largely used in games and especially in card games and board games like solitaires, dominoes, scrabble and many other games like these). So, placing tiles or cards on a table (QML speaking, a grid) makes this topic really interesting, and today I will show you how to implement this in few lines by using plain QML code.

Before to go forward, it's good to understand what is a tile. Well, tiles are in this example simple QML rectangle items. Those elements can store properties such as a color value or an image, but they can even store and show other QML elements.

In this very article, I'm going to show you the most simple case; I will use squares as tiles with a rectangular grid where every tiles store only one property: The color. This will be enough to keep the code compact and easy to understand. Further implementation are left to the reader and in case they could be can be added later into a new section or in the comments below.

So in the end the example we are going to show can be seen in the video below.

The media player is loading...


The code here shown is pure QML and it could be run by QMLViewer for a quick try.

Few words about the implementation; The grid is a GridView with a fixed number of tiles. These tiles are defined by "tilesOnTheGrid" model which is ListModel which contains element storing only one property: as said before, the color. The user can drag around the tile and can it drop it everywhere. If it's dropped outside the grid nothing actually happens, but if it's placed inside the grid then its value is copied inside the grid item under the mouse and the moving tile is place in its original position.

import QtQuick 1.0
Rectangle {
id: world
width: 360
height: 360
color: "black"
ListModel {
id: tilesOnTheGrid
// First Empty tile
ListElement {
itemColor: "gray"
Component {
id: contactsDelegate
Rectangle {
width: 50
height: 50
color: itemColor
border.color: "white"
border.width: 1
GridView {
id: grid
interactive: false
anchors.centerIn: parent
width: 300;
height: 200
cellHeight: 50
cellWidth: 50
model: tilesOnTheGrid
delegate: contactsDelegate
Component.onCompleted: {
// Initialize grid creating empty tiles
var i = 0;
while (i < 30) {
// Draggable tile
Rectangle {
id: dragableTile
width: 50
height: 50
color: "red"
MouseArea {
anchors.fill: parent parent
onReleased: {
// Tile center is better than using tile coordinates
var pos = mapToItem(grid,
var index = grid.indexAt(pos.x, pos.y);
if (index != -1) {
tilesOnTheGrid.set(index, {"itemColor" : parent.color});
dragableTile.x = dragableTile.y = 0;

Further improvements

Aim of this article was to explain the idea behind placing a tile and in a grid; except for the usage of other properties in the tiles, arguments like the ones listed below need a separate examination.

  • Scrolling huge grids - It could be solved by using grids large as the screen as delegates of a big grid.
  • Hexagonal tiling
This page was last modified on 30 January 2013, at 04:39.
146 page views in the last 30 days.