简介
演示如何在 Grid 中布局。
- 在 XAML 中创建 Xamarin.Forms Grid。
- 指定 Grid 的列和行。
- 涉及 Grid 中多列或多行的内容。
创建 Grid
- 打开已有项目 AwesomeApp。
- 添加新项 GridPage.xaml。
- 编辑 GridPage.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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="AwesomeApp.GridPage">
<ContentPage.Content>
<Grid Margin="20,35">
<Label Text="设置Grid.Margin,可控制Grid外边距。" />
</Grid>
</ContentPage.Content>
</ContentPage>
*除 Margin 属性外,还可在 Grid 上设置 Padding 属性。 Padding 指定 Grid 的内边距。
- 编辑 App.xaml.cs:
public App()
{
InitializeComponent();
MainPage = new GridPage();
}
- 调试 Android 上的应用:
行列配置
- 编辑 GridPage.xaml:
<Grid Margin="20,35,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Label Text="Column 0, Row 0" />
<Label Grid.Column="1"
Text="Column 1, Row 0" />
<Label Grid.Row="1"
Text="Column 0, Row 1" />
<Label Grid.Column="1"
Grid.Row="1"
Text="Column 1, Row 1" />
</Grid>
- 调试 Android 上的应用:
有效的宽度值和高度值为:
- Auto 对列或行进行大小调整以适应内容。
- 比例值,将列和行的大小设置为剩余空间的比例。 以 * 结尾表示比例值。
- 绝对值,使用特定的固定值调整列或行的大小。
*可以使用 ColumnSpacing 和 RowSpacing 属性设置 Grid 中列和行之间的间距
跨行跨列
- 编辑 GridPage.xaml:
<Grid Margin="20,35,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2"
Text="This text uses the ColumnSpan property to span both columns." />
<Label Grid.Row="1"
Grid.RowSpan="2"
Text="This text uses the RowSpan property to span two rows." />
</Grid>
ColumnSpan 跨越多列,RowSpan 跨越多行
- 调试 Android 上的应用:
网友评论