EP 9: Navigation by Shell in TopStore App

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 就到告个段落这边结束吧~~~

甘温各位，鸠咪^_<