Xamarin.Forms 第28局：Shell

目录 - 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的值。

后语

本篇是《第一部分：基础篇》的最后一篇。

---

目录 - Xamarin.Forms