Xamarin.Forms<二>

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

 1 /// <summary>

 2         /// stacklayout布局

 3         /// </summary>

 4         /// <returns></returns>

 5         public StackLayout TestViewCellSL()

 6         {

 7             var textName = new Label

 8             {

 9             };

10             textName.SetBinding(Label.TextProperty, "TestName");

11 

12             var textImage = new Image

13             {

14             };

15             textImage.SetBinding(Image.SourceProperty, "ImageSource");

16 

17             var testViewCellSL = new StackLayout

18             {

19                 //排序方向，水平

20                 Orientation = StackOrientation.Horizontal,

21                 //边缘边距，左上右下

22                 Padding = new Thickness(5,10,20,30),

23                 //stacklayout内控件之间的间距

24                 Spacing = 10,

25                 //包含控件

26                 Children =

27                 {

28                     textImage,

29                     textName,

30                 },

31             };

32             return testViewCellSL;

33         }

View Code

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

 1  /// <summary>

 2         /// ScrollView布局

 3         /// </summary>

 4         /// <returns></returns>

 5         public ScrollView TestScrollView()

 6         {

 7             var testScrollView = new ScrollView

 8             {

 9                 //滑动方向，垂直

10                 Orientation = ScrollOrientation.Vertical,

11                 //包含内容，只能是一个，可以是一个控件，可以是一个面板

12                 Content = TestGrid(),

13             };

14             return testScrollView;

15         }

View Code

AbsoluteLayout
绝对位置面板

 1         Label text1;

 2         Label text2;

 3 

 4         bool isCurrentPage;

 5 

 6         /// <summary>

 7         /// 绝对位置

 8         /// </summary>

 9         /// <returns></returns>

10         public AbsoluteLayout TestAbsoluteLayout()

11         {

12             //在要求绝对位置定位子元素。用户指定锚和边界限定了控制的位置和大小。

13             text1 = new Label

14             {

15                 Text = "1"

16             };

17             

18             var label3 = new Label

19             {

20                 Text = "3"

21             };

22             var testAbsoluteLayout = new AbsoluteLayout

23             {

24             };

25             testAbsoluteLayout.Children.Add(text1);

26             //绝对布局标志

27             AbsoluteLayout.SetLayoutFlags(text1, AbsoluteLayoutFlags.PositionProportional);

28             AbsoluteLayout.SetLayoutBounds(text1, new Rectangle());

29 

30             text2 = new Label

31             {

32                 Text = "AbsoluteLayout",

33                 TextColor = Color.Black

34             };

35             testAbsoluteLayout.Children.Add(text2);

36             AbsoluteLayout.SetLayoutFlags(text2,

37                 AbsoluteLayoutFlags.PositionProportional);

38 

39             return testAbsoluteLayout;

40         }

41 

42 

43         protected override void OnAppearing()

44         {

45             base.OnAppearing();

46             isCurrentPage = true;

47             DateTime beginTime = DateTime.Now;

48 

49             Device.StartTimer(TimeSpan.FromSeconds(1.0 / 30), () =>

50             {

51                 double seconds = (DateTime.Now - beginTime).TotalSeconds;

52                 double offset = 1 - Math.Abs((seconds % 2) - 1);

53 

54                 AbsoluteLayout.SetLayoutBounds(text1,

55                     new Rectangle(offset, offset,

56                         AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

57 

58                 AbsoluteLayout.SetLayoutBounds(text2,

59                     new Rectangle(1 - offset, offset,

60                         AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));

61 

62                 return isCurrentPage;

63             });

64         }

65 

66         protected override void OnDisappearing()

67         {

68             base.OnDisappearing();

69             isCurrentPage = false;

70         }

View Code

RelativeLayout
相对位置面板

 1 /// <summary>

 2         /// 相对位置布局

 3         /// </summary>

 4         /// <returns></returns>

 5         public RelativeLayout TestRelativeLayout()

 6         {

 7             var test1 = new Label

 8             {

 9                 Text = "1"

10             };

11             var test2 = new Label

12             {

13                 Text = "2"

14             };

15             var test3 = new Label

16             {

17                 Text = "3"

18             };

19 

20             var testRelativeLayout = new RelativeLayout

21             {

22             };

23             testRelativeLayout.Children.Add(test1,

24                 Constraint.Constant(0),

25                 Constraint.RelativeToParent((parent) =>

26                 {

27                     return parent.Height / 2;

28                 }));

29 

30             testRelativeLayout.Children.Add(test2,

31                 Constraint.Constant(0),

32                 //相对于test1的位置

33                 Constraint.RelativeToView(test1, (parent, sibling) =>

34                 {

35                     return sibling.Y - sibling.Height / 2;

36                 }));

37             testRelativeLayout.Children.Add(test3,

38                 Constraint.RelativeToView(test1, (parent, sibling) =>

39                 {

40                     return sibling.X + sibling.Width;

41                 }),

42                 Constraint.RelativeToView(test1, (parent, sibling) =>

43                 {

44                     return sibling.Y - sibling.Height;

45                 }));

46 

47             return testRelativeLayout;

48         }

View Code

Grid
表格面板

 1         /// <summary>

 2         /// Grid布局

 3         /// </summary>

 4         /// <returns></returns>

 5         public Grid TestGrid()

 6         {

 7             var testGrid = new Grid

 8             {

 9                 //行，三行

10                 RowDefinitions = 

11                 {

12                     //每行的高度

13                     new RowDefinition{Height = GridLength.Auto},

14                     new RowDefinition {Height = new GridLength(10,GridUnitType.Star)},

15                     new RowDefinition {Height = new GridLength(100,GridUnitType.Absolute)},

16                 },

17                 //列，两列

18                 ColumnDefinitions = 

19                 {

20                     //每列的跨度

21                     new ColumnDefinition{},

22                     new ColumnDefinition{Width = new GridLength(10,GridUnitType.Star)},

23                 }

24             };

25             testGrid.Children.Add(new Label 

26             {

27                 Text = "1"

28             },

29             //左右上下

30             0,1,0,1

31             );

32             testGrid.Children.Add(new Label

33             {

34                 Text = "2"

35             },

36             //左上

37             0, 1

38             );

39             return testGrid;

40         }

View Code

 

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