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

网格条形图
由网格的子项集合定义的AddVertical和AddHorizontal方法可以一次性将整个视图集合添加到Grid。默认情况下，新行或列的高度或宽度为“ *”（星号），从而生成的网格包含多个行或列，每个行或列的大小相同。
让我们使用AddHorizontal方法制作一个小条形图，其中包含50个具有随机高度的BoxView中元素。GridBarChart程序的XAML文件定义了一个AbsoluteLayout此框架使用的覆盖图，以显示条形图中特定条形图的信息。它的不透明度设置为0，因此它最初是不可见的：

代码隐藏文件创建了50个BoxView元素，其随机高度请求属性介于0和300之间。因此，每个BoxView的StyleId属性都被替换为一个字符串，该字符串由交替的随机辅音和元音组成，所有这些BoxView元素都累积在一个通用的列表集合中，然后添加到Grid中。该作业是构造函数中的大部分代码：

public partial class GridBarChartPage : ContentPage
{
    const int COUNT = 50;
    Random random = new Random();
    public GridBarChartPage()
    {
        InitializeComponent();
        List<View> views = new List<View>();
        TapGestureRecognizer tapGesture = new TapGestureRecognizer();
        tapGesture.Tapped += OnBoxViewTapped;
        // Create BoxView elements and add to List.
        for (int i = 0; i < COUNT; i++)
        {
            BoxView boxView = new BoxView
            {
                Color = Color.Accent,
                HeightRequest = 300 * random.NextDouble(),
                VerticalOptions = LayoutOptions.End,
                StyleId = RandomNameGenerator()
            };
            boxView.GestureRecognizers.Add(tapGesture);
            views.Add(boxView);
        }
        // Add whole List of BoxView elements to Grid.
        grid.Children.AddHorizontal(views);
        // Start a timer at the frame rate.
        Device.StartTimer(TimeSpan.FromMilliseconds(15), OnTimerTick);
    }
    // Arrays for Random Name Generator.
    string[] vowels = { "a", "e", "i", "o", "u", "ai", "ei", "ie", "ou", "oo" };
    string[] consonants = { "b", "c", "d", "f", "g", "h", "j", "k", "l", "m",
                            "n", "p", "q", "r", "s", "t", "v", "w", "x", "z" };
    string RandomNameGenerator()
    {
        int numPieces = 1 + 2 * random.Next(1, 4);
        StringBuilder name = new StringBuilder();
        for (int i = 0; i < numPieces; i++)
        {
            name.Append(i % 2 == 0 ?
            consonants[random.Next(consonants.Length)] :
            vowels[random.Next(vowels.Length)]);
        }
        name[0] = Char.ToUpper(name[0]);
        return name.ToString();
    }
    // Set text to overlay Label and make it visible.
    void OnBoxViewTapped(object sender, EventArgs args)
    {
        BoxView boxView = (BoxView)sender;
        label.Text = String.Format("The individual known as {0} " +
                                   "has a height of {1} centimeters.",
                                   boxView.StyleId, (int)boxView.HeightRequest);
        overlay.Opacity = 1;
    }
    // Decrease visibility of overlay.
    bool OnTimerTick()
    {
        overlay.Opacity = Math.Max(0, overlay.Opacity - 0.0025);
        return true;
    }
}

ChildrenCollection的AddHorizontal方法将多个BoxView元素添加到网格中，并为它们提供顺序的Grid.Column设置。默认情况下，每列的宽度为“ *”（星号），因此每个BoxView的宽度在XAML文件中设置为网格的间距值1提供了条形图条形之间的一点间隔：

当您将手机侧向转动以增加宽度时，条形更明显：

此程序还有另一个功能：当您点击其中一个条形图时，覆盖图将变为可见并显示有关该条形图条的信息-特别是来自StyleId的行星际访客名称和条形图的。高度但是构造函数中设置的计时器会不断降低叠加层上的不透明度值，因此此信息会逐渐淡出视图：

即使没有原生图形系统，Xamarin.Forms也能够显示看起来非常像图形的东西。