第十七章：掌握网格（二）

代码中的网格
也可以完全用代码定义网格，但通常没有XAML定义的清晰度或有序性。 GridCodeDemo程序通过再现SimpleGridDemo的布局来演示代码方法。
要指定RowDefinition的高度和ColumnDefinition的宽度，可以使用GridLength结构的值，通常与GridUnitType枚举结合使用。 GridCodeDemoPage类顶部的行定义演示了GridLength的变体。 不包括列定义，因为它们与默认生成的列定义相同：

public class GridCodeDemoPage : ContentPage
{
    public GridCodeDemoPage()
    {
        Grid grid = new Grid
        {
            RowDefinitions = 
            {
                new RowDefinition { Height = GridLength.Auto },
                new RowDefinition { Height = new GridLength(100) },
                new RowDefinition { Height = new GridLength(2, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
            }
        };
        // First Label (row 0 and column 0).
        grid.Children.Add(new Label
        {
            Text = "Grid Demo",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.End
        });
        // Second Label.
        grid.Children.Add(new Label
            {
                Text = "Demo the Grid",
                FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label)),
                HorizontalOptions = LayoutOptions.End,
                VerticalOptions = LayoutOptions.End
            }, 
            1, // left
            0); // top
        // Image element.
        grid.Children.Add(new Image
            {
                BackgroundColor = Color.Gray,
                Source = Device.OnPlatform("Icon-60.png",
                                           "icon.png",
                                           "Assets/StoreLogo.png")
            },
            0, // left
            2, // right
            1, // top
            2); // bottom
        // Three BoxView elements.
        BoxView boxView1 = new BoxView { Color = Color.Green };
        Grid.SetRow(boxView1, 2);
        Grid.SetColumn(boxView1, 0);
        grid.Children.Add(boxView1);
        BoxView boxView2 = new BoxView { Color = Color.Red };
        Grid.SetRow(boxView2, 2);
        Grid.SetColumn(boxView2, 1);
        Grid.SetRowSpan(boxView2, 2);
        grid.Children.Add(boxView2);
        BoxView boxView3 = new BoxView
        { 
            Color = Color.Blue, 
            Opacity = 0.5
        };
        Grid.SetRow(boxView3, 3);
        Grid.SetColumn(boxView3, 0);
        Grid.SetColumnSpan(boxView3, 2);
        grid.Children.Add(boxView3);
        Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
        Content = grid;
    }
}

该程序显示了几种不同的方式将子项添加到网格并指定它们所在的单元格。 第一个Label位于第0行和第0列，因此只需将其添加到Grid的Children集合中以获取默认的行和列设置：

grid.Children.Add(new Label
{
   __
});

Grid重新定义其Children集合为IGridList 类型，其中包含几个额外的Add方法。 其中一种Add方法允许您指定行和列：

grid.Children.Add(new Label
    {
        __
    }, 
    1, // left
    0); // top

正如注释所示，参数实际上被命名为left和top而不是column和row。 当您看到指定行和列跨度的语法时，这些名称更有意义：

grid.Children.Add(new Image
    {
        __
    },
    0, // left
    2, // right
    1, // top
    2); // bottom

这意味着子元素在左边开始但在右边之前结束 - 换句话说，第0列和第1列。它占据从顶部开始但在底部之前结束的行，即第1行。右边的参数必须 总是大于左，底部参数必须大于顶部。 如果没有，Grid会抛出ArgumentOutOfRangeException。
IGridList 接口还定义了AddHorizontal和AddVertical方法，以将子项添加到单行或单列Grid。 在进行这些调用时，Grid会按列或行进行扩展，以及在子项上自动分配Grid.Column或Grid.Row设置。 您将在下一部分中看到此工具的用途。
在代码中将子项添加到Grid时，也可以显式调用Grid.SetRow，Grid.SetColumn，Grid.SetRowSpan和Grid.SetColumnSpan。 在将子项添加到Grid的Children集合之前或之后是否进行这些调用并不重要：

BoxView boxView1 = new BoxView { … };
Grid.SetRow(boxView1, 2);
Grid.SetColumn(boxView1, 0);
grid.Children.Add(boxView1);
BoxView boxView2 = new BoxView { … };
Grid.SetRow(boxView2, 2);
Grid.SetColumn(boxView2, 1);
Grid.SetRowSpan(boxView2, 2);
grid.Children.Add(boxView2);
BoxView boxView3 = new BoxView
{ 
    __
};
Grid.SetRow(boxView3, 3);
Grid.SetColumn(boxView3, 0);
Grid.SetColumnSpan(boxView3, 2);
grid.Children.Add(boxView3);