Scribd
Upload
214 views

Grid Exercise

The document describes a grid layout exercise with two parts. The first part defines styles for page background color and various UI elements like labels, buttons, and the grid itself with properties like font size, text color, padding, and row/column spacing. The second part compares the grid layout to a stack layout, noting the grid allows more spacing between labels and buttons. It implements this with a three row grid where the first row takes remaining space and contains a centered stack layout of two labels.

Uploaded by

Marko Ivanković
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
214 views

Grid Exercise

The document describes a grid layout exercise with two parts. The first part defines styles for page background color and various UI elements like labels, buttons, and the grid itself with properties like font size, text color, padding, and row/column spacing. The second part compares the grid layout to a stack layout, noting the grid allows more spacing between labels and buttons. It implements this with a three row grid where the first row takes remaining space and contains a centered stack layout of two labels.

Uploaded by

Marko Ivanković
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Grid By: Mosh Hamedani

Exercise 1
Page background color: #354242

Phone number label

FontSize = 50

Numeric buttons

FontSize = 30

TextColor = #28282c

BackgroundColor = #fff

BorderRadius = 30 (rounded
corners)

Dial button

BackgroundColor = #96ca2d

Grid

Padding = 40

RowSpacing = 10

ColumnSpacing = 10

First row is twice taller than other rows

Note: In the attached solution file, youll see a lot of cosmetic attributes (eg FontSize,
BackgroundColor, etc) repeated over and over. In the future, youll learn how to define
these styles in one place and reference them in multiple places. This will make the code
cleaner and more maintainable. Youll have to make changes in only one place.

1
Grid By: Mosh Hamedani

Exercise 2
This design is similar to the one in StackLayout exercise. Can you spot their differences?

In StackLayout Exercise 1, the spacing


between all elements is the same. But in
this design, there is fair amount of space
between labels and buttons.

One way to implement this is using a


Grid. Here, we have a grid with 3 rows.
The height of the last two rows is set to
40. The remaining space is allocated to
the first row. In this row, we have a
StackLayout vertically in the middle. This
StackLayout contains two labels.

Page background color: #127ac7

Buttons background color: #1dabf0

Welcome label properties:

FontSize = 30

FontAttributes = Bold

HorizontalOptions = Center

Cross-platform label properties:

FontSize = 18

You might also like