iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Mobile Development

Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore系列 第 9

EP 9

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

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

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

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

GoGoGo~~~


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

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

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

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

來~三步驟,握...折...搭啦~~~
設計畫面的第一組 Label 與 Entry 1
Good~~~

雙平台的畫面呈現效果就如下:
設計畫面的第一組 Label 與 Entry 2

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

雙平台的畫面呈現效果就如下:
設計畫面的第二組 Label 與 Entry 2

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

雙平台的畫面呈現效果就如下:
設計畫面的第三組 Label 與 Entry 2

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

雙平台的畫面呈現效果就如下:
設計畫面的第四組 Label 與 Entry 2

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

設計其儲存功能的 SaveCommand。
設計 PersonDetailPageViewModel 類別 2

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

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

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

測試成功後,就把 PersonDetailPage 當中的 Entery 標記的 Text 屬性 Binding 對應的 Person 屬性資料上。
PersonDetailPage 編輯 XAML 3
PersonDetailPage 編輯 XAML 4

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

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

進入 "新增" 聯絡人的頁面。
雙平台(iOS、Android)上執行呈現的效果 1

輸入資料完成後,點選 "儲存"。
雙平台(iOS、Android)上執行呈現的效果 1

儲存新增的聯絡人完成。
雙平台(iOS、Android)上執行呈現的效果 1

回到 "聯絡人" 列表。
雙平台(iOS、Android)上執行呈現的效果 1

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

甘溫各位,鳩咪^_<


上一篇
EP 8
下一篇
EP 10
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore31

尚未有邦友留言

立即登入留言