如何在 xamarin 表单中正确缩放条目和按钮到手机

Question

我有一个问题，我的条目和按钮在 Xamarin 表单跨平台 android 和 ios 中被切断，我想知道如何正确编码它们以正确缩放。代码如下

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         x:Class="Kula.MainPage"
       >
<Grid Padding="0" ColumnSpacing="0" RowSpacing="0" >
    <Grid.RowDefinitions>            
        <RowDefinition Height=".30*"/>
        <RowDefinition Height=".15*"/>
        <RowDefinition Height=".40*"/>
        <RowDefinition Height=".15*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <StackLayout BackgroundColor="White" Grid.Column="0" Grid.Row="0">
        <Frame HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Padding="10"      BackgroundColor="#82D5FF" CornerRadius="10">
            <Label
             Text=" Kula " 
             FontSize="65"
             TextColor="White"
             HorizontalOptions="Center"
             VerticalOptions="CenterAndExpand"



        />

        </Frame>

    </StackLayout>
    <BoxView
      BackgroundColor="white" Grid.Column="0" Grid.Row="1"           
        />
    <AbsoluteLayout BackgroundColor="White" Grid.Column="0" Grid.Row="2">
        <Frame Padding="10"
               BackgroundColor="#82D5FF" 
               HasShadow="False"
               CornerRadius="10"
               AbsoluteLayout.LayoutBounds=".5,.5,.75,.73" 
               AbsoluteLayout.LayoutFlags="All">
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height=".26*"/>
                    <RowDefinition Height=".26*"/>
                    <RowDefinition Height=".26*"/>
                    <RowDefinition Height=".22*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Entry Grid.Row="0" Grid.Column="0" x:Name="Rusername" Placeholder="Username" FontSize="Medium" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
                <Entry Grid.Row="1" Grid.Column="0" x:Name="Remail" Placeholder="Email" FontSize="Medium" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand"/>
                <Entry Grid.Row="2" Grid.Column="0" x:Name="Rpassword" IsPassword="True" FontSize="Medium" Placeholder="Password" PlaceholderColor="#606060" HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand"/>
                <Grid Grid.Row="3" Grid.Column="0" ColumnSpacing="0" RowSpacing="0" VerticalOptions="FillAndExpand" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width=".5*"/>
                        <ColumnDefinition Width=".5*"/>
                    </Grid.ColumnDefinitions>
                    <Button x:Name="GTLogin" 
                            BorderRadius="0" 
                            BorderWidth="0"
                            BorderColor="#FFF80D"
                            Grid.Row="0" 
                            Grid.Column="0" 
                            Text="Go To Login" 
                            BackgroundColor="#E4FF00" 
                            Clicked="GTLogin_Clicked"


                    />
                    <Button x:Name="registerUser" 
                            BorderRadius="0" 
                            BorderWidth="0"
                            BorderColor="#C0C0C0" 
                            Grid.Row="0"
                            Grid.Column="1" 
                            Text="Register"
                            BackgroundColor="#FF1000" 
                            Clicked="registerUser_Clicked"

                   />
                </Grid>
            </Grid>
        </Frame>
    </AbsoluteLayout>
    <BoxView
      BackgroundColor="White" Grid.Column="0" Grid.Row="3"           
        />
</Grid>
</ContentPage>

我认为通过使用网格百分比可以正确缩放条目和按钮，但确实如此，我将附加来自设计器和模拟器的视图。任何帮助将不胜感激。designeremulator

Answer 1

您可以按照以下方式改进代码

<StackLayout BackgroundColor="White" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Grid.Column="0" Grid.Row="2">
     <Frame Padding="10" Margin="40,0,40,0" BackgroundColor="#82D5FF"  HasShadow="False" CornerRadius="10">

      //...
     </Frame>
</StackLayout>