EP 12: Implement and Use a Custom ValueConveter

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP12。

在 EP11 已经仰赖 Shell 利用 URI 的 Navigation 模式转跳到 PersonDetailPage 时透过传递的参数，去判断是否需要将该 PersonDetailPage 的 Entry 设定为可编辑的模式。

但若是点选某个联络人进入到 PersonDetailPage 的时候，我们在 PersonDetailPage 若没有设计一些 ToolbarItem 的改变，以目前状况来看无论是如何转跳进来到 PersonDetailPage 的，其 ToolbarItem 就都是 "储存" 的功能。

所以本篇 EP12 就要来针对该 ToolbarItem 来产生出 "储存/编辑" 之间的差异调整。

就来看怎麽处理吧，Go~~~

再次把焦点到 Visual Studio 当中的 "方案总管" 窗格中，并且针对 Xamarin.Forms 专案的 Utilities 资料夹中再新增一个资料夹，并且命名为 ValueConveters。

接着在这个 ValueConveters 当中再新增一个类别档，并且命名为 BoolToTwoStringValueConveter。

新增类别档案。

确认在 ValueConveters 资料夹中完成建立 BoolToTwoStringValueConveter 类别。

接着就在这个类别当中来实作被定义在 Xamarin.Forms 命名空间当中的 IValueConveter 这个介面(Interface)。

在这边我们想要透过 EP11 在 PersonDetailPageViewModel 所接收到 IsEdit 属性资料值 "true/false" 能够对应到 "储存/编辑" 这两个文字字串，并且在 ToolbarItem 的 Text 属性透过 Binding 的方式来呈现该文字，所以开始来设计这个 ValueConveter。

而完成後就来将这个 ValueConveter 在 Xamarin.Forms 专案当中设计成 Resource，才能让 XAML 透过 StaticResource 进行 Binding 时的转换。

所以就打开 App.xaml。

并在其 Resources 标记当中增加 BoolToTwoStringValueConveter 的标记。

跟之前的 EP3 介绍一样，可以透过 Visual Studio 的修正功能，快速完成在 XAML 撰写中的引用 BoolToTwoStringValueConveter 所在的命名空间。

再切到 PersonDetailPage.xaml 找到 ToolbarItem 的 XAML 标记。

在 ToolbarItem 其中的 Text 属性值的部分就透过 Binding 与 StaticResource 的使用。

接下来我们就透过侦错执行来观察一下调整的效果。

首先是执行 iOS 并且在 PersonPage 点选右上角 "新增" 的 ToolbarItem 执行 AddCommand。

再进到 PersonDetailPage 之前会来 BoolToTwoStringValueConveter 执行转换(透过 OzCode 延伸扩展可以观看到方法上的参数资料值，第一个参数 value 的资料为 true)。

接着出现在 iOS 平台的 PersonDetailPage 所显示的 ToolbarItem 文字为 "储存"。

接着切换到 Android 来执行，并且在 PersonPage 点选 ListView 当中某笔联络人的选项，执行了 EditCommand。

再进到 PersonDetailPage 之前会来 BoolToTwoStringValueConveter 执行转换(透过 OzCode 延伸扩展可以观看到方法上的参数资料值，第一个参数 value 的资料为 false)。

接着出现在 Android 平台的 PersonDetailPage 所显示的 ToolbarItem 文字为 "编辑"。

以上确认都没问题的话，本篇 EP12 的目的就达成!

YA!!!

最後，就先来简单的修正一下在 PersonDetailPageViewModel 所撰写的部分程序。

对，就是 PersonDetailPageViewModel 当中的 SaveCommand，修正一下原本撰写的程序，检查一下 IsEdit 的状况来确保是否需要储存联络人资讯。

当然，目前 PersonDetailPageViewModel 建构式的设计与 SaveCommand 的检查 IsEdit 修正，若是要针对使用者透过联络人列表，转跳进入 PersonDetailPage 检视联络人资料後，若进行该笔联络人的资料编辑後，再执行 "储存" 动作时会有资料面上的储存问题。

这就留待在下一篇 EP13 再来进行讨论罗~~~

ByeBye!