EP 3: Use Shell to layout TopStore App

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP3。

由於因为当初这个 TopStore 的 App，在呈现页面的部份设计的比较单纯一点，整体的画面上只有设计几个分页的画面，而且是透过下方页签的呈现效果来完成。

整体的 App 基本上都会是在 "联络人"、"品项"、"订单" 跟 "设定" 这四个页签的处理来完成相关操作。

在 EP2 介绍的时候已经先加入了这个 PeoplePage 来准备设计为联络人的部分，接着为了要做出下方页签的效果呈现的话，那就可以直接在我们的 Xamarin.Forms 专案当中，直接新增一个 "空白 Shell" 范本的套用，并且透过 Shell 设计出下方页签的使用唷!

那我们就开始吧 GO~~~

首先，这个 Shell 的档案，在 Visual Studio 在预设的 "新增项目" 当中的 Template 里面不会有，所以各位可以到此 GitHub 的 Repository 当中取得，并且透过该 Repository 上所写 README.md 的详细说明，了解到这个 "空白 Shell 范本" 的使用方式。

在直接把它加入到你自己的 Visual Studio 的使用之後，就会在 "新增项目" 出现这个 "Shell 档案" 的选项。

出现的时候它预设名称叫 "AppShell1"，这个 "1" 就把它删掉，毕竟在这专案里我们只需要一个 AppShell 来使用就很够用了，所以在 "新增项目" 这边最後就按新增。

接着在这个 Xamarin.Forms 的专案这边就增加了一个 AppShell.xaml 的档案。

在这里稍微 Shell 是在 Xamarin.Forms 约莫在 4.0 之後，所出现的新的 Navigation 设计，也是搭配目前主流 App 设计版型的作法，比较容易让大家快速的去建立一个，像是有飞出视窗或是索引页签的这些画面的呈现效果。

当我们在这里完成的时候，理论上这边是用不到这个 namespace 所以习惯上我可能就会先把它删掉。

接着我们把之前 EP2 新增的 PeoplePage 给加进来，在这边写上 PeoplePage 这个标记的时候，由於目前尚未在 AppShell.xaml 的 XAML 撰写中引用 Pages 的命名空间，所以无法正确识别 PeoplePage 的标记名称(还记得我们在 EP2 的时候有介绍 PeoplePage 所处的命名空间吧?)

所以这个时候就要让这个 PeoplePage 的标记，在 AppShell 这一个 XAML 的页面里面可以识别它，那可以利用 Visual Studio 的这个小灯泡，加上这个 XAML 对於 namespace 的引用，使用上在 xaml 当中它会有一个别名，而在 PeoplePage 标记的前面就会需要使用该别名，来确认是要使用哪个 namespace 底下的设计。

完成之後，我就接着在继续这个 PeoplePage 的标记里面去设定 Title 属性的值为 "联络人"。

那在 AppShell 这边就有这样子最最最基本的一个页面设定，再来就换到 App.xaml.cs 的这里，在先前的 EP2 中我们把它调整成 Pages.PeoplePage();

在这里就把它调成本篇所新建立的这个 AppShell 来设定给 Xamarin.Forms 专案所设计的 App (继承自 Application) MainPage 属性，来做一个主要的呈现页面。

所以在这个时候我们可以试试看，直接 "Ctrl + F5"(执行但不侦错) 直接执行，这个时候的直接执行到 Android 平台上面的时候。

再来的话 iOS 也一样，我们来切换到 iOS 的部份去执行。

各位会看到现在呈现的效果就不太一样，这是一个很典型的 Shell 呈现的作法，预设的使用会有一个飞出视窗 (Flyout) 的部分。

接着，因为可能飞出视窗不是原本 TopStore App 所要呈现的一个设计，为了致敬 "复刻"，所以在使用 Shell 的时候，我们就不要用飞出视窗，改换成 TabBar 的使用。

所以回到 AppShell.xaml 的部分，就在 PeoplePage 的标记外部在加上 TabBar 的标记，把这个标记 PeoplePage 的标记在 TabBar 标记当中。

那这次也一样，再直接马上的执行这个 iOS 的一个呈现效果。

再来的话呢，我们就切到 Android 也执行一下给各位确认呈现的效果。

那各位会看到它一个呈现效果会变得不太一样了，就会在这个页面的下方处出现一个相关的页签(现在因为没有其他的页签，画面会看不太出来)，然後在 App 的左边的飞出视窗 (Flyout) 的选单按钮就不见了。

而因为现在只有一个页面，没有其他的页签可以用，我们就再调整一下，设计其他的页签进来。

我们把原本的这个的 MainPage 这个页面重新命名，改成 "物品项" 的资讯那就叫作 GoodsPage。

重新命名的时候稍微注意一下，因为在这里这个重新命名的部分虽然 xaml.cs 会跟着调，但是呢在 xaml.cs 里面的类别名称并不会跟着调，所以我们要进来在这里顺便再调一下，然後还有它的 Constructor 的设计。

另外还有 XAML 的部分，它也一样叫作 GoodsPage 的使用。

後面我们就在增加另外两个 "内容页面"，第三个为 "OrdersPage" 的名称，第四个为 "SettingsPage" 的名称。

所以我们现在总共目前会有在画面上有四个页面可以用，就直接在 AppShell 的这个 XAML 这边再做一些编辑。这个编辑其实就不难，针对这个标记的处理上就增加四个，那这四个就看我们想要呈现的顺序了。

第一个是 People 第二个是 Goods 第三个是我们的 Orders 第四个是 Settings，并且直接把 Title 的值先直接打上去，第二个设定为 "物品项"，第三个就设定为 "订单"，第四个就设定为 "设定"。

这样子的一个呈现结果上，我们就会看到 Android、iOS 的平台在呈现部分，这次它就会有四个页签在下面。

"联络人"、"订单" 跟 "设定" 的页面我们都还没有做任何新的页面编辑，所以页面都长得差不多一样(除了 GoodsPage 是由 MainPage 改来的)，不过注意一下每个页签上面与页面的标题，目前也都有文字的设定值，这个就是前面设定 Title 所达成的一个效果。

当然目前因为索引页签没有设定 Icon 的图示，所以目前画面看起来比较怪一些，这个我们就在下一篇的 EP4 继续介绍罗!

谢谢各位的观看唷^_<