In a previous post, I started methodically working through how LayoutOptions work inside different containers. In this post, that topic is continued, detailing the interactions between LayoutOptions and Grid.
While LayoutOptions values on child views of Grids do aid in positioning the views, LayoutOptions values do not have the same amount of control over the position of child views within Grids as they do over the position of child views within StackLayouts. This is because a Grid’s RowHeight and ColumnWidth values, function to define each child view’s position and dimensions.
For instance, if a view has its Grid.Row property set to 0, its Grid.Column property set to 0 and its Grid.ColumnSpan property set to 2, the view would be positioned at the top left of the Grid. The height allocated to the view would be the height of the first row, and the width allocated to the view would be the width of the first column plus the width of the second column.
Because of this, there’s no need to further redistribute space for views within Grid cells, therefore, any “AndExpand” suffix is ignored when applied to HorizontalOptions and VerticalOptions properties of views within Grids. Accordingly only Start, Fill, Center and End are applicable, and they are only relevant if a view’s size is smaller than the dimensions of the Grid cells the view is allocated.
The “AndExpand” suffix is ignored on HorizontalOptions and VerticalOptions of views within Grids. Start, Center, End and Fill are only relevant if a view’s size is smaller than the dimensions of the Grid cells it is allocated.
This post will continue to illustrate how using Start, Center, End and Fill affects the position of child views within Grids with RowDefinition Height and ColumnDefinition Width set to:
- * (Proportional)
- Auto
- Absolute
Source: https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/grid/
a.) * (Proportional) RowDefinition and ColumnDefinition
When RowDefinition Height and ColumnDefinition Width are set to * (Proportional), the rows and columns are sized so that each receives a proportional amount of space relative to the height and width of the whole Grid. In many cases this could result in larger sized Grid cells than is required by the content.
The image below demonstrates this. The labels are within rows with heights set to Proportional and columns with widths set to Proportional. The lines in between the labels are BoxViews that are within rows and columns that are set to Auto and are there so that the effects of LayoutsOptions values are highlighted.
*HO = HorizontalOptions, VO = VerticalOptions, Grid’s BackgroundColor = Yellow and Labels’ BackgroundColor = Blue
b.) Auto RowDefinition and ColumnDefinition
If RowDefinition Height and ColumnDefinition Width are set to Auto, rows and columns are sized to the amount of space needed by the child views. Grid cells tend to be smaller because cells are set to sizes just enough to contain its views so LayoutOptions tend to be less relevant, if they have any impact at all. The image below shows the appearance of adding labels within Auto sized row heights and column widths. The second image shows the appearance of the same code except the labels’ WidthRequest are set to 100.
*HO = HorizontalOptions, VO = VerticalOptions, Grid’s BackgroundColor = Yellow and Labels’ BackgroundColor = Blue, Labels’ WidthRequest not set
*HO = HorizontalOptions, VO = VerticalOptions, Grid’s BackgroundColor = Yellow and Labels’ BackgroundColor = Blue and Labels’ WidthRequest set to 100
c.) Absolute RowDefinition and ColumnDefinition
In the case where RowDefinition Height and ColumnDefinition Width are set to an absolute value, it is easy to tell when setting LayoutOptions would be relevant because you can tell by looking at your code if the size of the view is smaller than the dimensions of the Grid cells. The image bellow shows the position of views within a Grid with row heights and column widths set to 200.
*HO = HorizontalOptions, VO = VerticalOptions, Grid’s BackgroundColor = Yellow, Labels’ BackgroundColor = Blue
Therefore, no matter if you set RowDefinition Height or ColumnDefinition Width to Proportional, Auto or Absolute, LayoutOptions values on child views of Grids are only relevant if the view is smaller than the Grid cell.
