Xamarin 3 StackLayouts

Question

I am making a page where there is a top title, an image in the middle and some text under it and then two buttons at the bottom for yes or no. As you can see the buttons are getting pushed down too much and getting cut off. I can't figure out how to move the text up a little or reduce the spacing between the image and the title and text. I know I probably could do this with absolute layouts but I am not sure how it would work with larger/smaller screens.

Here is my XAML for the image.

<ContentPage BackgroundColor="#FF233D">
        <ContentPage.Content>
                 <StackLayout Padding="10,10,10,10">  
                <StackLayout VerticalOptions="Start">
                    <Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center"></Label>
                       <Image Scale=".65" Source="bed" >
                    </Image>
                </StackLayout>
                <StackLayout VerticalOptions="CenterAndExpand">
                      <Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"></Label>
                </StackLayout>
                <StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" > 
                    <Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0">
                    </Button>
                    <Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" >
                    </Button>
                </StackLayout>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>

Any help is much appreciated.

Do you mean just having one column and having all the content in rows? — Reha Mathur, Jul 11 '18 at 19:47
4 rows, 2 columns. The first three rows would have ColSpan=2, the final row would have each button in it's own column — Jason, Jul 11 '18 at 19:55

score 1 · Accepted Answer · answered Jul 12 '18 at 07:50

It will be easier if you use a Grid with 4 rows and two columns

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

<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Scale=".65" Source="bed" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" >

<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"   Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>

<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="1" />

<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="0" />

Try to adjust rows Hheight and width if the result is different from your needs. For more information about grids : Microsoft docs

Xamarin 3 StackLayouts

1 Answers1