Stack And Grid Layouts In Xamarin.Forms

By reading this, you will be able to make stack and grid layouts in Xamarin.Forms.

Let's start by defining what stack is

If you have some knowledge of data structures, you will know that stack is something to store data. Stack works in both a horizontal and vertical way.

xamarin

Here, you see both stacks in a horizontal and vertical way. Now, implement this stack in Xamarin.Forms.

<StackLayout>
<Label Text="Enter Your Email"></Label>
<Entry Placeholder="Email"></Entry>
<Label Text="Enter Your Passowrd"></Label>
<Entry Placeholder="Password"></Entry>
<Button Text="Submit"></Button>
</StackLayout>

By default, stack layout orientation is set to vertical, you can change it to horizontal if needed. Here, you can see both Android and Windows desktop implementation of this code.

xamarin

xamarin

This is the most simple and easy way to make login form using Microsoft XAML in Xamarin.forms.

Now, change the orientation of stack layout to horizontal and see how we can utilize this in our application.

You can use Orientation="Horizontal" to change its orientation.

<StackLayoutOrientation="Horizontal">
<Button Text="Section 1" BackgroundColor="Gray"></Button>
<Button Text="Section 2" BackgroundColor="Navy"></Button>
<Button Text="Section 3" BackgroundColor="Gray"></Button>
<Button Text="Section 4" BackgroundColor="Navy"></Button> </StackLayout>

In Android and in Windows.

xamarin

xamarin

Other properties of stack layout include spacing of layout.

E.g. Spacing="20"

You can give both integer and decimal value in spacing.

Try it for your practice :)

Now, let's move towards Grid Layout.

What is Grid?

In Grid layout, you can divide your screen in rows and column to make your layout more attractive. Grid layout is mostly used in photo Gallery and others things where Grids are used.

Grid is something like this.

xamarin

Let's try its example by using XAML

Steps to remind while making a Grid View.

Define Total rows
Define Total Columns
Define all elements you want to place in your layout and set rows and columns needed by this element.

Code Example

<GridRowSpacing="5" ColumnSpacing="5" BackgroundColor="Black">
<Grid.RowDefinitions>
<RowDefinitionHeight="*" />
<RowDefinitionHeight="*" /> </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="*" />
<ColumnDefinitionWidth="*" /> </Grid.ColumnDefinitions>
<ImageSource="http://bit.ly/2oI1MKW" Row="0" Grid.Column="0" BackgroundColor="White">
</Image>
<ImageSource="http://bit.ly/2oI1MKW" Row="0" Grid.Column="1" BackgroundColor="White">
</Image>
<ImageSource="http://bit.ly/2oI1MKW" Row="1" Grid.Column="0" BackgroundColor="White">
</Image>
<ImageSource="http://bit.ly/2oI1MKW" Row="1" Grid.Column="1" BackgroundColor="White">
</Image>
</Grid>

Just like stack layout spacing, In Grid layout, you can set both row and column spacing .

<Grid.RowDefinations>
</Grid.RowDefinations>

This tag is used to define total number of rows and similarly, <Grid.ColumnDefination> tag is used to define all columns in Grid.

Here, this Grid looks like,

xamarin

xamarin

These black lines are due to spacing between rows and columns and background color of Grid is set to black.

Thanks for reading.

4 Comments

Join the conversation! Your thoughts help the community grow.

Ra Nia7y ago
Thnx for the tuto plz can you tell me how can i create a dynamic grid using API.
- Ra Nia7y ago
  Thnx for u reply but i need to know haw can i retrieve date from back Web API (json data) show it in datagrid and stored in DB
- Umair Hassan7y ago
  Https://www.c-sharpcorner.com/article/xamarin-forms-dynamic-gridview/
- Umair Hassan7y ago
  Check if this is helpful