Xamarin 如何正确设置网格上的高度？

我正在尝试创建一个类似这样的UI（作为参考）

但是我很难得到这个设计。我使用了网格，但我一直得到这个结果。我将网格行定义设置为80*和20*，但仍然没有得到我想要的结果。我的想法是设计成百分比，而不是设定一个特定的高度。如果我不能使用百分比，有没有办法让我的UI对不同的屏幕大小和方向做出响应？有什么办法可以做到这一点吗

以下是我的XAML代码：

<ContentPage.Content>
    <ScrollView>
        <StackLayout Spacing="0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="80*"/>
                    <RowDefinition Height="20*"/>
                </Grid.RowDefinitions>
                <StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                        <Label StyleClass="brand" Text="TBS">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label StyleClass="startpagetitle" Text="TBS Point of Sale">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                    </StackLayout>
                </StackLayout>
                <StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Button StyleClass="btn" Text="Login" x:Name="btnLogin">
                        <Button.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                            </OnPlatform>
                        </Button.FontFamily>
                    </Button>
                </StackLayout>
            </Grid>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

---

将StackLayout从内容网格之外移除。网格不会占用

堆栈布局的整个空间，因此看起来百分比是错误的：

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80*"/>
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label StyleClass="brand" Text="TBS">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label StyleClass="startpagetitle" Text="TBS Point of Sale">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
            </StackLayout>
        </StackLayout>
        <StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Button StyleClass="btn" Text="Login" x:Name="btnLogin">
                <Button.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                    </OnPlatform>
                </Button.FontFamily>
            </Button>
        </StackLayout>
    </Grid>
</ScrollView>



此外，我认为如果你不想屏幕滚动，滚动视图也可以删除

或者，您可以尝试添加
，使您的网格充满
堆栈布局
将堆栈布局从内容网格之外移除。网格不会占用
堆栈布局的整个空间，因此看起来百分比是错误的：

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="80*"/>
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
        <StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
                <Label StyleClass="brand" Text="TBS">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label StyleClass="startpagetitle" Text="TBS Point of Sale">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
                <Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
                    <Label.FontFamily>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
                        </OnPlatform>
                    </Label.FontFamily>
                </Label>
            </StackLayout>
        </StackLayout>
        <StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Button StyleClass="btn" Text="Login" x:Name="btnLogin">
                <Button.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
                    </OnPlatform>
                </Button.FontFamily>
            </Button>
        </StackLayout>
    </Grid>
</ScrollView>



此外，我认为如果你不想屏幕滚动，滚动视图也可以删除

或者，您可以尝试添加
，使网格充满
堆栈布局
，以清除所有不必要的嵌套布局容器。只需创建一个包含三行的网格。去掉所有不必要的嵌套布局容器。只需创建一个包含三行的网格。