Xamarin.Forms<二>

Layout面板
主要包括：ContentView，Frame，ScrollView，AbsoluteLayout，Grid，RelativeLayout，StackLayout
。
StackLayout
在垂直或水平方向上放置控件

/// <summary>
        /// stacklayout布局
        /// </summary>
        /// <returns></returns>
        public StackLayout TestViewCellSL()
        {
            var textName = new Label
            {
            };
            textName.SetBinding(Label.TextProperty, "TestName");

            var textImage = new Image
            {
            };
            textImage.SetBinding(Image.SourceProperty, "ImageSource");

            var testViewCellSL = new StackLayout
            {
                //排序方向，水平
                Orientation = StackOrientation.Horizontal,
                //边缘边距，左上右下
                Padding = new Thickness(5,10,20,30),
                //stacklayout内控件之间的间距
                Spacing = 10,
                //包含控件
                Children =
                {
                    textImage,
                    textName,
                },
            };
            return testViewCellSL;
        }

ScrollView
滑动面板，该ListView与该面板在一些系统里面不兼容，ListView无法滑动，只显示当前的Rows，显著的
不兼容系统：小米系统。

 /// <summary>
        /// ScrollView布局
        /// </summary>
        /// <returns></returns>
        public ScrollView TestScrollView()
        {
            var testScrollView = new ScrollView
            {
                //滑动方向，垂直
                Orientation = ScrollOrientation.Vertical,
                //包含内容，只能是一个，可以是一个控件，可以是一个面板
                Content = TestGrid(),
            };
            return testScrollView;
        }

AbsoluteLayout
绝对位置面板

        Label text1;
        Label text2;

        bool isCurrentPage;

        /// <summary>
        /// 绝对位置
        /// </summary>
        /// <returns></returns>
        public AbsoluteLayout TestAbsoluteLayout()
        {
            //在要求绝对位置定位子元素。用户指定锚和边界限定了控制的位置和大小。
            text1 = new Label
            {
                Text = "1"
            };
            
            var label3 = new Label
            {
                Text = "3"
            };
            var testAbsoluteLayout = new AbsoluteLayout
            {
            };
            testAbsoluteLayout.Children.Add(text1);
            //绝对布局标志
            AbsoluteLayout.SetLayoutFlags(text1, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(text1, new Rectangle());

            text2 = new Label
            {
                Text = "AbsoluteLayout",
                TextColor = Color.Black
            };
            testAbsoluteLayout.Children.Add(text2);
            AbsoluteLayout.SetLayoutFlags(text2,
                AbsoluteLayoutFlags.PositionProportional);

            return testAbsoluteLayout;
        }


        protected override void OnAppearing()
        {
            base.OnAppearing();
            isCurrentPage = true;
            DateTime beginTime = DateTime.Now;

            Device.StartTimer(TimeSpan.FromSeconds(1.0 / 30), () =>
            {
                double seconds = (DateTime.Now - beginTime).TotalSeconds;
                double offset = 1 - Math.Abs((seconds % 2) - 1);

                AbsoluteLayout.SetLayoutBounds(text1,
                    new Rectangle(offset, offset,
                        AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

                AbsoluteLayout.SetLayoutBounds(text2,
                    new Rectangle(1 - offset, offset,
                        AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

                return isCurrentPage;
            });
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            isCurrentPage = false;
        }

RelativeLayout
相对位置面板

/// <summary>
        /// 相对位置布局
        /// </summary>
        /// <returns></returns>
        public RelativeLayout TestRelativeLayout()
        {
            var test1 = new Label
            {
                Text = "1"
            };
            var test2 = new Label
            {
                Text = "2"
            };
            var test3 = new Label
            {
                Text = "3"
            };

            var testRelativeLayout = new RelativeLayout
            {
            };
            testRelativeLayout.Children.Add(test1,
                Constraint.Constant(0),
                Constraint.RelativeToParent((parent) =>
                {
                    return parent.Height / 2;
                }));

            testRelativeLayout.Children.Add(test2,
                Constraint.Constant(0),
                //相对于test1的位置
                Constraint.RelativeToView(test1, (parent, sibling) =>
                {
                    return sibling.Y - sibling.Height / 2;
                }));
            testRelativeLayout.Children.Add(test3,
                Constraint.RelativeToView(test1, (parent, sibling) =>
                {
                    return sibling.X + sibling.Width;
                }),
                Constraint.RelativeToView(test1, (parent, sibling) =>
                {
                    return sibling.Y - sibling.Height;
                }));

            return testRelativeLayout;
        }

Grid
表格面板

        /// <summary>
        /// Grid布局
        /// </summary>
        /// <returns></returns>
        public Grid TestGrid()
        {
            var testGrid = new Grid
            {
                //行，三行
                RowDefinitions = 
                {
                    //每行的高度
                    new RowDefinition{Height = GridLength.Auto},
                    new RowDefinition {Height = new GridLength(10,GridUnitType.Star)},
                    new RowDefinition {Height = new GridLength(100,GridUnitType.Absolute)},
                },
                //列，两列
                ColumnDefinitions = 
                {
                    //每列的跨度
                    new ColumnDefinition{},
                    new ColumnDefinition{Width = new GridLength(10,GridUnitType.Star)},
                }
            };
            testGrid.Children.Add(new Label 
            {
                Text = "1"
            },
            //左右上下
            0,1,0,1
            );
            testGrid.Children.Add(new Label
            {
                Text = "2"
            },
            //左上
            0, 1
            );
            return testGrid;
        }

 

官方网址：http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/layouts/