Page主要分为ContentPage、MasterDetailPage、NavigationPage、TabbedPage和CarouselPage。
ContentPage
一个单独的页面,可以放一个或多个控件,属于page里面是最底层的元素。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
MasterDetailPage
一个收缩页,一个详细显示信息页,这个研究的不太多,只是做个一个例子,感觉还不错。
可以参考:https://github.com/xamarin/xamarin-forms-samples/blob/master/FormsGallery/FormsGallery/FormsGallery/MasterDetailPageDemoPage.cs。
NavigationPage
一个page的堆栈,用做主界面的,打开一个新的page,往堆栈中压一个page,退出一个page,则从堆
栈中将最上层的page,即显示的page抛出去。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 };
TabbedPage
一个Tab一个Page,不过我感觉这个不太好使,用了一段时间就放弃了,Tab的位置是固定的,不能设置。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 }
CarouselPage
多个滑动Page,这个还是可以的。属性与TabbedPage基本一致。
页面我都尝试过,不过最后还是主要放在了ContentPage和CarouselPage上。
官方网址:http://developer.xamarin.com/guides/cross-platform/xamarin-forms/controls/pages/