目录 - Xamarin.Forms
前言
本文介绍Shell:
一、Shell简介
二、Shell构建
三、Shell之ShellItem
四、Shell之ShellSection
五、Shell之ShellContent
六、Shell之Flyout
七、Shell之Navigation
八、Shell之样式
环境
1.Visual Studio 2019
2.Xamarin.Froms 4.0.0.135214-pre4
3.Android 4.4(API 19)或更高版本
4.约定:XF代表Xamarin.Forms
内容
一、Shell简介
Shell:Shell是一个结构化的应用程序容器,提供一些基本的UI功能。
Shell预览:
二、Shell构建
实现效果
实现方式
第一步:新建空白项目,并在MainActivity.cs中添加启用Shell功能的标识。
第二步:添加AppShell内容页,设置其顶级容器为Shell,并添加一些基础内容。
第三步:将AppShell设为主页。
主要概念
概念 | 描述 |
---|---|
Shell | 应用的顶级容器。其子类均为ShellItem。 |
ShellItem | 浮出控件中的一个或多个项。其子类为ShellSection。 |
ShellSection | 分组内容,底部导航栏。其子类为ShellContent。 |
ShellContent | 页面内容。 |
Flyout | 浮出控件,可以从侧面滑出的菜单。 |
FlyoutHeader | 浮出控件的头部 |
MenuItem | 浮出控件的菜单项。 |
Route | 导航到此页面的URI。 |
下面对这些概念逐一介绍。
三、Shell之ShellItem
ShellItem表示浮出控件中的一个或多个项。
实现效果
实现方式
第一步:添加AboutPage页面。
第二步:在AppShell中再添加一个ShellItem,并与AboutPage关联。
四、Shell之ShellSection
ShellSection为分组内容,即底部导航栏。
实现效果
注:本例各个ShellSection的内容均为MainPage,所以页面内容没有变化,在下一小节中再添加页面。
实现方式
五、Shell之ShellContent
ShellContent为页面内容,如果同一ShellSection下有多个ShellContent,则会变为带有顶部标签的形式。
实现效果
实现方式
第一步:创建好友,群聊,设备,看点,动态的对应页面,由于页面内容简单且类似,故只展示好友页面代码。
第二步:在AppShell中添加ShellContent相关代码。
本例使用ContentTemplate的方式关联具体页面。
六、Shell之Flyout
Flyout为浮出控件,可以从侧面滑出的菜单。主要有两部分组成:头部(FlyoutHeader)和菜单项(MenuItem)。
实现效果
实现方式
1.浮出控件行为,可以使用Shell.FlyoutBehavior设置浮出控件行为,其行为有以下三种:
- Flyout(默认):可浮出,可隐藏;
- Disabled:隐藏,浮出控件不可浮出;
- Locked:锁定,浮出控件一直显示,不可隐藏;
七、Shell之Navigation
Shell的导航是基于URI的,主要通过路由(Route)的方式完成。
导航URI的格式如下: RouteScheme://RouteHost/Route/ShellItem/ShellSection/ShellContent/NavStack1/NavStack2...
实现效果
实现方式
第一步:设置路由。
第二步:开始导航。
八、Shell之样式
可以通过Shell 的一些相关属性统一设置Shell样式。
实现效果
实现方式
注:顶部状态栏的颜色需要修改Android的styles中的colorPrimaryDark的值。
后语
本篇是《第一部分:基础篇》的最后一篇。