目录 - 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的值。
后语
本篇是《第一部分：基础篇》的最后一篇。
网友评论