Xamarin stack layout overlapping sections

Question

I am relatively new in Xamarin, I'm trying to create a form.

The first stack layout is displayed OK when no other stacklayout is included http://prntscr.com/os7703

After adding the second stack layout I'm getting this http://prntscr.com/os733e

This is the code I'm using:

<ContentPage.Content>
        <StackLayout>
            <grial:TabControl>
                <grial:TabItem Text="Fuel Setup">
                    <Grid>
                        <StackLayout Margin="10,10,10,10" HeightRequest="60" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                            <Stepper Maximum="360" Increment="1" HorizontalOptions="Center" ValueChanged="Stepper_ValueChanged" VerticalOptions="StartAndExpand" />
                            <Label x:Name="lblGallons" Text="Gallons" />
                            <Entry x:Name="txtGallons" WidthRequest="130" />
                        </StackLayout>
                        <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="300">
                            <Editor x:Name="txtNotes" VerticalOptions="Center" />
                        </StackLayout>-->
                    </Grid>
                </grial:TabItem>
            </grial:TabControl>
        </StackLayout>
    </ContentPage.Content>

Do I need to have only one stack layout per view or something else is "guilty" for getting overlapped controls?

Answer 1

If you want to do this layout in Grid, please try the code below.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="55" ></RowDefinition>
            <RowDefinition Height="55" ></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Stepper Grid.Row="0" Grid.Column="0"  Maximum="360" Increment="1" HorizontalOptions="Center" VerticalOptions="StartAndExpand"/>
        <Label Grid.Row="0" Grid.Column="1" x:Name="lblGallons" Text="Gallons" />
        <Entry Grid.Row="0" Grid.Column="2" x:Name="txtGallons" WidthRequest="50" />
        <Editor Grid.Row="1" Grid.Column="0" x:Name="txtNotes" VerticalOptions="Center"></Editor>
    </Grid>

Note: When you use Grid, you need define the row and column with RowDefinition and ColumnDefinition first. And then use Grid.Row and Grid.Column to specify the row and column.