网格条形图

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

代码隐藏文件创建了50个BoxView元素，其随机HeightRequest属性介于0和300之间。此外，每个BoxView的StyleId属性都被赋予一个字符串，该字符串由交替的随机辅音和元音组成，类似于某个名称（可能是某个人） 来自另一个星球）。 所有这些BoxView元素都累积在一个通用的List集合中，然后添加到Grid中。 该作业是构造函数中的大部分代码：

public partial class GridBarChartPage : ContentPage{    const int COUNT = 50;    Random random = new Random();    public GridBarChartPage()    {        InitializeComponent();        List
    
      views = new List
     
      ();        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;    }}
     
    

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

当您将手机侧向转动以增加宽度时，条形更明显：此程序还有另一个功能：当您点击其中一个条形图时，覆盖图将变为可见并显示有关该条形图条的信息 - 特别是来自StyleId的行星际访客名称和条形图的高度。 但是构造函数中设置的计时器会不断降低叠加层上的不透明度值，因此此信息会逐渐淡出视图：即使没有原生图形系统，Xamarin.Forms也能够显示看起来非常像图形的东西。