EP 6: Use self-define Code Snippet to improve Coding Experience for design Command in ViewModel

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 平台来确认一下画面呈现的效果，那大概就是这样子就可以做到这个结果。

在本 EP 最後再来稍微来整理一下，在 EP5 透过 Visual Studio 自动产生的 Person 的类别，当初它是自动产生的时候，如果没有做太多调整，理论上它会产生同一个资料夹当中(也就是 ViewModels 这个资料夹)。

所以我们来将它从 ViewModels 资料夹移动到 Models 资料夹中，既然搬移过去了就也帮 Person 应该所在的 namespace 也稍微修正一下，把它改到 TopStoreApp.Models 的命名空间底下。

那随之而来会遇到的一个问题，当初的 PeoplePageViewModel 这个类别里面所使用的 Person 类别，它会不知道在哪里找到该 Person 类别。

一样就是使用 Visaul Studio 提供的命名空间修正，这次则是使用了 using TopStore.Models 这样的修正。

好的，调整完这些就将 Xamarin.Forms 的专案重新建置 (Ctrl + B)，确认到目前为止所变更的程序码在编译上都没问题後告个段落，後面就到下一篇 EP7 再继续介绍罗!

谢谢各位，我们下篇见^_<