Xamarin.Forms 用户界面——控件——布局——Grid

Grid

目前在网格中的观点。

PDF用于离线使用

• 下载PDF

示例代码：

• 布局
• BusinessTumble示例

相关API：

• 格

让我们知道你对此的感受

最后更新：2015年11月

Grid支持将视图排列成行和列。行和列可以设置为具有比例尺寸或绝对尺寸。该Grid布局不应该与传统的表格相混淆，并且不旨在以呈现表格数据。Grid没有行，列或单元格格式的概念。不像HTML表，Grid纯粹是为了布局内容。

本文将介绍：

• 目的 - 常用的用途Grid。
• 用法 - 如何使用Grid来实现您想要的设计。
  • 行和列 - 指定行和列Grid。
  • 放置视图 - 将视图添加到特定行和列的网格。
  • 间距 - 配置行和列之间的空格。
  • 跨度 - 将元素配置为跨多行或多列。

目的

Grid可用于将视图排列到网格中。这在一些情况下是有用的：

• 在计算器应用程序中排列按钮
• 在网格中排列按钮/选项，如iOS或Android主屏幕
• 排列视图，使其在一个维度上具有相同的大小（如某些工具栏）

用法

与传统表不同，Grid不会从内容中推断行和列的数量和大小。相反，Grid有RowDefinitions和ColumnDefinitions收藏。这些定义将排列多少行和列。视图被添加到Grid指定的行和列索引，它们标识应该放置视图的哪一行和列。

行和列

行和列的信息被存储在Grid的RowDefinitions＆ColumnDefinitions性能，这是的各集合RowDefinition和ColumnDefinition对象，分别。RowDefinition有一个属性，Height并ColumnDefinition有一个属性，Width。高度和宽度的选项如下：

• 自动 - 自动调整大小以适应行或列中的内容。指定为GridUnitType.AutoC＃或AutoXAML中。
• 比例（*） - 大小列和行占剩余空间的比例。指定为值，并GridUnitType.Star以C＃和#*XAML #中的值作为您的期望值。指定一行/列*将使其填充可用空间。
• 绝对尺寸的列和行具有特定的，固定的高度和宽度值。指定为值，并GridUnitType.Absolute以C＃和#XAML #中的值作为您的期望值。

注意：*在Xamarin.Forms中，列的宽度值默认设置，这可确保该列填充可用空间。

考虑一个需要三行和两列的应用程序。底行需要高达200px高，顶行需要是中间行的两倍。左列需要足够宽以适合内容，右列需要填充剩余空间。

在XAML中：

<Grid>  <Grid.RowDefinitions>    <RowDefinition Height="2*" />    <RowDefinition Height="*" />    <RowDefinition Height="200" />  </Grid.RowDefinitions>  <Grid.ColumnDefinitions>    <ColumnDefinition Width="Auto" />    <ColumnDefinition Width="*" />  </Grid.ColumnDefinitions></Grid>

在C＃中：

var grid = new Grid();grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });

在网格中放置视图

要在其中放置视图，Grid您需要将它们作为子节点添加到网格中，然后指定它们所属的行和列。

在XAML中，使用Grid.Row和Grid.Column在每个单独的视图上指定展示位置。请注意，Grid.Row并Grid.Column根据行和列的基于零的列表指定位置。这意味着在4×4网格中，左上方的单元格为（0,0），右下方单元格为（3,3）。

下面Grid显示了四个单元格：

在XAML中：

<Grid>  <Grid.RowDefinitions>    <RowDefinition Height="*" />    <RowDefinition Height="*" />  </Grid.RowDefinitions>  <Grid.ColumnDefinitions>    <ColumnDefinition Width="*" />    <ColumnDefinition Width="*" />  </Grid.ColumnDefinitions>  <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />  <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />  <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />  <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" /></Grid>

在C＃中：

var grid = new Grid();grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star)});grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star)});var topLeft = new Label { Text = "Top Left" };var topRight = new Label { Text = "Top Right" };var bottomLeft = new Label { Text = "Bottom Left" };var bottomRight = new Label { Text = "Bottom Right" };grid.Children.Add(topLeft, 0, 0);grid.Children.Add(topRight, 0, 1);grid.Children.Add(bottomLeft, 1, 0);grid.Children.Add(bottomRight, 1, 1);

上述代码创建具有四个标签，两列和两行的网格。请注意，每个标签将具有相同的大小，并且这些行将展开以使用所有可用空间。

间距

Grid具有控制行和列间距的属性。以下属性可用于自定义Grid：

• ColumnSpacing - 列之间的空间量。
• RowSpacing - 行之间的空间量。

以下XAML指定Grid列之间的两列，一列和五个像素间距：

<Grid ColumnSpacing="5">  <Grid.ColumnDefinitions>    <ColumnDefinitions Width="*" />    <ColumnDefinitions Width="*" />  </Grid.ColumnDefinitions></Grid>

在C＃中：

var grid = new Grid { ColumnSpacing = 5 };grid.ColumnDefnitions.Add(new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star)});grid.ColumnDefnitions.Add(new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star)});

跨度

通常在使用网格时，有一个元素应该占据多个行或列。考虑一个简单的计算器应用

请注意，0按钮跨两列，就像每个平台的内置计算器一样。这是使用ColumnSpan属性来实现的，该属性指定一个元素应占据多少列。该按钮的XAML：

<Button Text = "0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" />

在C＃中：

Button zeroButton = new Button { Text = "0" };controlGrid.Children.Add (zeroButton, 0, 4);Grid.SetColumnSpan (zeroButton, 2);

请注意，在代码中，Grid该类的静态方法用于执行定位更改，包括更改ColumnSpan和RowSpan。还要注意，与其他随时可以设置的属性不同，使用静态方法设置的属性在更改之前必须位于网格中。

上述计算器应用程序的完整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"x:Class="LayoutSamples.CalculatorGridXAML"Title = "Calculator - XAML"BackgroundColor="#404040">    <ContentPage.Resources>        <ResourceDictionary>            <Style x:Key="plainButton" TargetType="Button">                <Setter Property="BackgroundColor" Value="#eee"/>                <Setter Property="TextColor" Value="Black" />                <Setter Property="BorderRadius" Value="0"/>                <Setter Property="FontSize" Value="40" />            </Style>            <Style x:Key="darkerButton" TargetType="Button">                <Setter Property="BackgroundColor" Value="#ddd"/>                <Setter Property="TextColor" Value="Black" />                <Setter Property="BorderRadius" Value="0"/>                <Setter Property="FontSize" Value="40" />            </Style>            <Style x:Key="orangeButton" TargetType="Button">                <Setter Property="BackgroundColor" Value="#E8AD00"/>                <Setter Property="TextColor" Value="White" />                <Setter Property="BorderRadius" Value="0"/>                <Setter Property="FontSize" Value="40" />            </Style>        </ResourceDictionary>    </ContentPage.Resources>    <ContentPage.Content>        <Grid x:Name="controlGrid" RowSpacing="1" ColumnSpacing="1">            <Grid.RowDefinitions>                <RowDefinition Height="150" />                <RowDefinition Height="*" />                <RowDefinition Height="*" />                <RowDefinition Height="*" />                <RowDefinition Height="*" />                <RowDefinition Height="*" />            </Grid.RowDefinitions>            <Grid.ColumnDefinitions>                <ColumnDefinition Width="*" />                <ColumnDefinition Width="*" />                <ColumnDefinition Width="*" />                <ColumnDefinition Width="*" />            </Grid.ColumnDefinitions>            <Label Text="0" Grid.Row="0" HorizontalTextAlignment="End" VerticalTextAlignment="End" TextColor="White"        FontSize="60" Grid.ColumnSpan="4" />            <Button Text = "C" Grid.Row="1" Grid.Column="0"        Style="{StaticResource darkerButton}" />            <Button Text = "+/-" Grid.Row="1" Grid.Column="1"        Style="{StaticResource darkerButton}" />            <Button Text = "%" Grid.Row="1" Grid.Column="2"        Style="{StaticResource darkerButton}" />            <Button Text = "div" Grid.Row="1" Grid.Column="3"        Style="{StaticResource orangeButton}" />            <Button Text = "7" Grid.Row="2" Grid.Column="0"        Style="{StaticResource plainButton}" />            <Button Text = "8" Grid.Row="2" Grid.Column="1"        Style="{StaticResource plainButton}" />            <Button Text = "9" Grid.Row="2" Grid.Column="2"        Style="{StaticResource plainButton}" />            <Button Text = "X" Grid.Row="2" Grid.Column="3"        Style="{StaticResource orangeButton}" />            <Button Text = "4" Grid.Row="3" Grid.Column="0"        Style="{StaticResource plainButton}" />            <Button Text = "5" Grid.Row="3" Grid.Column="1"        Style="{StaticResource plainButton}" />            <Button Text = "6" Grid.Row="3" Grid.Column="2"        Style="{StaticResource plainButton}" />            <Button Text = "-" Grid.Row="3" Grid.Column="3"        Style="{StaticResource orangeButton}" />            <Button Text = "1" Grid.Row="4" Grid.Column="0"        Style="{StaticResource plainButton}" />            <Button Text = "2" Grid.Row="4" Grid.Column="1"        Style="{StaticResource plainButton}" />            <Button Text = "3" Grid.Row="4" Grid.Column="2"        Style="{StaticResource plainButton}" />            <Button Text = "+" Grid.Row="4" Grid.Column="3"        Style="{StaticResource orangeButton}" />            <Button Text = "0" Grid.ColumnSpan="2"        Grid.Row="5" Grid.Column="0" Style="{StaticResource plainButton}" />            <Button Text = "." Grid.Row="5" Grid.Column="2"        Style="{StaticResource plainButton}" />            <Button Text = "=" Grid.Row="5" Grid.Column="3"        Style="{StaticResource orangeButton}" />        </Grid>    </ContentPage.Content></ContentPage>

请注意，网格顶部的标签和零按钮都占用了多列。虽然类似的布局可以使用嵌套的网格来实现，在ColumnSpan与RowSpan方法更加简单。

C＃实现：

public CalculatorGridCode (){  Title = "Calculator - C#";  BackgroundColor = Color.FromHex ("#404040");  var plainButton = new Style (typeof(Button)) {    Setters = {      new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex ("#eee") },      new Setter { Property = Button.TextColorProperty, Value = Color.Black },      new Setter { Property = Button.BorderRadiusProperty, Value = 0 },      new Setter { Property = Button.FontSizeProperty, Value = 40 }    }  };  var darkerButton = new Style (typeof(Button)) {    Setters = {      new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex ("#ddd") },      new Setter { Property = Button.TextColorProperty, Value = Color.Black },      new Setter { Property = Button.BorderRadiusProperty, Value = 0 },      new Setter { Property = Button.FontSizeProperty, Value = 40 }    }  };  var orangeButton = new Style (typeof(Button)) {    Setters = {      new Setter { Property = Button.BackgroundColorProperty, Value = Color.FromHex ("#E8AD00") },      new Setter { Property = Button.TextColorProperty, Value = Color.White },      new Setter { Property = Button.BorderRadiusProperty, Value = 0 },      new Setter { Property = Button.FontSizeProperty, Value = 40 }    }  };  var controlGrid = new Grid { RowSpacing = 1, ColumnSpacing = 1 };  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (150) });  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });  controlGrid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });  controlGrid.ColumnDefinitions.Add (new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) });  var label = new Label {    Text = "0",    HorizontalTextAlignment = TextAlignment.End,    VerticalTextAlignment = TextAlignment.End,    TextColor = Color.White,    FontSize = 60  };  controlGrid.Children.Add (label, 0, 0);  Grid.SetColumnSpan (label, 4);  controlGrid.Children.Add (new Button { Text = "C", Style = darkerButton }, 0, 1);  controlGrid.Children.Add (new Button { Text = "+/-", Style = darkerButton }, 1, 1);  controlGrid.Children.Add (new Button { Text = "%", Style = darkerButton }, 2, 1);  controlGrid.Children.Add (new Button { Text = "div", Style = orangeButton }, 3, 1);  controlGrid.Children.Add (new Button { Text = "7", Style = plainButton }, 0, 2);  controlGrid.Children.Add (new Button { Text = "8", Style = plainButton }, 1, 2);  controlGrid.Children.Add (new Button { Text = "9", Style = plainButton }, 2, 2);  controlGrid.Children.Add (new Button { Text = "X", Style = orangeButton }, 3, 2);  controlGrid.Children.Add (new Button { Text = "4", Style = plainButton }, 0, 3);  controlGrid.Children.Add (new Button { Text = "5", Style = plainButton }, 1, 3);  controlGrid.Children.Add (new Button { Text = "6", Style = plainButton }, 2, 3);  controlGrid.Children.Add (new Button { Text = "-", Style = orangeButton }, 3, 3);  controlGrid.Children.Add (new Button { Text = "1", Style = plainButton }, 0, 4);  controlGrid.Children.Add (new Button { Text = "2", Style = plainButton }, 1, 4);  controlGrid.Children.Add (new Button { Text = "3", Style = plainButton }, 2, 4);  controlGrid.Children.Add (new Button { Text = "+", Style = orangeButton }, 3, 4);  controlGrid.Children.Add (new Button { Text = ".", Style = plainButton }, 2, 5);  controlGrid.Children.Add (new Button { Text = "=", Style = orangeButton }, 3, 5);  var zeroButton = new Button { Text = "0", Style = plainButton };  controlGrid.Children.Add (zeroButton, 0, 5);  Grid.SetColumnSpan (zeroButton, 2);  Content = controlGrid;}