Xamarin.Forms布局示例详细图解

本文概述

堆叠布局
网格布局
不使用网格
网格布局
目的
用法
行和列
弹性版面
绝对布局
相对布局
在这里, 我们将探索复杂的布局
滚动视图
包起来

Xamarin.Forms Layout类允许我们排列和分组UI控件。要选择布局类, 需要了解如何安排子元素的位置和大小。

堆叠布局

堆栈布局可以水平或垂直地将一维堆栈中的元素组织起来。 orientation属性确定元素的方向, 默认方向为”垂直”。堆栈布局通常用于在页面上排列UI的子部分。

以下XAML显示了如何创建包含三个标签对象的垂直StackLayout。

MainPage.XAML

<?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:local="clr-namespace:AK"
             x:Class="AK.MainPage">

    <StackLayout Margin="20, 35, 20, 25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>

</ContentPage>

输出

网格布局

堆栈布局通常用作父布局, 其中包含其他子布局。但是, 不应将StackLayout用于通过结合使用Stack Layout对象来重现Grid Layout。

<?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:local="clr-namespace:AK"
             x:Class="AK.MainPage">

    
        <StackLayout>
            <StackLayout Orientation="Horizontal">
                <Label Text="Name:" />
                <Entry Placeholder="Enter your name" />
            </StackLayout>
            <StackLayout Orientation="Horizontal">
                <Label Text="Age:" />
                <Entry Placeholder="Enter your age" />
            </StackLayout>
            <StackLayout Orientation="Horizontal">
                <Label Text="Occupation:" />
                <Entry Placeholder="Enter your occupation" />
            </StackLayout>
            <StackLayout Orientation="Horizontal">
                <Label Text="Address:" />
                <Entry Placeholder="Enter your address" />
            </StackLayout>
        </StackLayout>
   

</ContentPage>

不使用网格

输出

这种类型的布局很浪费, 因为执行了不必要的布局计算。我们可以使用Grid来获得更好的布局。

网格布局

网格用于显示行和列中的元素, 它们可以具有比例或绝对大小。网格的行和列通过RowDefinitions和ColoumnDefinitions属性指定。对于特定网格单元中元素的位置, 请使用网格。列和网格。行附加属性。若要使元素跨多个行和列连接, 请使用Grid.RowSpan和Grid.ColumnSpan附加属性。

网格支持将视图排列成行和列。行和列可以设置为比例大小或完整大小。网格布局不应与传统表混淆, 也不应用于呈现表格数据。网格不具有行, 列或单元格格式的概念。与HTML表不同, Grid仅用于布局内容。

在”网格布局”中, 我们可以将屏幕分为行和列, 以使布局更具吸引力。网格布局主要用于照相馆和其他使用网格的事物中。

网格如下所示：

目的

网格可用于将视图排列到网格中。在许多情况下这很有用：

它用于安排”计算器”应用程序中的按钮。
在网格中排列按钮/选择, 例如iOS或Android主屏幕。
它用于排列视图, 以使其在一维上相等(如工具栏)。

用法

与传统表不同, Grid不会干扰内容中行和列的大小数量。而是, Grid具有RowDefinitions和ColumnDefinition集合。这些定义了将布置多少行和多少列的定义。将使用指定的行和列索引将视图添加到Grid, 以标识视图中的列应放置在其中。

行和列

行和列信息存储在Grid的RowDefinition和ColumnDefinitions属性中, 其中每个RowDefinition和ColumnDefinition对象的集合。 RowDefinition具有单个属性

进行网格布局时需要提醒的步骤：

定义总行
定义总列
定义我们要放置在布局中的所有元素, 并设置元素所需的行和列。

MainPage.XAML

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Label Text="One" Grid.Row="0" Grid.Column="0" TextColor="Green" BackgroundColor="Black" />
        <Label Text="Xamarin Forms Grid Demo" TextColor="Yellow" BackgroundColor="Black" Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text="Xamarin Forms" TextColor="Blue" BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text="C Sharp Corner" FontSize="Large" Grid.Row="1" Grid.Column="1" TextColor="Yellow" BackgroundColor="Red" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text="Xamarin Forms" Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" TextColor="Blue" BackgroundColor="Yellow" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text="Cross Platform Development" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" TextColor="Blue" BackgroundColor="Yellow" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
        <Label Text="UWP Android Apple" Grid.Row="2" Grid.Column="2" TextColor="Red" BackgroundColor="Aqua" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
    </Grid>
</ContentPage>

输出

弹性版面

FlexLayout与StackLayout相似, 它在堆栈中水平或垂直显示子元素。但是, 如果有太多的FlexLayout不能容纳在单个行或列中, 则它也可以包装其子元素, 并且还可以对其子元素的大小, 方向和对齐方式进行更精细的控制。

这里是显示如何创建FlexLayout的XAML, 该FlexLayout在单个列中显示其单个视图。

MainPage.XAML

<?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:local="clr-namespace:AK"
             x:Class="AK.MainPage" Title="grid">


    <FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
        <Label Text="FlexLayout in Action" />
        <Button Text="Button" />
        <Label Text="Another Label" />
    </FlexLayout>


</ContentPage>

输出

绝对布局

绝对布局用于将子元素定位在绝对请求的位置。当我们想摆脱所有布局限制并使布局不同时, 使用绝对布局。我们可以使用比例和绝对值来设置元素的高度, 宽度, X轴和Y轴。

例：

在这里, 我们将采用绝对布局的实际实现。在这里, 我们将通过设置它们的x轴和y轴来制作盒子并将其放置在所需的位置。

在这里, 我们将制作一个盒子并将其设置在我们的背景页面上。以下是应牢记的几件事。

在绝对范围内, 我们总是设置布局范围和布局标志。

布局边界

在布局边界中, 我们将按照X轴, Y轴, 宽度, 高度的顺序设置宽度, 高度, x轴和y轴的值。我们在布局边界中设置的第一个值将成为x轴的值, 依此类推。

布局标志

在布局标志中, 我们将声明绑定布局中的值是否成比例。最小比例值为0, 最大比例为1。

MainPage.XAML

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage">

    <AbsoluteLayout>

        <BoxView  
            AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  
            AbsoluteLayout.LayoutFlags="HeightProportional, WidthProportional"  
            BackgroundColor="Black">
        </BoxView>

    </AbsoluteLayout>
</ContentPage>

代码说明

在这里, 我们有了布局边界和布局标志的思想。就像上面的代码一样, 我们将width和height设置为最大值, 并在Layout标志中声明这些值是成比例的。在这里, 盒子覆盖了整个盒子, 并作为我们应用程序的背景。

输出

在这里, 我们看到它运行良好。在这里, 我们创建一个框并将其设置为应用程序的背景。现在, 我们将创建另一个框, 并将其放置在页面的中心。

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage">
    <AbsoluteLayout>

        <BoxView  
        AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  
        AbsoluteLayout.LayoutFlags="HeightProportional, WidthProportional"  
        BackgroundColor="Black"></BoxView>
        <BoxView   
        AbsoluteLayout.LayoutBounds="0.5, 0.5, 100, 100"   
        AbsoluteLayout.LayoutFlags="XProportional, YProportional"   
        BackgroundColor="Gray"></BoxView>

    </AbsoluteLayout>
</ContentPage>

代码说明：

我们已经有一个框, 现在我们要添加另一个框, 其中X轴和Y轴的比例值设置为0.5, 这意味着50％, 我们的新框位于页面中心。我们可以更改x和y轴的值来查看盒子的运动。

输出

在这里, 我们看到在页面中央创建的另一个框。

现在, 我们将创建一个Label并将其放置在页面底部。

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage">
    <AbsoluteLayout>
        <BoxView  
        AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  
        AbsoluteLayout.LayoutFlags="HeightProportional, WidthProportional"  
        BackgroundColor="Black"></BoxView>

        <BoxView   
        AbsoluteLayout.LayoutBounds="0.5, 0.5, 100, 100"   
        AbsoluteLayout.LayoutFlags="XProportional, YProportional"   
        BackgroundColor="Gray"></BoxView>

        <Label Text="Get Started."   
           AbsoluteLayout.LayoutBounds="0, 1, 1, 40"   
           AbsoluteLayout.LayoutFlags="XProportional, YProportional, WidthProportional"  
           BackgroundColor="Gray"></Label>

    </AbsoluteLayout>
</ContentPage>

代码说明：

在这里, 我们在标签中设置其高度的绝对值和x轴以及宽度的比例值。 Y轴设置为1, 使其显示在页面底部。

输出

相对布局

目的

相对布局可用于将视图放置在屏幕上与整体布局或其他视图相对应的位置。

用法

了解概念

在RelativeLayout中定位和调整视图大小是有约束的。约束信息可能包含以下信息。

类型

约束与父视图或另一个视图相关。

属性

我们应该使用哪个属性作为约束的基础。

因子

我们必须对属性值应用哪个因素。

常量

我们必须使用哪个值来抵消成本。

元素名称

与约束相关的视图的名称。

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage">
    <RelativeLayout BackgroundColor="Black">
        <BoxView BackgroundColor="Red" RelativeLayout.XConstraint="{ConstraintExpression   
            Type=RelativeToParent, Property=Width, Factor=0.4}"   
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}">
        </BoxView>
        <BoxView   
            BackgroundColor="Green" RelativeLayout.XConstraint="{ConstraintExpression   
            Type=RelativeToParent, Property=Width, Factor=0.6}"   
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}">
        </BoxView>
        <BoxView x:Name="BlueBox" BackgroundColor="Blue"   
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}"   
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}">
        </BoxView>
        <RelativeLayout x:Name="YellowBox" BackgroundColor="Yellow"   
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}"   
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}"  
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BlueBox, Property=Width, Factor=1}"   
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BlueBox, Property=Height, Factor=1}">

            <BoxView BackgroundColor="White"   
            RelativeLayout.XConstraint="{ConstraintExpression   
            Type=RelativeToView, ElementName=YellowBox, Property=Width, Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression   
            Type=RelativeToView, ElementName=YellowBox, Property=Height, Factor=0.4}" HeightRequest="10"  
            WidthRequest="10">
            </BoxView>
        </RelativeLayout>
    </RelativeLayout>
</ContentPage>

输出

在这里, 我们将探索复杂的布局

每种布局在创建特定布局时都有其优势和劣势。在这里, 我们将使用三种不同的布局创建具有相同页面实现的示例应用程序。

MainPage.XAML

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage" BackgroundColor="Maroon" Title="Relative Layout">
    <ContentPage.Content>
        <ScrollView>
            <RelativeLayout>
                <BoxView Color="Gray" HeightRequest="100"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Button BorderRadius="35" x:Name="imageCircleBack"
            BackgroundColor="Maroon" HeightRequest="70" WidthRequest="70" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.5, Constant = -35}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=70}" />
                <Button BorderRadius="30" BackgroundColor="Red" HeightRequest="60"
            WidthRequest="60" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=imageCircleBack, Property=X, Factor=1, Constant=5}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=75}" />
                <Label Text="User Name" FontAttributes="Bold" FontSize="26"
            HorizontalTextAlignment="Center" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=140}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Entry Text="Bio + Hashtags" TextColor="White" BackgroundColor="Maroon"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=180}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <RelativeLayout BackgroundColor="White" RelativeLayout.YConstraint="
            {ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=220}" HeightRequest="60" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >
                    <BoxView BackgroundColor="Black" WidthRequest="50"
                HeightRequest="50" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=5}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}" />
                    <BoxView BackgroundColor="Maroon" WidthRequest="50"
                HeightRequest="50" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=5}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5}" />
                    <Label FontSize="14" TextColor="Black" Text="Accent Color"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=60}" />
                    <Label FontSize="14" TextColor="Black" Text="Primary Color"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=55}" />
                </RelativeLayout>
                <RelativeLayout Padding="5, 0, 0, 0">
                    <Label FontSize="14" Text="Age:" TextColor="White"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=305}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=10}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.25, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=50}" />
                    <Entry Text="35" TextColor="White" BackgroundColor="Maroon"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=280}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3, Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=50}" />
                </RelativeLayout>
                <RelativeLayout  Padding="5, 0, 0, 0">
                    <Label FontSize="14" Text="Interests:" TextColor="White"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=345}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=10}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.25, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=50}" />
                    <Entry Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=320}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3, Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=50}" />
                </RelativeLayout>
                <RelativeLayout  Padding="5, 0, 0, 0">
                    <Label FontSize="14" Text="Ask me about:" TextColor="White"
            LineBreakMode="WordWrap"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=395}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=10}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.25, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=50}" />
                    <Entry Text="Xamarin, C#, .NET, Mono" TextColor="White"
            BackgroundColor="Maroon"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=370}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3, Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.75, Constant=0}"
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=50}" />
                </RelativeLayout>
            </RelativeLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

输出

滚动视图

滚动视图包含布局, 并使它们可以在屏幕外滚动。滚动视图还用于在显示键盘时将视图移动到屏幕的可见部分。

目的

Scrollview确保可以在小型电话上很好地显示更广泛的视图。

例如：

适用于iPhone 6s的布局可以在iPhone 4s上共享。 Scrollview允许将布局的剪切部分显示在较小的屏幕上。

MainPage.XAML

<?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:local="clr-namespace:App13"
             x:Class="App13.MainPage" BackgroundColor="Maroon" Title="Relative Layout">
    <ContentPage.Content>
        <ScrollView BackgroundColor="Teal">
            <Grid HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="1" Grid.Row="0" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="1" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="2" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="3" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="4" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="5" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="6" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="7" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="8" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="9" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="10" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="11" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="12" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="13" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="14" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="15" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="16" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="17" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="18" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="19" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="20" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="21" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="22" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="23" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="24" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="25" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="26" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="27" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="28" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="29" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="30" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="31" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="32" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="33" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="34" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="35" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="36" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="37" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="38" Text="Test"/>
                <Label Grid.Column="1" Grid.Row="39" Text="Test"/>
            </Grid>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

输出