Xamarin 3 StackLayouts

Question

我正在制作一个页面，其中有一个标题，中间是一个图像，下面是一些文本，然后在底部有两个按钮，表示是或否。如您所见，按钮被按下得太多而被切断。我不知道如何向上移动文本或缩小图像与标题和文本之间的间距。我知道我可能可以使用绝对布局来做到这一点，但是我不确定它在大/小屏幕上如何工作。

这是我的图像XAML。

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

非常感谢您的帮助。

Answer 1

如果您使用具有四行两列的网格，将会更容易

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

如果结果与您的需求不同，请尝试调整行的高度和宽度。 有关网格的更多信息：Microsoft docs