Xamarin.Forms 布局

2025年03月17日 | 阅读 9 分钟

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

堆栈布局

堆栈布局在水平或垂直的一维堆栈中组织元素。方向属性确定元素的排列方向，默认方向为垂直。堆栈布局通常用于在页面上排列 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>

输出

网格布局

Stack Layout 通常用作父布局，其中包含其他子布局。但是，不应使用 StackLayout 通过使用 Stack Layout 对象的组合来复制 Grid 布局。

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

输出

这种类型的布局是浪费的，因为它执行了不必要的布局计算。我们可以使用 Grid 获得更好的所需布局。

网格布局

Grid 用于以行和列的形式显示元素，这些元素可以具有比例或绝对大小。网格的行和列使用 RowDefinitions 和 ColoumnDefinitions 属性指定。对于特定网格单元格中元素的位置，使用 Grid. Column 和 Grid. Row 附加属性。要使元素跨越多行和多列，请使用 Grid.RowSpan 和 Grid.ColumnSpan 附加属性。

Grid 支持将视图排列成行和列。可以将行和列设置为比例大小或全尺寸。Grid 布局不应与传统表格混淆，并且不用于呈现表格数据。网格没有行、列或单元格格式化的概念。与 HTML 表格不同，Grid 纯粹用于布置内容。

在 Grid 布局中，我们可以将屏幕分成行和列，使我们的布局更具吸引力。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>

输出

Flex 布局

FlexLayout 类似于 StackLayout，因为它在水平或垂直堆栈中显示子元素。但是，如果子元素过多而无法容纳在单个行或列中，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>

代码解释

在这里，我们了解了布局边界和布局标志。如上代码所示，我们将宽度和高度设置为最大值，并在布局标志中声明这些值是成比例的。在这里，盒子覆盖了整个盒子，充当了我们应用程序的背景。

输出

在这里，我们看到它工作得很好。在这里，我们制作一个盒子并将其设置为我们应用程序的背景。现在我们将制作另一个盒子，并将它放在我们页面的中心。

<?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 轴的值以查看盒子的移动。

输出

在这里，我们看到了在页面中心创建的另一个盒子。

现在我们将创建一个标签，并将其放置在页面的底部。

<?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 中定位和调整视图的大小是通过约束完成的。约束信息可能包含以下信息。

类型

约束与父级或其他视图相关。

属性

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

因素

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

Constant

我们必须使用哪个值作为成本的偏移量。

元素名称

约束所涉及的视图的名称。

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

输出

总结

一般来说，我们发现 Xamarin 的布局结构与其他 XAML 框架相似。它们旨在在跨平台情况下工作。每个布局都解决了特定的问题。一旦我们了解了每个布局的工作方式，我们就可以将它们分层在一起以构建我们梦想的 UI。

下一主题Xamarin 中的视图

Xamarin.Forms 布局

堆栈布局

网格布局

不使用 Grid

网格布局

目的

用途

行和列

Flex 布局

绝对布局

相对布局

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

滚动视图

总结

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Xamarin 教程

面试题

Xamarin.Forms 布局

堆栈布局

网格布局

不使用 Grid

网格布局

目的

用途

行和列

Flex 布局

绝对布局

相对布局

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

滚动视图

总结

相关帖子

Xamarin.Forms 的 XAML

Android Activity 生命周期

Xamarin Workbook

Xamarin 教程

Android 应用程序基础

Xamarin.Forms 生命周期

Xamarin Profiler

Xamarin 安装

Xamarin.Android

Xamarin Forms

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器