EP 28: Shell Routing for TopStore App

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

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

在 EP3、EP4 的时候介绍利用 Shell 的 Tabbar 功能来完成此 TopStore App 复刻的 UI 布局规划。

虽然当时 UI 介面做出来了，而且一直使用至今也没啥太大问题，但为了整个 App 在转跳的 Route (路由)上有其一致性，让未来若有 UI 介面有扩增需求时，可以透过一致性的 Route (路由)作转跳处理!

本篇 EP28 就来介绍一下 App 当中要规划的 Route (路由)处理罗!

首先，先做个实验验证一下 Shell 的 Route (路由)状态。

打开 App.xamal.cs 并在 OnStart 方法当中加入如下程序。

接着选择双平台任一个平台，执行侦错看看 Visual Studio 的 "输出" 窗格。

在 App 当中切换不同页面时会显示此时 Shell 纪录的 Route (路由)状态。

由此可知 Shell 的 Route (路由)状态，若未指定时会随机产生其 Route (路由)，并启动转跳到该页面。

所以实务上，如果采用 Shell 来规划 App 的 UI 画面与布局，应该要设定其 Route (路由)规划，以防日後要透过 "程序" 的方式指定转跳页面时会发生问题。

那就来打开 AppShell.xaml 来修正一下当初设计的 Tabbar 当中的 ShellContent 且设定其 Route (路由)吧!

设定 Route (路由)前。

设定 Route (路由)後。

再同样的选择双平台任一平台，执行侦错看看 Visual Studio 的 "输出" 窗格。

在各页面间切换时就会看到其 Route (路由)是固定的了。

最後别忘记 PersonDetailPage 当初是在 AppShell 的建构式当中，动态(程序)注册路由的页面，以及当初 PeoplePageViewModel 的转跳进入 PersonDetailPage 的路由程序修正。

打开 AppShell.xmal 找到当初的 Route (路由)注册，修正到 People 底下。

打开 PeoplePageViewModel.cs 找到设计 AddCommand 跟 EditCommand 撰写转跳进入 PersonDetailPage 部分，进行路由修正。

目前 TopStore App 的 Route (路由)与其对应设计的页面状态会是如下结构:

TopStore App
            |- People (由 PeoplePage 来显示)
            |         |- PersonDetail (由 PersonDetailPage 来显示)
            |- Goods (由 GoodsPage 来显示)
            |- Orders (由 OrdersPage 来显示)
            |- Settings (由 SettingsPage 来显示)

以上完成 EP28 的介绍罗~~~

下篇 EP29 再见唷!!!

搭拉阿咧~~~