Xamarin.Forms GridLayout

Question

Can someone please explain the GridLayout references in Xamarin.Forms?

Using the example on FormsGallery, also seen here http://iosapi.xamarin.com/?link=T%3aXamarin.Forms.Grid (has an image too) I tried to work it out, but my trial and error hasn't been very successful, just very time-consuming.

Looking at the first row of the grid the code is as follows

grid.Children.Add(new Label
   {
       Text = "Grid",
       Font = Font.BoldSystemFontOfSize(50),
       HorizontalOptions = LayoutOptions.Center
  }, 0, 3, 0, 1);

it looks to me as though the first 0 refers to the X position, the 3 refers to column span, the next 0 refers to y position and the one refers to row span. But using that as a reference and trying to add other rows and columns it doesn't work. It would be great if their samples included some comments, but as they don't could someone tell me how the GridLayout references work?

Cheers

Solution 1

It is like Add(View view, int left, int right, int top, int bottom)

Here Understanding Grid Layout

Solution 2

I actually find the answer by Miha Markic a little misleading, not because of the answer he gave is incorrect but because what Xamarin does with those arguments isn't clear from the name.

Add(View view, int left, int right, int top, int bottom)

left = column,
right = used to work out column span ie. right - left
top = row,
bottom = used to work out row span ie. bottom - top

This means that if you want an item in the second column that span two you have to do this:

Add(view, 1, 3, 0, 1)

It's a bit weird as you need to put 3 in order to span two columns.

(I originally found the answer on the xamarin forum)

Solution 3

I think you'll find the grid much easier to understand if you create it in XAML. In that case, you have rows and columns, and the setup is pretty straight forward.

            <Grid>
              <Grid.RowDefinitions>
                <RowDefinition Height="3*" />
                <RowDefinition Height="4*" />
              </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*" />
                      <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
          </Grid>

This defines a grid with two rows. The first row is 3/4 as high as the second. It also has two equal columns.

You can now add to cells in the grid, such as

<Label Text="Hi!" Grid.Row = 1  Grid.Column = 0 />

This will put the label in the second row, first column.

This works just about exactly as it did in Silverlight and WPF.

Comments

[user1667474]

thanks for the answer Jesse. As i am really new to all things Xamarin (including C#) I have no idea about Silverlight or WPF. I have found that most tutorials and samples are aimed at people that have experience, not much for people without any. The FormsGallery, for example would be great if they included comments to help people like me out. I will give Xaml a go once I get a grip on it all.Cheers

[user1667474]

Thankyou, just what I needed. I did try searching but guess I shouldn't do that when really tired!!!!

[Jesse Liberty]

That is a great point. Soon Charles Petzold's book on XAML for Xamarin will be out and that will be a big help. I do have a course on Pluralsight called C# From Scratch that you may want to check out.

[user1667474]

Thanks Jesse I will definitely check both out (as soon as this assignment is finished!!)