This tutorial provides more insight into using the grid layout and shows you how to easily build a tile based navigation menu:
Please see the **UgTilesMenuDemo** project for the source code created in this chapter. See [Installing examples](🔗) for information on how to download the examples from https://github.com/scadedoc/UgExamples/tree/master/UgTilesMenuDemo
# General Layout
The general layout for the entry page consists primarily of a grid. Our grid **grid1** contains of an arbitrary number of of rows and columns. You create new rows/columns but adding any new control next and below to each other
In our layout, we add 9 vertical layouts into the grid. Each vertical layout contains a bitmap and a label, where the label displays the menu title:
# Configure vertical container
The vertical container **verticalview1** has following layout
the horizontal layout has been set to **fill space** so that it expands and fills up the entire horizontal space
the vertical layout **fill space** setting was unchecked, as we don't want to expand vertically. The tiles keep their height and are only expanded vertically.
we set the background color of the tile using Background | Color
# Configure bitmap and label
The idea here is to have the label always on the bottom of the vertical container, independent of how high the bitmap is. Therefore, we configure the bitmap to expand vertically and **fill space**, whereas the label has **fill space** unchecked. This results in the label being pushed down all the way:
# Understanding cell size
The cell height in a row is determined by the highest cell in that row. The cell width in a column is determined by the widest cell in the column
To make all cells the same height and width h and w, make sure there at least one cell in each row and column that has h and w. No other cell may exceed h and w.
# Setting margins between cells
The grid has attributes that determine the vertical and horizontal distance between each cell.
The attributes are a little hidden in the advanced property setting dialog:
You can then set the horizontal and vertical distance
# Capture click event
Now, add a click event to each vertical container. Add the event to the vertical container, not the bitmap or label. By doing so, you make sure that touches are thoroughly captured. We can keep the code very short by assuming that the name of the vertical container stays almost the same:
# Make grid scrollable
Finally, make the grid scrollable vertically by checking the vertical scroll bar. There is no need for horizontal scrolling, as we have a fixed width of 3 tiles that expand to the width of the device:
Making it scrollable allows to adopt for different heights, or when you hold the device horizontally: