Xamarin.Forms布局讲解(三)

以下主要内容转自：http://www.jianshu.com/p/eba66eae8402

Grid 介绍

Grid是一种横竖排列的布局，即九宫格。可以通过ColumnSpacing和RowSpacing设置每行每列之间的间隙。Xaml定义时会先通过RowDefinitions 和ColumnDefinitions确定Grid行和列的数量，RowDefinition的Height属性表示每行的高度，ColumnDefinition的'Width'属性表示每列的宽度。Height和Width都是'GridLength'类型。

定义GridLength类型时可能会涉及到GridUnitType枚举类型的使用。

• Absolute—表示一个具体宽高值（device-independent units，在XAML中定义是用具体数字表示）

• Auto—表示宽高由内容决定 (在XAML中用“Auto” 表示)

• Star—余下的单元格按比例分配宽高 ( 在XAML中用“*”表示或数字+“*”)

Xaml文件中添加如下代码：

  <Grid>
        <Grid.RowDefinitions>
              <RowDefinition Height="90" />
              <RowDefinition Height="180" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Text="Top Left" Grid.Row="0" Grid.Column="0" BackgroundColor="Aqua"/>
        <Label Text="Top Right" Grid.Row="0" Grid.Column="1" BackgroundColor="Yellow"/>
        <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" BackgroundColor="Lime"/>
        <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" BackgroundColor="Red"/>

  </Grid>

上述代码首先定义一个两行两列的Grid,第一行的高度是90，第二行的高度是180,第一列宽度是自适应Cell的宽度，第二列是填充剩余宽度（如果采用代码定义只要调用Grid的RowDefinitions和ColumnDefinitions的Add方法即可）。

定义每个视图所在的行和列。子视图所在的位置是由Grid.Row和Grid.Column两个属性确定的（Grid提供的附加属性），两个属性的默认值都为0，即默认位置第一行的第一列。

运行效果如下：