Set column span by using Grid.Children.Add from source code

MichaelKniskernMichaelKniskern USUniversity ✭✭
edited August 2014 in Xamarin.Forms

I have the following source code for setting up a Xamarin.Forms.Grid control on my page. I will like the first 3 rows to expand both columns. The code sample in the online documentation does not really explain how this works.

Here is the source code:

Grid myGrid = new Grid();
myGrid.HorizontalOptions = LayoutOptions.FillAndExpand;

myGrid.RowDefinitions = new RowDefinitionCollection
{
        new RowDefinition { Height = new GridLength(50, GridUnitType.Absolute) },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = new GridLength(30, GridUnitType.Absolute) }
};

myGrid.ColumnDefinitions = new ColumnDefinitionCollection
{
        new ColumnDefinition { Width = GridLength.Auto },
        new ColumnDefinition { Width = new GridLength(30, GridUnitType.Absolute) }
};

//I need Rows 1,2,3 to span two columns
myGrid.Children.Add(new Label { Text = "Row 1" }, 0, 0);
myGrid.Children.Add(new Label { Text = "Row 2" }, 0, 1);
myGrid.Children.Add(new Label { Text = "Row 3" }, 0, 2);
myGrid.Children.Add(new Label { Text = "Row 4, column 1" }, 0, 3);
myGrid.Children.Add(new Label { Text = "Row 4, column 2" }, 1, 3);

How do I modify the code to have the first 3 rows span 2 columns?

Best Answer

Answers

  • MitchMilamMitchMilam USMember ✭✭✭

    The .Add has two extra parameters that let you specify the bottom and right cell locations. So I assume you would just add the extra numbers to match your grid. 0,1 the. 1,1 etc.

  • rmarinhormarinho PTMember, Insider, Beta Xamurai
    edited August 2014

    for me the best way and to be consisten with the way you handle grid in the microsoft world..

    You can use

    Grid.SetColumn(yourcontrol, 0) 
    Grid.SetRow(yourcontrol, 0)
    

    if you now want to expand that for 2 columns,

    Grid.SetColumnSpan(yourcontrol,2)

    hope this helps

  • MichaelKniskernMichaelKniskern USUniversity ✭✭
    edited August 2014

    @MitchMilam‌ When I modify the following code to include your suggestion. I get the following error:

    edited code:

    myGrid.Children.Add(new Label { Text = "Row 1" }, 0, 0, 0, 1);
    myGrid.Children.Add(new Label { Text = "Row 2" }, 0, 1, 1, 1);
    

    Error message while debugging:

    System.ArgumentOutOfRangeException: Argument is out of range.

    Parameter name: right

  • MichaelKniskernMichaelKniskern USUniversity ✭✭

    @rmarinho‌ Those methods are not available in the myGrid variable. When I add your suggested code, the control does not display on the page.

  • rmarinhormarinho PTMember, Insider, Beta Xamurai
    edited August 2014

    it's not in the grid variable is an attached property for your control

    http://iosapi.xamarin.com/index.aspx?link=M:Xamarin.Forms.Grid.SetRowSpan(Xamarin.Forms.BindableObject%2CSystem.Int32)

  • MichaelKniskernMichaelKniskern USUniversity ✭✭

    @rmarinho‌ so the yourcontrol input parameter, would it be the myGrid variable or the Xamarin.Forms control contained with desired role?

  • Thanks Till Ballendat. I was hoping someone would explain what those mysterious numbers at the end meant.

  • RD8RD8 USMember
    edited November 2016
  • DanielRobbinsDanielRobbins USMember ✭✭

    Following up on this thread, as the Grid.Children.Add(obj, left, right, top, bottom) is very, very confusing, but easy to use once you know how to use it. First, forget how you think it works. The 'right' and 'bottom' integers are NOT inclusive, meaning you need to specify ONE MORE than the real right and bottom elements.This will seem odd as your right and bottom ints can be 'out of bounds' of your grid. But this is OK. Imagine you have to move the right/bottom position to one to the right and one below the REAL corner that you want to use. So if you have a grid with one column and three rows, and you want to add something to all three rows:

    myGrid.Children.Add(obj, 0, 0, 1, 3) // start at 0,0 and go to 0,2... so we specify 1,3. (0+1, 2+1)
    

    So this is your Grid:

    X
    X
    X
    

    But if you want to specify the whole Grid, your right/bottom coordinates must specify the position HERE, one outside the right and bottom of the grid, marked by the O below:

    X|
    X|
    X|
    -O
    

    Make sense? Totally counter-intuitive, but easy to use once you know its quirks.

  • TangoGrowlerTangoGrowler USMember ✭✭

    FFS could this be any LESS intuitive. Sort yourselves out Xamarin. At the very least document it within the class

  • TangoGrowlerTangoGrowler USMember ✭✭
    edited October 2017

    Actually, Xamarin, what moron devised with this method??? After much wailing and gnashing of teeth I can get the left, right, top, bottom overload to work as expected, but it makes me feel dirty inside. As others have stated above, the values you specify for right and bottom need to be at least left+1, top+1 so may well end up being past your maximum column and row index for the Grid. WTF?

    This link explains and sets out the internal working better than this forum allows:

    https://stackoverflow.com/questions/28854279/rowspan-and-columnspan-in-xamarin-forms

    But still, eugh! It's horrible. I'm going for a bath

Sign In or Register to comment.