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

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

在上一篇 EP9 當中已經能讓 PeoplePage 點選右上角的 "新增" 按鈕後，透過 Shell 利用 URI 的 Navigation 模式轉跳到 PersonDetailPage 的頁面，並且新增一筆聯絡人資料到聯絡人列表當中。

接下來本篇 EP10 要來討論一個問題，當我們從 PeoplePage 的聯絡人列表去點選某一個聯絡人時，可否能跳到原本設計的 PersonDetailPage 並且把資訊帶過去檢視，並再進一步做到編輯呢?

就來看怎麼處理吧，Go~~~

如果是要從 PeoplePage 的聯絡人列表點選某一個聯絡人時引發 UI 有反應動作，當然要針對 ListView 這個控制項的標記本身設計來作一些調整。

在這邊選擇增加 ListView 的 ItemTapped 事件，並且在透過該 ItemTapped 事件去執行 PeoplePageViewModel 所設計的 EditCommand (在 EP7 的時候就預留設計的)。

就打開 PeoplePage.xaml 找到 ListView 的標記增加 ItemTapped 的事件處理常式。

透過 Visual Studio 的提示很快就能完成此事件處理常識的建立。

再來打開 PeoplePage.xaml.cs 並找到剛剛增加的事件處理常式的 C# 程式碼。

撰寫執行 PeoplePageViewModel 所設計的 EditCommand 的程式碼，而 ListView 的 ItemTapped 事件的 e 參數，透過 e.Item 可以取得使用者透過 UI 點選的項目內容所對應的物件資料，也就是 Person。

接下來就打開 PeoplePageViewModel 來編輯一下 EditCommand。

由於前面確定 ItemTapped 的事件處理常式會丟一個 Person 的物件資料進到 EditCommand 來執行，所以我們將 Command 的泛型改成 Person 的類別，並且將引數名稱設計改叫做 person。

如果沒什麼規劃上的特殊需求，這邊也是要轉跳到 PersonDetailPage 這個頁面，所以撰寫上跟 AddCommand 的動作差不多，透過 Shell 的 URI 設計方式進行 Navigation 到 PersonDetailPage。

喔，對了...GoToAsync 是非同步呼叫的方法，所以別忘記加上 "await/async" 的使用。

目前的雙平台(iOS、Android)執行結果上其實跟點選 ToolbarItem 的 "新增" 效果是一樣的，就切換到 PersonDetailPage 正確無誤。

但怎哪裡怪怪的?

是的，點選的該筆聯絡人資料並沒有被帶入到 PersonDetailPage 中顯示，雖然我們在 ListView 的 ItemTapped 的事件處理常式當中的程式碼撰寫，有將聯絡人的資訊帶給 EditCommand 沒錯，但是當我們在透過 Shell 的 URI 進行 Navigation 轉跳到 PersonDetailPage 的時候，我們並沒有將該資料帶入 URI 的參數當中來傳遞，所以我們並沒有辦法在 PersonDetailPage 順利的將該筆聯絡人顯示出來。

在這邊我們還要透過一些調整，才能正確地帶入資料到 PersonDetailPage。

首先回到 Models 當中的 Person 類別設計，這邊我們再多增加一個 Id 的屬性。

第二個調整的部分是在 MockData 的部分增加 Id 的資料值。

第三個調整的部分是 EditCommand 的 URI 加入傳遞資料的參數格式。

第四個調整的其中第1部分是 PersonDetailPageViewModel 的 class 設計要掛上 QueryProperty 的 Attritube 以便接收參數資料。

第四個調整的其中第2部分是 PersonDetailPageViewModel 的 class 中多設計一個屬性 PersonId (也就是前一個步驟 QueryProperty 的 Attritube 設計 "nameof()" 小括號中要給予的屬性名稱)。

另外，這邊在透過 Linq 找出 MockData 所設計的 People 當中 Person 的 Id 跟傳遞的 PersonId 一致的 Person 資料，並且將該 Person 資料設定給 EditPerson。

所以最後我們來執行看看，如果想看 personId 傳遞過程可以透過 "F5" 的偵錯模式，透過中斷點設定來確認 personId 的設定過程。

而雙平台(iOS 在 ListView 當中點選第四筆資料、Android 在 ListView 當中點選第五筆資料)的執行結果如下效果:

PersonDetailPage 正確的顯示點選的 Person 資訊。

等等...雖然本篇 EP10 介紹到這邊~~~

點選聯絡人的 ListView 選許某筆聯絡人轉跳 PersonDetailPage 後能夠正確的在當中顯示 Person 資料了，但到目前似乎還沒有辦法區分出 "新增" 跟 "檢視/編輯" 的差異呢...?

是的!

目前還沒能明顯的區分，我們會在 PersonDetailPage 的 ToolbarItem 當中來做一點變化，以便區隔出 "新增" 跟 "檢視/編輯" 的差異。

這就留待下一篇 EP 來介紹囉~~~

囉辣各位，鳩咪^_<