Xamarin.Forms Grid Tutorial

Artikel
Developer (Beginner)
9 minutes to complete

Before attempting this tutorial, you should have successfully completed the:

Build your first Xamarin.Forms app quickstart.

In this tutorial, you learn how to:

Create a Xamarin.Forms Grid in XAML.
Specify columns and rows for the Grid.
Span content across multiple columns or multiple rows in the Grid.

You will use Visual Studio 2019, or Visual Studio for Mac, to create a simple application that demonstrates how to layout controls within a Grid. The following screenshots show the final application:

You'll also use XAML Hot Reload for Xamarin.Forms to see UI changes without rebuilding your application.

Create a grid

8 minutes remaining

A Grid is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. By default, a Grid contains one row and one column.

Visual Studio
Visual Studio for Mac

To complete this tutorial you should have Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed. In addition, you will require a paired Mac to build the tutorial application on iOS. For information about installing the Xamarin platform, see Installing Xamarin. For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Launch Visual Studio, and create a new blank Xamarin.Forms app named GridTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named GridTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Explorer, in the GridTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of a Label in a Grid. By default, the Grid positions its child views in a single location. Therefore, a Grid that contains multiple children should specify columns and rows, which will be covered in the next exercise. In addition, the Margin property indicates the rendering position of the Grid within the ContentPage.

Note

In addition to the Margin property, the Padding property can also be set on a Grid. The Padding property value specifies the distance between the bounds of the Grid and its children. For more information, see Margin and Padding.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS remote simulator or Android emulator:

For more information about the Grid, see Xamarin.Forms Grid.

To complete this tutorial you should have Visual Studio for Mac (latest release), with iOS and Android platform support installed. In addition, you will also require Xcode (latest release). For more information about installing the Xamarin platform, see Installing Xamarin.

Launch Visual Studio for Mac, and create a new blank Xamarin.Forms app named GridTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named GridTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.
In Solution Pad, in the GridTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
This code declaratively defines the user interface for the page, which consists of a Label in a Grid. By default, the Grid positions its child views in a single location. Therefore, a Grid that contains multiple children should specify columns and rows, which will be covered in the next exercise. In addition, the Margin property indicates the rendering position of the Grid within the ContentPage.

Note

In addition to the Margin property, the Padding property can also be set on a Grid. The Padding property value specifies the distance between views in the Grid. For more information, see Margin and Padding.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

For more information about the Grid, see Xamarin.Forms Grid.

Specify columns and rows

6 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Grid declaration to define columns and rows, and place content in the columns and rows:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
This code defines columns and rows for the Grid, and positions Label instances in specific columns and rows. The column and row data is stored in the ColumnDefinitions and RowDefinitions properties, which are collections of ColumnDefinition and RowDefinition objects, respectively. The width of each ColumnDefinition is set by the ColumnDefinition.Width property, and the height of each RowDefinition is set by the RowDefinition.Height property. Valid width and height values are:
- Auto, which sizes the column or row to fit the content.
- Proportional values, which size the columns and rows as a proportion of the remaining space. Proportional values are indicated by ending with a *.
- Absolute values, which size the columns or rows with specific, fixed values.
Therefore, in the code above, each column has a width of half the Grid, while each row has a height of 50 device-independent units.

The position of each Label in the Grid is specified with the Grid.Column and Grid.Row attached properties, using a zero-based index. Therefore, the first column is column 0, and the first row is row 0. The first Label lacks these attached properties, because any child views that don't set them will automatically be rendered in column 0, row 0.

Note

The spacing between columns and rows in a Grid can be set with the ColumnSpacing and RowSpacing properties. For more information, see Spacing in the Xamarin.Forms Grid guide.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator:

In MainPage.xaml, modify the Grid declaration to define columns and rows, and place content in the columns and rows:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
This code defines columns and rows for the Grid, and positions Label instances in specific columns and rows. The column and row data is stored in the ColumnDefinitions and RowDefinitions properties, which are collections of ColumnDefinition and RowDefinition objects, respectively. The width of each ColumnDefinition is set by the ColumnDefinition.Width property, and the height of each RowDefinition is set by the RowDefinition.Height property. Valid width and height values are:
- Auto, which sizes the column or row to fit the content.
- Proportional values, which size the columns and rows as a proportion of the remaining space. Proportional values are indicated by ending with a *.
- Absolute values, which size the columns or rows with specific, fixed values.
Therefore, in the code above, each column has a width of half the Grid, while each row has a height of 50 device-independent units.

The position of each Label in the Grid is specified with the Grid.Column and Grid.Row attached properties, using a zero-based index. Therefore, the first column is column 0, and the first row is row 0. The first Label lacks these attached properties, because any child views that don't set them will automatically be rendered in column 0, row 0.

Note

The spacing between columns and rows in a Grid can be set with the ColumnSpacing and RowSpacing properties. For more information, see Spacing in the Xamarin.Forms Grid guide.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

Span multiple columns or rows

2 minutes remaining

Visual Studio
Visual Studio for Mac

In MainPage.xaml, modify the Grid declaration to define columns and rows, and place content that spans the columns and rows:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
This code defines columns and rows for the Grid, and positions Label instances in specific columns and rows. The first Label sets the ColumnSpan attached property so that its text spans multiple columns. The ColumnSpan property is set to 2, which represents the number of columns the Label will span. The second Label sets the RowSpan attached property so that its text spans multiple rows. The RowSpan property is set to 2, which represents the number of rows that the Label will span.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS remote simulator or Android emulator:

In Visual Studio, stop the application.

For more information about spanning columns and rows, see Rows and columns in the Xamarin.Forms Grid guide.

In MainPage.xaml, modify the Grid declaration to define columns and rows, and place content that spans the columns and rows:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
This code defines columns and rows for the Grid, and positions Label instances in specific columns and rows. The first Label sets the ColumnSpan attached property so that its text spans multiple columns. The ColumnSpan property is set to 2, which represents the number of columns the Label will span. The second Label sets the RowSpan attached property so that its text spans multiple rows. The RowSpan property is set to 2, which represents the number of rows that the Label will span.
If the application is still running, save the changes to the file and the application user interface will automatically be updated in your simulator or emulator. Otherwise, in the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator:

In Visual Studio for Mac, stop the application.

For more information about spanning columns and rows, see Rows and columns in the Xamarin.Forms Grid guide.

Delen via

Xamarin.Forms Grid Tutorial

Create a grid

Specify columns and rows

Span multiple columns or rows

Congratulations!

Next steps

Delen via

Xamarin.Forms Grid Tutorial

Create a grid

Specify columns and rows

Span multiple columns or rows

Congratulations!

Next steps

Related links