Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP8。

由於在上一篇 EP7 當中有提到，PeoplePage 給 ListView 呈現的假資料，可以規劃設計到一個專屬的 MockData 類別當中去，以免擾亂我們 ViewModel 程式中的邏輯理解，又或者是之後要抽換成透過一些永久儲存的方式來處理時，調整上也會比較方便，

這是在上一篇 EP7 介紹 PeoplePageViewModel 中透過建構子直接產生的假資料寫法:

在這邊我們就先將它獨立出來為一個方法，並且讓這方法直接回傳一個 ObservableCollection<Person> 的集合給 People:

那接下來就開始實作 MockData 類別來處理這個假資料的產生囉!

GoGo~~~

在 Xamarin.Forms 專案當中新增一個資料夾叫做 Utilities。

並在 Utilities 資料夾當中繼續新增一個類別。

把這個類別命名為 MockData 後新增。

確認在 Utilities 資料夾中新增完成。

在這個 MockData 類別當中調整存取權為 public (範本的預設值是 private)。

接著再把前面在 PeoplePageViewModel 調整成方法產生 ObservableCollection<Person> 的集合，改放到這個 MockData 類別當中。

放到 MockData 類別當中後，再幫這個方法的簽章中加入 static 的關鍵字。

完成之後，我們再回到 PeoplePageViewModel 的建構方法修正一下。

原本前面在建構式中修正成透過方法設定給 People 屬性的寫法進行調整。

改換成使用 Utilities 命名空間底下的 MockData 的 GetPeople 方法的呼叫。

再繼續進一步調整變更為一個公開欄位的 People 設計。

改換成使用 Utilities 命名空間底下的 MockData 的 People 欄位取得資料。

到這邊就先暫時重構成讓假資料來自於 MockData 的處理完畢!

BTW, 如果要寫得更有 MockData 的韻味，可以參考一下 Dependency Injection (DI) 的設計運用:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/dependency-injection

這裡就不再深入討論了(這不是本系列文要探討的主題咩༼ つ ◕_◕ ༽つ)。

接下來我們在 EP6 的時候已經針對 PeoplePage 設計了 ToolbarItem 來預設做為 "新增" 聯絡人的功能運用，並且已經將其 Command 繫結到 PeoplePageViewModel 的 AddCommand。

接下來先到 PeoplePageViewModel 的 AddCommand 來小試身手一下:

透過 Shell 來測試 DisplayAlert。

雙平台(iOS、Android)測試 Alert 的結果呈現。

而在這邊的 AddCommand 本身應該是會轉跳到另外一個頁面，來供使用者在 App 當中去填寫聯絡人的資料後儲存。所以我們在這邊就會使用到 Shell 的 Navigation 運作 GoToAsync 方法的呼叫:

而 Shell 的 Navigation 運作，在這邊不多談，有需要進一步了解的朋友可以參考連結文件:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

而 GoToAsync 的方法是非同步呼叫的，所以我們再加上 async/await 的關鍵字處理。

接著在指定要轉跳的 URI 與頁面。

新增一個新的 PersonDetailPage 的頁面。

因為 AppShell 的 XAML 的標記中皆沒有規劃到此頁面的轉跳，所以 AppShell 並不認識此頁面的路由路徑，會無法正確地轉跳成功喔。

我們就再到 AppShell 中來編輯。

動態註冊這個新增該 PersonDetailPage 頁面的路由路徑。

好的，都撰寫完成後我們就將專案重新建置 "Ctrl + F5"(執行但不偵錯) 到雙平台(iOS、Android)上跑看看，確認到目前為止所變更的效果如何。

點選右上角的 "新增" 按鈕，都能正確轉跳到 PersonDetailPage 的頁面。

OK，本篇 EP8 就到這邊結束吧~~~

甘蝦各位，鳩咪^_<