Scribd
Upload
4 views14 pages

Mobile Programming: Grid Layouts Explained

The document provides an overview of grid layout in mobile programming, specifically focusing on RowDefinition and ColumnDefinition properties for defining grid dimensions. It explains how to set widths and heights using various units and demonstrates how to access and manipulate grid cells using Grid.Row and Grid.Column properties. Additionally, it includes examples of placing UI elements like labels, buttons, and colored boxes within the grid structure.

Uploaded by

ahmed.s.g9800
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views14 pages

Mobile Programming: Grid Layouts Explained

The document provides an overview of grid layout in mobile programming, specifically focusing on RowDefinition and ColumnDefinition properties for defining grid dimensions. It explains how to set widths and heights using various units and demonstrates how to access and manipulate grid cells using Grid.Row and Grid.Column properties. Additionally, it includes examples of placing UI elements like labels, buttons, and colored boxes within the grid structure.

Uploaded by

ahmed.s.g9800
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

COME319 Mobile Programing

Prepared By: Dr. Ihab ELAFF


<Grid>
<[Link]>
<RowDefinition /> 2 x 2 Grid
<RowDefinition />

</[Link]>

<[Link]>
<ColumnDefinition />
<ColumnDefinition />

</[Link]>
</Grid>
<Grid>
<[Link]>
<RowDefinition /> 3 x 2 Grid
<RowDefinition />
<RowDefinition />
</[Link]>

<[Link]>
<ColumnDefinition />
<ColumnDefinition />

</[Link]>
</Grid>
• RowDefinition has only Height property
• ColumnDefinition has only Width property

<ColumnDefinition Width="*" />  Unit of available width


<ColumnDefinition Width=“2*" />  Two units of the available width
<ColumnDefinition Width=“50" />  Specific Width

The same is applicable for Height property of


RowDefinition
• RowDefinition has only Height property
• ColumnDefinition has only Width property

<ColumnDefinition Width="*" />


<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />

This will split the available width into 4 equal columns

The same is applicable for Height property of


RowDefinition
• RowDefinition has only Height property
• ColumnDefinition has only Width property

<ColumnDefinition Width="*" />


<ColumnDefinition Width=“2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />

This will split the available width into 5 portions: all columns would
occupy one portion except the second column will occupy 2 portions

The same is applicable for Height property of


RowDefinition
<Grid>
<[Link]>
<RowDefinition Height="*" /> 2 x 2 Grid
<RowDefinition Height="*" />

</[Link]>

<[Link]>
<ColumnDefinition Width=“*" />
<ColumnDefinition Width="*" />

</[Link]>
</Grid>
<Grid>
<[Link]>
<RowDefinition Height="*" /> 2 x 2 Grid
<RowDefinition Height="*" />

</[Link]>

<[Link]>
<ColumnDefinition Width=“2*" />
<ColumnDefinition Width="*" />

</[Link]>
</Grid>
<Grid>
<[Link]>
<RowDefinition Height=“2*" /> 2 x 2 Grid
<RowDefinition Height="*" />

</[Link]>

<[Link]>
<ColumnDefinition Width=“2*" />
<ColumnDefinition Width="*" />

</[Link]>
</Grid>
• To access grid cell, use [Link] and [Link]
Properties (just before the tag </Grid>).
Ex:
<Label Text=“Hello" [Link]="0" [Link]="0" />

• To color the grid cell, use BoxView that will draw a


rectangle to fill the cell with the selected color.
Ex:
<BoxView Color=“Green" [Link]="0" [Link]="0" />

• Placing a button inside a cell


Ex:
<Button Text="OK" [Link]="1" [Link]="1" />

You might also like