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

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

不過在 EP5 該篇中，曾經有透過 Visual Studio 的快速修正功能自動產生 Person 類別後，運用在設計 People 這個屬性時所使用的 ObservableCollection 泛型設計當中，在此提醒一下原始長出來的 Person 類別會是透過 internal 修飾詞來設計該類別，各位可以根據專案的需求來修正與設計相關類別的修飾詞的存取權。

在該 EP5 篇中的介紹是配合既有的 code snippet 的設計，直接將該 Person 類別的修飾詞從 internal 改成 public 後繼續後面的撰寫，若真的有專案上的存取權設計考量也可將 People 屬性設計其修飾詞為 internal，這樣就不需要異動 Person 類別在透過 Visual Studio 產生時所預設的修飾詞 internal 喔。

而在 PeoplePageViewModel 的設計中，我們繼續來增加兩個 Command 第一個是 "新增" 聯絡人，而第二個則是 "編輯" 聯絡人的處理，並且變更其 PeoplePage 的 XAML 撰寫其 Binding (繫結)到 PeoplePageViewModel 的部分。

來來來，開始囉~~~

增加第一個 "AddCommand"，準備用來處理 "新增" 一筆聯絡人資料的功能。

其處理得作法上，也繼續利用到 EP5 提到的 code snippet 當中所設計的 "xfcmd" (各位把它叫做甚麼名字可以自己定義。)

快速 Tab 兩下

透過 Visual Studio 的修正加入 ICommand 所在 namespace 的 using 引用。

透過 Visual Studio 的修正加入 Command 所在 namespace 的 using 引用。

完成之後記得改一下 Command 的名字為 AddCommand。

可能大致上它的設計是直接跳到另外一個的頁面，不需要帶任何的參數，所以在這邊我們就會用到這個 "xfcmd" 的 code snippet。

而第二個 "EditCommand"，準備用來處理 "編輯" 一筆聯絡人資料的功能。

其處理得作法上，也繼續利用到 EP5 提到的 code snippet 當中所設計的 "xftcmd" (各位把它叫做甚麼名字可以自己定義。)

那 Edit 的 Command 在這個頁面的設計上可能就會傳遞 People 集合裡面，使用者所選到的某個 Person 的去進行 "編輯"，所以在這邊選用了這個有參數設計的 Command。

完成之後記得改一下 Command 的名字為 "EditCommand"。

所以可能大致上會有某種 Person 的資訊會被傳遞，你會看到這次這個透過 xftcmd" 產生的 Command 是有設計泛型 string 這個參數的一個帶入，到時候可能是帶入 People 的裡面選到的 Person 其中所設定的 Id 值。

那所以這樣子的一個結果完成的時候，在這個 PeoplePageViewModel 裡面先設計了一個 People 屬性與兩個 Command (Add & Edit)。

接著再往下我們回到 PeoplePage.xaml 來變更一下 XAML 的設計。

首先是針對 PeoplePage 中 BindingContext 繫結的部分，加上 PeoplePageViewModel 的標記。

這個 BindingContext 一樣 Visual Studio 會提醒這個 PeoplePageViewModel 找不到。這道理很簡單，就是我們設計 Page 與 ViewModel 所在的 namespace 不同，所以就要在 XAML 裡面去引用這個 namespace，讓這個 XAML 可以去認識這個標記。

最後修正完成會是呈現成這個樣子。

在這個 TopStore 的 App 的 PeoplePage 裡面我們要去新增新的一筆 Person 資料，那我們就在頁面的 Navigation 列中新增一個 Add 選項，在設計上稱為 ContentPage.ToolbarItems 當中的 ToolbarItem。

那我們這邊就設計一個叫 ToolbarItem 的標記，並且將它的 Text 屬性設定為 "新增" 的文字，Command 屬性設定為使用 Binding (繫結)到前面 PeoplePageViewModel 所設計好的 AddCommand。

在這邊就結束這個 ToolbarItem 的標記設計，那結束之後就是下面的這個 ContentPage 的 Content 我們要不要做一個 Layout 上的修改，在這裡把 StackLayout 留著，原本的 Label 刪掉，改放 ListView 的標記，並且將它的 ItemSource 直接去設定 Binding 到 PeoplePageViewModel 的 People 這個 Property 上。

當 PeoplePage 的 XAML 相關繫結設定處理完成的時候，其他的一些設定大致上都是在做一些 ListView 本身的細微的調整，比如說像這個 HasUnevenRows 這個屬性會設定成 "True"，而 CachingStrategy 屬性會設定成 "RecycleElement"，基本上就至少對 ListView 做這些屬性設定的變更。

理論上在這個時候各別去 "Ctrl + F5" (執行但不偵錯)到 iOS 跟 Android 平台來確認一下畫面呈現的效果，那大概就是這樣子就可以做到這個結果。

好的，調整完這些就將 Xamarin.Forms 的專案重新建置 (Ctrl + B)，確認到目前為止所變更的程式碼在編譯上都沒問題後告個段落，後面就到下一篇 EP7 再繼續介紹囉!

謝謝各位，我們下篇見^_<