【Xamarin.Forms 3】页面类型

系列目录

博客园

1、【Xamarin.Forms 1】App的创建与运行

2、【Xamarin.Forms 2】App基础知识与App启动

项目地址

1、GitHub:https://github.com/mzy666888/HelloXamarinFormsApp

2、Gitee:https://gitee.com/sesametechgroup/HelloXamarinFormsApp

引言

本篇文章将介绍Xamarin.FormsApp 各种页面类型。

开发环境

  1. Visual Studio 2019 16.6.2
  2. Xamarin.Forms 4.6.0.726
  3. Android 5.0 (API 级别21 - Lollipop)以上

正文

下面描述的所有页面类型都派生自Xamarin.Forms Page类。这些视觉对象占据全部或者大部分屏幕。Page对象表示ViewControlleriOSPage通用Windows平台中。在Android上,每个页面都占据屏幕Activity,但Xamarin.Forms页面并不是Activity对象。

【Xamarin.Forms 3】页面类型_第1张图片

Xamarin.Forms在开发中,使用到的各种页面类型主要包括:ContentPageMasterDetailPageNavigationPageTabbedPageCarouselPageTemplatedPage。这些页面在不同的使用场景中有不同的需求。

一、ContentPage页面

ContentPage是最简单且最常见的页面类型。将Content属性设置为一个View对象,该对象最常设置为Layout系列类型,如StackLayoutGrid或者ScrollView
【Xamarin.Forms 3】页面类型_第2张图片

二、MasterDetailPage页面

MasterDetailPage是管理两个信息窗体的页面类型。将Master属性设置为通常显示列表或菜单的页面。将Detail属性设置为显示母版页中选定项的页面。IsPresented属性控制主页面或详细信息页面是否可见。
【Xamarin.Forms 3】页面类型_第3张图片

我们在项目中添加一个MasterDetailPage页面,自动会添加三个页面:MasterDetailPage1.xamlMasterDetailPage1Detail.xaml``MasterDetailPage1Master.xaml和一个类:MasterDetailPage1MasterMenuItem.cs
其中MasterDetailPage1Detail.xaml(显示内容页面),MasterDetailPage1Master.xaml(显示菜单页面)为ContentPage类型的页面。
【Xamarin.Forms 3】页面类型_第4张图片

在真机上运行效果如下图(此图为两张图的合并后的图像,注意根据顶部内容进行区分)

【Xamarin.Forms 3】页面类型_第5张图片

三、NavigationPage页面

NavigationPage使用
NavigationPage使用基于堆栈的体系结构管理其他页面中的导航。在应用程序中使用页面导航时,主页的实例应传递给对象的构造函数NavigationPage
【Xamarin.Forms 3】页面类型_第6张图片

四、TabbedPage页面

TabbedPage派生自抽象MultiPage类,允许使用选项卡在子页面间导航。将Children属性设置为页的集合,或将属性设置ItemsSource为数据对象的集合,并将属性设置为ItemTemplate DataTemplate描述如何以可视方式标识每个对象的属性。
【Xamarin.Forms 3】页面类型_第7张图片

我们在项目中添加一个TabbedPage页面,系统默认生成的布局代码如下:
【Xamarin.Forms 3】页面类型_第8张图片

在真机上运行效果如下图:
【Xamarin.Forms 3】页面类型_第9张图片

五、CarouselPage页面

CarouselPage同样派生自抽象MultiPage类,允许通过手指轻扫在子页面之间导航。将Children属性设置为对象的集合ContentPage,或将属性设置ItemsSource为数据对象的集合,并将ItemTemplate属性设置为DataTemplate描述如何以直观方式表示每个对象的属性。
【Xamarin.Forms 3】页面类型_第10张图片

六、TemplatedPage页面

TemplatedPage使用控件模板显示全屏内容,时基于类ContentPage
【Xamarin.Forms 3】页面类型_第11张图片

可在添加->新建项中,选择Xamarin.Forms选择中看到部分可以添加的页面,对于没有出现的页面类型,可以添加一个ContentPage后进行修改成想要使用的类型。
【Xamarin.Forms 3】页面类型_第12张图片

加群讨论

【Xamarin.Forms 3】页面类型_第13张图片

参考文章:

你可能感兴趣的:(【Xamarin.Forms 3】页面类型)