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?

You have a grid with no rows or cols defined, so every item in that grid will just sit on top of one another — Jason, Aug 13 '19 at 16:53

score 1 · Answer 1 · answered Aug 13 '19 at 17:09

if you just want your items stacked vertically, just a StackLayout instead of a grid

<StackLayout>
  <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>-->
</StackLayout>

Wendy Zang - MSFT · Accepted Answer · 2019-08-14T09:40:36.017

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.

Xamarin stack layout overlapping sections

2 Answers2