CODEWITHSUNDEEP
xamarinxamarin.forms
user2650480
user2650480

Reputation: 489

Xamarin.Forms - Extra space between two StackLayouts

I have a Xamarin.Forms XAML setup like following, but don't know why there's extra space between two StackLayout instances. I tried setting padding to 0 and margin to 0 but still there's space in between and at the end of the last StackLayout.

<StackLayout Spacing="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" HeightRequest="500" Margin="0" Padding="0">
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" HeightRequest="20" Margin="0" Padding="0">
          <Label Text="MyTest" HorizontalOptions="Center"></Label>
        </StackLayout>
        <StackLayout VerticalOptions="CenterAndExpand" Padding="10,0,10,0" HeightRequest="500" Margin="0">
          <ListView x:Name ="listView" ItemsSource="{Binding MyBinding}">
            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <Grid>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="0.9*" />
                      <ColumnDefinition Width="0.1*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Text="{Binding MyName}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                    <Label Grid.Column="1" Text="{Binding MyValue}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                  </Grid>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>
        </StackLayout>
      </StackLayout>

Upvotes: 1

Views: 6425

Answers (3)

Christo Nel
Christo Nel

Reputation: 381

You can always try adding a negative Margin value. I had a similar problem which I was able to solve by adding a Margin of -5 to the second layout.

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" >
    <StackLayout x:Name="lOne" Orientation="Horizontal" VerticalOptions="Start" />
    <StackLayout x:Name="lTwo" Orientation="Horizontal" Margin="-5" HorizontalOptions="CenterAndExpand" VerticalOptions="Start" Padding="10"/>
</StackLayout>

lT had a space which I was able to see when adding Background colors. When I added Margin="-5" to this the space was gone.

Upvotes: 1

Nitin Malik
Nitin Malik

Reputation: 41

You Can Set Spacing of parent layout to -6. Spacing is a value in device pixels which indicates the amount of space between each element. The default value is 6.0....

Upvotes: 3

pinedax
pinedax

Reputation: 9356

It seems you haven't set any VerticalOptions to the first StackLayout and this is why it's just wrapping the Label and leaving an empty space as you are setting the other StackLayout to VerticalOption as CenterAndExpand.

To fix this you have a few options options:

1: Set VerticalOption to FillAndExpand to the StackLayout containing the ListView

    <StackLayout VerticalOptions="FillAndExpand" Padding="10,0,10,0" HeightRequest="500" Margin="0">
      <ListView x:Name ="listView" ItemsSource="{Binding MyBinding}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="0.9*" />
                  <ColumnDefinition Width="0.1*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding MyName}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                <Label Grid.Column="1" Text="{Binding MyValue}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
              </Grid>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>

2: Set VerticalOption to EndAndExpand to the first StackLayout with the Label and VerticalOption as StartAndExpand to the second StackLayout with the List.

    <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="20" Margin="0" Padding="0">
      <Label Text="MyTest" HorizontalOptions="Center"></Label>
    </StackLayout>

    <StackLayout VerticalOptions="StartAndExpand" Padding="10,0,10,0" HeightRequest="500" Margin="0">
      <ListView x:Name ="listView" ItemsSource="{Binding MyBinding}">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ViewCell>
              <Grid>
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="0.9*" />
                  <ColumnDefinition Width="0.1*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Text="{Binding MyName}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
                <Label Grid.Column="1" Text="{Binding MyValue}"  FontAttributes="Bold" VerticalTextAlignment="Center"/>
              </Grid>
            </ViewCell>
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>

Test both and see which one better suits your design needs as each one will place the UI controllers differently.

Hope this helps.-

Upvotes: 2

Related Questions