Xamarin.Forms<三>

Page主要分为ContentPage、MasterDetailPage、NavigationPage、TabbedPage和CarouselPage。
ContentPage
一个单独的页面，可以放一个或多个控件，属于page里面是最底层的元素。

 1     /// <summary>

 2     /// ContentPage

 3     /// </summary>

 4     public class TestContentPage : ContentPage

 5     {

 6         public TestContentPage()

 7         {

 8             //隐藏上方的工具栏

 9             NavigationPage.SetHasNavigationBar(this, false);

10             //该page绑定的Model类

11             this.BindingContext = new TestModel();

12             //该Page的显示内容

13             this.Content = TestStackLayout();

14             //该Page工具栏的Title显示

15             this.Title = "Test页";

16             //工具栏的工具

17             ToolbarItem textToolbarItem1 = new ToolbarItem("Test", "test.jpg", () =>

18             {

19                 DisplayAlert("工具", "you click this toolbar", "OK");

20             }, 0, 0);

21 

22             ToolbarItem textToolbarItem2 = new ToolbarItem("Test", "test.jpg", () =>

23             {

24             }, 0, 0);

25             //工具的点击事件绑定

26             textToolbarItem2.SetBinding(ToolbarItem.CommandProperty, "SubmitCommand");

27 

28             this.ToolbarItems.Add(textToolbarItem1);

29             this.ToolbarItems.Add(textToolbarItem2);

30             //背景图片

31             this.BackgroundImage = "test.jpg";

32             //背景颜色

33             this.BackgroundColor = Color.Blue;

34         }

35 

36         /// <summary>

37         /// stacklayout布局

38         /// </summary>

39         /// <returns></returns>

40         public StackLayout TestStackLayout()

41         {

42             var textName = new Label

43             {

44             };

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

46 

47             var textImage = new Image

48             {

49             };

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

51 

52             var testViewCellSL = new StackLayout

53             {

54                 Orientation = StackOrientation.Horizontal,

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

56                 Spacing = 10,

57                 Children =

58                 {

59                     textImage,

60                     textName,

61                 },

62             };

63             return testViewCellSL;

64         }

65     }

View Code

MasterDetailPage
一个收缩页，一个详细显示信息页，这个研究的不太多，只是做个一个例子，感觉还不错。

可以参考：https://github.com/xamarin/xamarin-forms-samples/blob/master/FormsGallery/FormsGallery/FormsGallery/MasterDetailPageDemoPage.cs。

NavigationPage
一个page的堆栈，用做主界面的，打开一个新的page，往堆栈中压一个page，退出一个page，则从堆
栈中将最上层的page，即显示的page抛出去。

 1 var pushBtn = new Button

 2             {

 3                 Text = "Push",

 4             };

 5             pushBtn.Clicked += (sender, e) =>

 6                 {

 7                     //压入一个页面

 8                     this.Navigation.PushAsync(new TestContentPage());

 9                 };

10 

11             var popBtn = new Button

12             {

13                 Text = "Pop",

14             };

15             popBtn.Clicked += (sender, e) =>

16             {

17                 //抛出当前页面

18                 this.Navigation.PopAsync();

19             };

View Code

TabbedPage
一个Tab一个Page，不过我感觉这个不太好使，用了一段时间就放弃了，Tab的位置是固定的，不能设置。

 1     /// <summary>

 2     /// TabbedPage

 3     /// </summary>

 4     public class TestTabbedPage : TabbedPage

 5     {

 6         public TestTabbedPage()

 7         {

 8              this.Children.Add(new TestContentPage(){Title = "First"});

 9              this.Children.Add(new TestContentPage(){Title = "Second"});

10              this.Children.Add(new TestContentPage() { Title = "Third" });

11 

12              //刚进入显示的tab页

13              this.SelectedItem = Children.Where(x=>x.Title == "Second").FirstOrDefault();

14         }

15     }

View Code

CarouselPage
多个滑动Page，这个还是可以的。属性与TabbedPage基本一致。

页面我都尝试过，不过最后还是主要放在了ContentPage和CarouselPage上。

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