This tutorial provides more insight into using the grid layout and shows you how to easily build a tile based navigation menu:

(Script tags will be stripped)


Sourcecode

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

(Script tags will be stripped)


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:

(Script tags will be stripped)


# 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

(Script tags will be stripped)


# 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:

(Script tags will be stripped)


# 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:

(Script tags will be stripped)


You can then set the horizontal and vertical distance

(Script tags will be stripped)


# 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:

(Script tags will be stripped)


Making it scrollable allows to adopt for different heights, or when you hold the device horizontally:

(Script tags will be stripped)