Search code examples
xamarinlayoutstacklayout

Xamarin 3 StackLayouts

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.

Solution

  • 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