3.Xamarin.Forms中布局控件的使用

这里我所使用的主要还是是StackLayout，可以横或竖的依次排列其他控件。

先解决下条目过多是滚动的问题吧。
使用的控件为ScrollView，然后把StackLayout放在它里面就行了。
举个例子，一个颜色的列表：

 class aaa:ContentPage
    {
        public aaa()
        {
            var colors = new[] 
            {
                new { value = Color.White, name = "White" },
                new { value = Color.Silver, name = "Silver" },
                new { value = Color.Gray, name = "Gray" },
                new { value = Color.Black, name = "Black" },
                new { value = Color.Red, name = "Red" },
                new { value = Color.Maroon, name = "Maroon" },
                new { value = Color.Yellow, name = "Yellow" },
                new { value = Color.Olive, name = "Olive" },
                new { value = Color.Lime, name = "Lime" },
                new { value = Color.Green, name = "Green" },
                new { value = Color.Aqua, name = "Aqua" },
                new { value = Color.Teal, name = "Teal" },
                new { value = Color.Blue, name = "Blue" },
                new { value = Color.Navy, name = "Navy" },
                new { value = Color.Pink, name = "Pink" },
                new { value = Color.Fuchsia, name = "Fuchsia" },
                new { value = Color.Purple, name = "Purple" },
                new {value=Color.Fuschia,name="Fuschia"}
            };
            StackLayout stackLayout = new StackLayout();
            foreach (var color in colors)
            {
                stackLayout.Children.Add(new Label
                {
                    Text = color.name,
                    TextColor = color.value,
                    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
                });
            }
            Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
            Content = new ScrollView
            {
                Content = stackLayout
            };
        }
    }

然后是横向的实现:
也就是加两行代码

class aaa:ContentPage
    {
        public aaa()
        {
            var colors = new[] 
            {
                new { value = Color.White, name = "White" },
                new { value = Color.Silver, name = "Silver" },
                new { value = Color.Gray, name = "Gray" },
                new { value = Color.Black, name = "Black" },
                new { value = Color.Red, name = "Red" },
                new { value = Color.Maroon, name = "Maroon" },
                new { value = Color.Yellow, name = "Yellow" },
                new { value = Color.Olive, name = "Olive" },
                new { value = Color.Lime, name = "Lime" },
                new { value = Color.Green, name = "Green" },
                new { value = Color.Aqua, name = "Aqua" },
                new { value = Color.Teal, name = "Teal" },
                new { value = Color.Blue, name = "Blue" },
                new { value = Color.Navy, name = "Navy" },
                new { value = Color.Pink, name = "Pink" },
                new { value = Color.Fuchsia, name = "Fuchsia" },
                new { value = Color.Purple, name = "Purple" },
                new {value=Color.Fuschia,name="Fuschia"}
            };
            StackLayout stackLayout = new StackLayout
            {
                Orientation = StackOrientation.Horizontal
            };
            foreach (var color in colors)
            {
                stackLayout.Children.Add(new Label
                {
                    Text = color.name,
                    TextColor = color.value,
                    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
                });
            }
            Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5);
            Content = new ScrollView
            {
                Orientation=ScrollOrientation.Horizontal,
                Content = stackLayout
            };

在各种控件的属性里还有位置的属性可以设置
有如下可用的选项：

 LayoutOptions.Start 
 LayoutOptions.Center 
 LayoutOptions.End 
LayoutOptions.Fill 
LayoutOptions.StartAndExpand 
LayoutOptions.CenterAndExpand 
LayoutOptions.EndAndExpand 
LayoutOptions.FillAndExpand 

class aaa:ContentPage
    {
        public aaa()
        {
            Color[] colors = { Color.Yellow, Color.Blue };
            int flipFlopper = 0;
            // Create Labels sorted by LayoutAlignment property.   
            IEnumerable<Label> labels =            
                from field in typeof(LayoutOptions).GetRuntimeFields()
                where field.IsPublic && field.IsStatic
                orderby ((LayoutOptions)field.GetValue(null)).Alignment
                select new Label
                {
                    Text = "VerticalOptions = " + field.Name,
                    VerticalOptions = (LayoutOptions)field.GetValue(null),
                    XAlign = TextAlignment.Center,
                    FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
                    TextColor = colors[flipFlopper],
                    BackgroundColor = colors[flipFlopper = 1 - flipFlopper]
                };
            // Transfer to StackLayout.      
            StackLayout stackLayout = new StackLayout();  
            foreach (Label label in labels) { stackLayout.Children.Add(label); }
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0); Content = stackLayout;
        }
    }

然后下面是Frame和BoxView的使用。

先简单的使用下frame；

class aaa:ContentPage
    {
        public aaa()
        {
            Padding = new Thickness(20);
            Content = new Frame
            {
                OutlineColor = Color.Accent,
                Content = new Label
                {
                    Text = "I've been framed!",
                    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center
                }
            };
        }
    }

也可以让他紧贴文字：

class aaa:ContentPage
    {
        public aaa()
        {
            Padding = new Thickness(20);
            Content = new Frame
            {
                OutlineColor = Color.Accent,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                Content = new Label
                {
                    Text = "I've been framed!",
                    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center
                }
            };
        }
    }

当然，也可以改变他的颜色

class aaa:ContentPage
    {
        public aaa()
        {
            BackgroundColor = Color.Aqua;
            Padding = new Thickness(20);
            Content = new Frame
            {
                OutlineColor = Color.Black,
                BackgroundColor = Color.Yellow,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center,
                Content = new Label
                {

                    Text = "I've been framed!",
                    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Center,
                    TextColor = Color.Blue
                }
            };
        }
    }

创建一个简单的BoxView

 class aaa:ContentPage
    {
        public aaa()
        {
            Content = new BoxView
            {
                Color = Color.Accent,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };
        }
    }

同样可以用上面的方法来改变颜色。

最后在附上个综合点的例子：

class aaa:ContentPage
    {
        View CreateColorView(Color color, string name)
        {
            return new Frame
            {
                OutlineColor = Color.Accent,
                Padding = new Thickness(5),
                Content = new StackLayout
                {
                    Orientation = StackOrientation.Horizontal,
                    Spacing = 15,
                    Children =
                    {
                        new BoxView
                        {
                            Color = color
                        },
                        new Label
                        {
                            Text = name,
                            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
                            FontAttributes = FontAttributes.Bold,
                            VerticalOptions = LayoutOptions.Center,
                            HorizontalOptions = LayoutOptions.StartAndExpand
                        },
                        new StackLayout
                        {
                            Children =
                            {
                                new Label
                                {
                                    Text = String.Format("{0:X2}-{1:X2}-{2:X2}",
                                    (int)(255 * color.R),
                                    (int)(255 * color.G),
                                    (int)(255 * color.B)),
                                    VerticalOptions = LayoutOptions.CenterAndExpand,
                                    IsVisible = color != Color.Default
                                },
                                new Label
                                {
                                    Text = String.Format("{0:F2}, {1:F2}, {2:F2}",
                                    color.Hue,
                                    color.Saturation,
                                    color.Luminosity),
                                    VerticalOptions = LayoutOptions.CenterAndExpand,
                                    IsVisible = color != Color.Default
                                }
                            },
                            HorizontalOptions = LayoutOptions.End
                        }
                    }
                }
            };
        }
        public aaa()
        {
            Content = new ScrollView
            {
                Orientation=ScrollOrientation.Vertical,
                Content = new StackLayout
                {
                    Children =
                    {
                        CreateColorView(Color.Aqua,"Aqua"),
                        CreateColorView(Color.Black,"Black"),
                        CreateColorView(Color.Blue,"Blue"),
                        CreateColorView(Color.Fuchsia,"Fuchsia"),
                        CreateColorView(Color.Green,"Green"),
                        CreateColorView(Color.Navy,"Navy"),
                        CreateColorView(Color.Pink,"Pink"),
                        CreateColorView(Color.Aqua,"Aqua"),
                        CreateColorView(Color.Black,"Black"),
                        CreateColorView(Color.Blue,"Blue"),
                        CreateColorView(Color.Fuchsia,"Fuchsia"),
                        CreateColorView(Color.Green,"Green"),
                        CreateColorView(Color.Navy,"Navy"),
                        CreateColorView(Color.Pink,"Pink"),
                        CreateColorView(Color.Aqua,"Aqua"),
                        CreateColorView(Color.Black,"Black"),
                        CreateColorView(Color.Blue,"Blue"),
                        CreateColorView(Color.Fuchsia,"Fuchsia"),
                        CreateColorView(Color.Green,"Green"),
                        CreateColorView(Color.Navy,"Navy"),
                        CreateColorView(Color.Pink,"Pink"),
                        CreateColorView(Color.Aqua,"Aqua"),
                        CreateColorView(Color.Black,"Black"),
                        CreateColorView(Color.Blue,"Blue"),
                        CreateColorView(Color.Fuchsia,"Fuchsia"),
                        CreateColorView(Color.Green,"Green"),
                        CreateColorView(Color.Navy,"Navy"),
                        CreateColorView(Color.Pink,"Pink")

                    }
                }
            };
        }
    }