首页 > 代码库 > Xamarin.Forms<三>

Xamarin.Forms<三>

2024-08-08 22:29:01   261人阅读

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 Label43             {44             };45             textName.SetBinding(Label.TextProperty, "TestName");46 47             var textImage = new Image48             {49             };50             textImage.SetBinding(Image.SourceProperty, "ImageSource");51 52             var testViewCellSL = new StackLayout53             {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 Button12             {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/

Xamarin.Forms<三>


联系
我们