以下主要内容转自: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,即默认位置第一行的第一列。
运行效果如下: