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 再見唷!!!

搭拉阿咧~~~