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

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

在上一篇 EP8 當中已經能讓 PeoplePage 點選右上角的 "新增" 按鈕後，透過 Shell 利用 URI 的 Navigation 模式轉跳到 PersonDetailPage 的頁面。

所以接下本篇 EP9 來我們就來開始來準備調整 PersonDetailPage 的版面，讓它能夠 "觀看/編輯或新增" 一筆聯絡人的資料囉!

GoGoGo~~~

來打開在上回新增的 PersonDetailPage 的 XAML 來準備編輯。

同時打開 Person 類別來準備對照編輯。

如果是使用寬螢幕開發的朋友，可以利用 Visual Studio 的垂直索引頁籤的功能來對照開發，會比較便捷。

好，來設計畫面的第一組 Label 與 Entry。

來~三步驟，握...折...搭啦~~~

Good~~~

雙平台的畫面呈現效果就如下:

好，來設計畫面的第二組 Label 與 Entry (注意此 Label 的 Keyboard 屬性被設定為 Telephone)。
來~三步驟，握...折...搭啦~~~

Awesome~~~

雙平台的畫面呈現效果就如下:

好，來設計畫面的第三組 Label 與 Entry (注意此 Label 的 Keyboard 屬性被設定為 Email)。
來~三步驟，握...折...搭啦~~~

Perfet~~~

雙平台的畫面呈現效果就如下:

好，來設計畫面的第四組 Label 與 Entry (注意此 Label 的 Keyboard 屬性為 Default)。
來~三步驟，握...折...搭啦~~~

Wonderful~~~

雙平台的畫面呈現效果就如下:

接著來在 ViewModels 資料夾中一個新的 PersonDetailPageViewModel 類別來準備處理 "儲存" 聯絡人資訊的部分。

設計其儲存功能的 SaveCommand。

設計其編輯暫存用的 EditPerson 屬性，並且透過建構式給予初始物件。

再次回到 PersonDetailPage 編輯 XAML，將所需的 BindingContext 繫結其 ViewModel 與 ToolbarItem 加入後完成 Command 的 Binding。

撰寫完成後，我們就來確認一下 "儲存" 的功能是否有如前面撰寫的執行 "跳出 DisplayAlert"。

測試成功後，就把 PersonDetailPage 當中的 Entery 標記的 Text 屬性 Binding 對應的 Person 屬性資料上。

再次回到 PersonDetailPageViewModel 類別變更其儲存功能的 SaveCommand 撰寫。

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

進入 "新增" 聯絡人的頁面。

輸入資料完成後，點選 "儲存"。

儲存新增的聯絡人完成。

回到 "聯絡人" 列表。

Okay，本篇 EP9 就到告個段落這邊結束吧~~~

甘溫各位，鳩咪^_<