Grid Layout is not working properly in .Net MAUI(Android and iOS)

Question

Grid Layout is not working properly in MAUI, When mentioning some percentage value in Row definition it would not expanding according to the mentioned value. Anyone have idea on this why it so?

Answer 1

I'm having the same issue but at the moment only with iOS. I have an outer grid with a content panel that takes up about 70% of the middle of the screen from left to right edge. Inside of that I have a grid adding rows from a data source, and while there is only one column definition with with="*", the width of the item goes way off the right side of the screen so much that centered text is out of view. If I add a second column of width 0, hot reload will fix it, but it is broken again on the next run. More alarmingly, on another page, I have a layout with some stacked rows to layout chat interface with messages on top, then typing bar and attachments and the entry controls. With the rows defined as *,auto,auto, and auto -- it worked in xamarin and currently works in .net maui 7.0 rc2 on android, but in iOS, the message list now gets 100% of the screen obscuring the other controls on their own rows. On android for .net maui 7.0 rc2 it works fine. iOS in general has a lot of quirks. I'm hoping this is fixed in the final 7.0 release, otherwise I'm going to have to use an absolute panel and watch screen dimensions/density etc to get things where they need to be -- which is a total pain.

The grid that goes way off the right edge: (you can see the second column that isn't used but will fix layout in hot reload if added in the xaml while the app is running).

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="0" />  <-- doesn't fix it unless pasted into xaml after grid already there -- it forces a layout and it gets it right then.  I am having difficulty forcing this programmatically but still experimenting.
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="{OnPlatform iOS='0', Android='0', WinUI='0'}" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="{OnPlatform iOS='0', Android='0', WinUI='0'}" />
  </Grid.RowDefinitions>

sample grid where top row takes up all content area on iOS but properly layouts out respecting other rows in Android:

      <Grid AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            BackgroundColor="Transparent"
            RowSpacing="2"
            Margin="0"
            Padding="0">

        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

The collection control is placed at Grid.Column="0" and Grid.Row="0" and ends up taking 100% of the grid's content space in iOS but is perfectly laid out in Android. This is rc .net 7.0. I'm waiting on fix, but happened to come across the first post that didn't really give an example -- and figured I'd throw one in for anyone that might be interested.