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/