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

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

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

在本系列的 EP10 當中則是已經能讓使用者在 PeoplePage 點選聯絡人列表的 ListView 當中某筆聯絡人，透過 Shell 利用 URI 的 Navigation 模式，並傳遞所該筆聯絡人資訊轉跳進入到 PersonDetailPage 的頁面，並且呈現出該筆聯絡人詳細資料。

接下來本回 EP11 要來討論一個問題，當我們在 EP 10 從 PeoplePage 的聯絡人列表去點選某一個聯絡人時，可否能跳到所設計的 PersonDetailPage 並且把資訊帶過去時是 "檢視" 模式，然後有需要再進入 "編輯" 模式，完成資料上的變更處理後存回聯絡人列表，且不影響到原本 EP9 所設計的 "新增" 聯絡人的功能呢?

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

其實只要有了解到 EP9 跟 EP10 的轉跳到 PersonDetailPage 的做法，應該會發現到兩篇都是轉跳進入到 PersonDetailPage ，但很明顯的差異就是 EP9 "沒有" 資料的傳遞處理而 EP10 "有"。

如果能夠發現個差異要解決就不是太困難了。

首先，我們就來修改一下 PersonDetailPage 當中 Entry 的標記，幫這個頁面中的每個 Entry 都呈現成可觀看但不可編輯的效果。

修改 "姓名"、"電話" 兩個 Entry 的 IsEnabled 屬性。

修改 "Email"、"地址" 兩個 Entry 的 IsEnabled 屬性。

那雙平台進入到 PersonDetailPage 呈現的效果就會如此(雖然 iOS 看不太出來差別)。

可是在這邊或許會有人有疑問了，這不對阿，那這樣從 "PeoplePage" 的新增進來到 "PersonDetailPage" 的時候也不能編輯 Entry 的內容阿!

是的!

但如果我們繼續把這四個 Entry 的 IsEnabled 的屬性改成由 Binding 屬性來賦予呢? (為了版面截圖，將 Label 標記的 XAML 縮起)

然後再接著到 PersonDetailPageViewModel 當中多設計一個 IsEdit 的屬性來提供繫結。

所以那關鍵就會變成是我們如何操控 PersonDetailPageViewModel 當中所設計的那個 IsEdit 的屬性的資料，以便區分 "新增" 或 "檢視/編輯" 傳跳進入 PersonDetailPage 的時候 Entry 是否能編輯內容了。

其手法其實各位也已經在 EP10 的介紹中學到了...是的，我們就在透過傳跳進入 PersonDetailPage 的時候時要指定的 URI 所帶的參數資料，來區分出 "新增" 或 "檢視/編輯" 其 Entry 是否能編輯內容。

然後再透過 QueryProperty 的資料設定 IsEdit 的屬性值。

所以後面的修改大家應該也不意外了，是吧?

在 PeoplePageViewModel 執行 GoToAsync 的時候，將 URI 都設定接帶入 isEdit 的參數值，在 AddCommand 當中就帶入 "isEdit=true"，在 EditCommand 當中就帶入 "isEdit=false" 的設計。

好啦，所以以下來看一下雙平台的展示效果吧~~~

PeoplePage 點選 "新增" 準備轉跳進入 PersonDetailPage 的畫面:

PeoplePage 點選 "新增" 後進入到 PersonDetailPage 的畫面，在 PersonDetailPage 的 Entry 是 "可以" 編輯的:

PeoplePage 點選某筆 "聯絡人" 準備進入 PersonDetailPage 的畫面:

PeoplePage 點選某筆 "聯絡人" 後進入到 PersonDetailPage 的畫面，在 PersonDetailPage 的 Entry 是 "不能" 編輯的:

好啦收工...本 EP 11 就介紹到這邊囉~~~

等等，有人問 PeoplePage 點選某筆 "聯絡人" 後進入到 PersonDetailPage 右上角的按鈕是不是怪怪的，不應該是 "儲存" 而該是 "編輯" 才對阿?

是的!

目前還沒能正確顯示，我們會在 PersonDetailPage 的 ToolbarItem 當中來做一點變化，以便區隔出 "檢視/編輯" 的之間差異。

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

囉蝦各位，鳩咪^_<