Xamarin forms Grid sizing issue

Question

I'm new to Xamarin so excuse me if this is very obvious.

I added a Grid to my ContentPage. I want the grid to occupy the entire ContentPage, which I assume is the full size of the device. In my case I'm testing an iPhone 6S simulator. The first row should be 7.58% of the total height of the Grid and the last one should fill in the rest. I add the label to see where the bottom of the last row is and it shows all the on the top. It looks like it's ~7% from the top which means it's the bottom of the 1st row.

  <Grid x:Name="layoutGrid" HorizontalOptions="Fill" VerticalOptions="Fill">

<Grid.RowDefinitions>
  <RowDefinition Height=".0758*"/>
  <!-- Logo -->

  <!-- Remaining Space -->
  <RowDefinition  Height="*"/>    
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
  <ColumnDefinition Width=".154*" />
  <ColumnDefinition Width="*" />
  <ColumnDefinition Width=".154*" />
</Grid.ColumnDefinitions>

<Image Aspect="Fill" Source="{local:ImageResource App1.Resources.background.png}" Grid.ColumnSpan="3" Grid.RowSpan="11"/>
<Image Aspect="AspectFit" x:Name="settingsImage" Grid.Column="2" Grid.Row="0" Source="{local:ImageResource App1.Resources.settings-17-xxl.png}" HorizontalOptions="End"/>

<Label x:Name="lblTest" Grid.Row="1" Text="Bottom" TextColor="White" VerticalOptions="End" HorizontalOptions="Center" FontSize="18"/>

jgoldberger - MSFT jgoldberger - MSFT · Accepted Answer · 2016-11-01T01:56:05

It looks like you are placing two items in the same space, which you can not do in a grid. IOW the first image in the XAML (it seems you want this across the entire grid?) does not have a row and column set, but defaults to row/column 0. Then your column span is 3 and row span is 11(?). You only have two rows, so that makes no sense. Also you then can not place the second image in Row 0 column 2 as that is already occupied by the first image. You may want to set the first image as a page background. Or use an Absolute or Relative layout in which you can overlay items. A grid does not allow overlaid items as far as I know. Also you have your vertical options for the label set to "End" which will place it at the bottom of row 1, not the top. Try the following XAML to see if that is closer to what you want:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:App1"
    x:Class="App1.MainPage"
    BackgroundImage="{local:ImageResource App1.Resources.background.png}">

    <Grid x:Name="layoutGrid" HorizontalOptions="Fill" VerticalOptions="Fill">

        <Grid.RowDefinitions>
            <RowDefinition Height=".0758*"/>
             <!-- Logo -->

             <!-- Remaining Space -->
             <RowDefinition  Height="*"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width=".154*" />
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width=".154*" />
         </Grid.ColumnDefinitions>

         <Image Aspect="AspectFit" x:Name="settingsImage" Grid.Column="2" Grid.Row="0" Source="{local:ImageResource App1.Resources.settings-17-xxl.png}" HorizontalOptions="End"/>

         <Label x:Name="lblTest" Grid.Row="1" Text="Bottom" TextColor="White" VerticalOptions="Start" HorizontalOptions="Center" FontSize="18"/>
     </Grid>
</ContentPage>

Xamarin forms Grid sizing issue

1 Answers