Xamarin 表单 - xaml 修复设计无法实现

Question

我正在尝试将设计修复成这样，最后我做到了，但遇到了另一个问题：屏幕尺寸之间的差异，例如平板电脑和小型手机

<ContentPage.Content>
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <RelativeLayout HorizontalOptions="Center" VerticalOptions="Center">
            <Image Source="imgBK.png" x:Name="bkimg"></Image>
            <Button x:Name="flip" Opacity="0.5" Clicked="flip_ClickedAsync" AnchorX="200"></Button>
            <AbsoluteLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
            <Image Source="" x:Name="ximg" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFill" HeightRequest="150" WidthRequest="150"></Image>

                <Label Text="{Binding arword}" x:Name="txtar" FontSize="35" TextColor="Black" HorizontalOptions="End" VerticalOptions="End"></Label>
                <Label Text="{Binding enword}" x:Name="txten" FontSize="35" TextColor="Black" HorizontalOptions="End"  VerticalOptions="End"></Label>
                <Label Text="{Binding ensent}" x:Name="txtesnt" FontSize="18" TextColor="DarkGray" HorizontalOptions="End"  VerticalOptions="End"></Label>
                <Label Text="{Binding arsent}" x:Name="txtasnt" FontSize="18" TextColor="DarkGray" HorizontalOptions="End"  VerticalOptions="End"></Label>
            </AbsoluteLayout>



        </RelativeLayout>

    <Grid>
        <Grid.RowDefinitions>
        <RowDefinition Height="3*" />
        <RowDefinition Height="5*" />
        </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
                <Button x:Name="bNext" Opacity="0.5" Clicked="bNext_Clicked" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="100"  HeightRequest="200"></Button>
                <Button x:Name="bFav" Opacity="0.5" Clicked="bFav_Clicked" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="100"  HeightRequest="200"></Button>
                <Button x:Name="bRep" Opacity="0.5" WidthRequest="100" Clicked="bRep_Clicked" Grid.Row="0" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="200"></Button>

                <Button x:Name="bExit" Opacity="0.5" Clicked="bExit_ClickedAsync" Grid.Row="1" Grid.Column="0" WidthRequest="100"  HeightRequest="100" HorizontalOptions="End" VerticalOptions="Center"></Button>
                <Button x:Name="bBack" Opacity="0.5" Clicked="bBack_Clicked" Grid.Row="1" Grid.Column="2" WidthRequest="100" HeightRequest="100" HorizontalOptions="Start" VerticalOptions="Center"></Button>
            </Grid>

    </StackLayout>
</ContentPage.Content>

Answer 1

  <ContentPage.Content>
    <StackLayout Orientation="Vertical"  Padding="12,12,12,12"  HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Spacing="0">
        <Grid ColumnSpacing="0" RowSpacing="10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="5*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="6*"/>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="2*"/>
            </Grid.RowDefinitions>

            <Image x:Name="bkimg" Source="imgBK.png" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="flip_ClickedAsync"  />
                </Image.GestureRecognizers>
            </Image>

            <!--<Image Source="imgBK.png" x:Name="bkimg" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand"/>
            <Button x:Name="flip" Opacity="0.0" Clicked="flip_ClickedAsync" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand"/>-->

            <StackLayout Grid.Row="0" Grid.ColumnSpan="3" VerticalOptions="StartAndExpand">
                <StackLayout Orientation="Vertical" VerticalOptions="Start">
                    <Image Source="" x:Name="ximg"  HorizontalOptions="CenterAndExpand"/> 
                    <Label Text="{Binding arword}"  HorizontalOptions="Center" x:Name="txtar" FontSize="35" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="Black"></Label>
                    <Label Text="{Binding enword}"  HorizontalOptions="Center" x:Name="txten" FontSize="35" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="Black" ></Label>
                    <Label Text="{Binding ensent}"  HorizontalOptions="Center" x:Name="txtesnt" FontSize="18" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="DarkGray"></Label>
                    <Label Text="{Binding arsent}"  HorizontalOptions="Center" x:Name="txtasnt" FontSize="18" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" TextColor="DarkGray"></Label>
                </StackLayout>
            </StackLayout>

            <Image x:Name="bNext" Source="nxt.png" MinimumHeightRequest="5" MinimumWidthRequest="7" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="bNext_Clicked"  />
                </Image.GestureRecognizers>
            </Image>

            <Image x:Name="bFav" Source="fav.png" MinimumHeightRequest="5" MinimumWidthRequest="7" Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="bFav_Clicked"  />
                </Image.GestureRecognizers>
            </Image>

            <Image x:Name="bRep" Source="repeat.png" MinimumHeightRequest="5" MinimumWidthRequest="7" Grid.Row="1" Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="bRep_Clicked"  />
                </Image.GestureRecognizers>
            </Image>


            <Image x:Name="bExit" Source="exit.png" MinimumHeightRequest="5" MinimumWidthRequest="5"  Grid.Row="2" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="bExit_ClickedAsync"  />
                </Image.GestureRecognizers>
            </Image>

            <Image x:Name="bBack" Source="bk.png" MinimumHeightRequest="5" MinimumWidthRequest="5" Grid.Row="2" Grid.Column="1" HorizontalOptions="End" VerticalOptions="Center">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
            Tapped="bBack_Clicked"  />
                </Image.GestureRecognizers>
            </Image>

        </Grid>
    </StackLayout>
</ContentPage.Content>

这就是答案...