How can I change the layout on one platform without affecting the other

I ran the program on both Android and iOS platforms, and you can check that the components on iOS are a little above and I would like to center as they are on Android ie adjust it without affecting Android.

I want to modify Grid values

 <Grid RowSpacing="0">
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android">0,10,0,0</On>
            <On Platform="iOS">0,20,0,0</On>
        </OnPlatform>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="60" />
            <RowDefinition Height="280" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" Orientation="Horizontal" Margin="30,0,30,0">
            <local1:Submenu></local1:Submenu>
        </StackLayout>

        <Label  Grid.Row="1" Text="InĂ­cio" TextColor="White" FontSize="40"  Margin="55,10,0,0"></Label>

        <Grid Grid.Row="2" ColumnSpacing="5" RowSpacing="5" HorizontalOptions="Center"  VerticalOptions="Center" Margin="48,20,48,0" >

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


            <!--  button images  -->
            <Image x:Name="CmdCalendario" Grid.Row="0" Grid.Column="0"  Source="calendarioFiscallivre.png" />
            <Image x:Name="CmdContaCorrente" Grid.Row="0" Grid.Column="1"  Source="botaocadastrolivre.png" />
            <Image x:Name="CmdCadastro" Grid.Row="1" Grid.Column="0" Source="botaocadastrolivre.png" />
            <Image x:Name="CmdOutros" Grid.Row="1" Grid.Column="1"  Source="botaocadastrolivre.png"/>
            <!--<Image x:Name="CmdLiquidacao" Grid.Row="1" Grid.Column="0"  Source="botaocadastrolivre.png" />-->

        </Grid>
    </Grid>

I also tested from the back code and it is not working

 switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    grid.RowDefinitions.Add(new RowDefinition { Height = 130 });
                    grid.RowDefinitions.Add(new RowDefinition { Height = 80 });
                    grid.RowDefinitions.Add(new RowDefinition { Height = 250 });
                    break;

                case Device.Android:
                    grid.RowDefinitions.Add(new RowDefinition { Height = 100 });
                    grid.RowDefinitions.Add(new RowDefinition { Height = 80 });
                    grid.RowDefinitions.Add(new RowDefinition { Height = 280 });
                    break;
            }

1 answer

  • answered 2018-11-09 06:48 Jack Hua - MSFT

    Try to specify the Thickness under Grid.Padding property.Thickness is the type of Padding property.

    Solution:

    <Grid.Padding>
          <OnPlatform x:TypeArguments="Thickness">
               <On Platform="Android">0,10,0,0</On>
               <On Platform="iOS">0,20,0,0</On>
          </OnPlatform>
    </Grid.Padding>