Xamarin.Forms 第04局:页面

总目录


前言

本文介绍页面:
一、页面概述
二、ContentPage
三、MasterDetailPage
四、NavigationPage
五、TabbedPage
六、TemplatedPage
七、CarouselPage

环境

1.Visual Studio 2017
2.Xamarin.Froms 4.0.0.8055-pre1
3.Android 4.4(API 19)或更高版本
4.约定:XF代表Xamarin.Forms

内容

一、页面概述

1.页面(Page)是应用的界面,例如:之前的MainPage。

2.XF中主要有以下6种页面类型:
- ContentPage:内容页;
- MasterDetailPage:大纲-细节页;
- NavigationPage:导航页;
- TabbedPage:选项卡页;
- TemplatedPage:模板页;
- CarouselPage:旋转页;

3.上图是XF提供的页面类型模板。下面通过Xaml和C#两种使用方式介绍所有页面类型。

二、ContentPage

ContentPage:内容页面,最常用的页面。通过Content属性设置其显示内容。

实现效果
Xaml方式
C#方式

三、MasterDetailPage

1.MasterDetailPage有两个ContentPage组成:Master页面和Detail页面;
- Master页面:显示列表或菜单;
- Detail页面:显示Master页面菜单对应的详情页面;

2.直接使用XF自带的【大纲-细节页】模板自动生成相关页面及示例代码。

3.通过下面的代码和界面可以基本了解MasterDetailPage使用方式;

实现效果
Xaml方式
C#方式:MasterDetailPage通常使用Xaml创建方式。

四、NavigationPage

NavigationPage管理使用堆栈体系结构的页面之间的导航。

实现效果
Xaml方式:NavigationPage不可用于Xaml创建。
C#方式

注意:这里只有将ContentPage用NavigationPage包裹起来,才能使用Navigation属性进行导航。

五、TabbedPage

TabbedPage派生自MultiPage类,允许使用选项卡进行子页面之间的导航。

实现效果
Xaml方式
C#方式

六、TemplatedPage

TemplatedPage用于显示控件模板。TemplatedPage仅用作显示,重点在于控件模板,这里简单介绍一下,在后续模板篇中再做详述。

实现效果
Xaml方式
C#方式

七、CarouselPage

CarouselPage派生自MultiPage类,允许在子页面之间进行导航。与TabbedPage类似,不过没有选项卡。

实现效果

左右滑动会切换界面。

Xaml方式
C#方式

后语

本文介绍页面,下篇介绍布局,待续...


总目录

推荐阅读更多精彩内容

  • 性能改进 改进性能是此版本的一个重点所在。 除对提高内存和响应作出一些优化外,整个 JavaScript/Type...
    丷章鱼梦丷阅读 2,618评论 0 2
  • 我们非常荣幸地宣布 Visual Studio 2017 现已推出! 此次发布提供新的轻量模块式安装体验,可根据自...
    丷章鱼梦丷阅读 5,981评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,349评论 1 84
  • 纵使红尘变老, 也应回眸一笑。 壮志亦凌霄, 领悟诗词奥妙。 思考,思考。 忘记纷纷扰扰。
    蛮力阅读 223评论 -1 13
  • 花好月圆人团圆 四世同堂逐笑靥 琴棋书画样样通 吹拉弹唱信手拈 杯酒盈樽话桑田 老骥伏枥志未减 兄弟姊妹相言欢 姑...
    翯羽阅读 40评论 0 1