Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RowSpan and ColumnSpan in Xamarin.Forms

Is there anyone out there who can explain to me how RowSpan and ColumnSpan work in Xamarin.Forms?
The parameters right, left, top, and bottom are a little bit confusing.

Let's use this code snippet for RowSpan:

grid.Children.Add(new Label
{
   Text = "Span two rows (or more if you want)",
   TextColor = Color.Yellow,
   BackgroundColor = Color.Navy,
   XAlign = TextAlignment.Center,
   YAlign = TextAlignment.Center
}, 2, 3, 1, 3);

What do the numbers 2, 3, 1, 3 mean in terms of columns and rows here?
This is for a grid with four rows and three columns.

like image 389
user2236165 Avatar asked Mar 04 '15 12:03

user2236165


People also ask

How do I bind data to grid in Xamarin form?

Binding ItemsSource in XAML In the main page, add the necessary XML namespace to use SfDataGrid control, set the BindingContext of the page to the ViewModel class, and bind the ItemSource of SfDataGrid with the DataTableCollection.

What is StackLayout in Xamarin forms?

StackLayout organizes views in a one-dimensional line ("stack"), either horizontally or vertically. Views in a StackLayout can be sized based on the space in the layout, using layout options.

What is Flex layout in Xamarin forms?

The Xamarin. Forms FlexLayout is new in Xamarin. Forms version 3.0. It is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box, so called because it includes many flexible options to arrange children within the layout. FlexLayout is similar to the Xamarin.

What is grid Xamarin?

The 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. In addition, a Grid can be used as a parent layout that contains other child layouts.


1 Answers

This answer is copied and pasted from this answer at Xamarin's forums (archived) by Till Balandat, but is useful here since Xamarin's documentation doesn't seem to explain the additional parameters to the Add method.

The overload for Add that takes 4 parameters is a little confusing, but in the end lets you define Row, RowSpan, Column and Columnspan: So the above example

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

translates to:

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

This is what Xamarin does internally:

public void Add(View view, int left, int right, int top, int bottom)
{
    //..exceptionhandling removed
    Grid.SetRow((BindableObject) view, top);
    Grid.SetRowSpan((BindableObject) view, bottom - top);
    Grid.SetColumn((BindableObject) view, left);
    Grid.SetColumnSpan((BindableObject) view, right - left);
    this.Add(view);
}

So you might be more comfortable with something like this:

public static class GridExtension
{
    public static void AddChild(this Grid grid, View view, int row, int column, int rowspan = 1, int columnspan = 1)
    {
        if (row < 0)
            throw new ArgumentOutOfRangeException("row");
        if (column < 0)
            throw new ArgumentOutOfRangeException("column");
        if (rowspan <= 0)
            throw new ArgumentOutOfRangeException("rowspan");
        if (columnspan <= 0)
            throw new ArgumentOutOfRangeException("columnspan");
        if (view == null)
          throw new ArgumentNullException("view");
        Grid.SetRow((BindableObject)view, row);
        Grid.SetRowSpan((BindableObject) view, rowspan);
        Grid.SetColumn((BindableObject) view, column);
        Grid.SetColumnSpan((BindableObject) view, columnspan);
        grid.Children.Add(view);      
    }
}
like image 182
Joel Anair Avatar answered Oct 04 '22 21:10

Joel Anair