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 繼續介紹囉!

謝謝各位的觀看唷^_<