EP 18 Search and SearchBar design in TopStore App

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

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

在目前 PeoplePage 呈现联络人列表中没有实作搜寻的功能，而当联络人多的时候可能就会需要有这样的功能实作，所以本篇就来在 PeoplePage 当中的 ListView 的上方呈现中实作 SearchBar 的 UI 元件，并且完成最基本的针对联络人姓名搜寻功能。

开始罗~~~

首先打开找到 PeoplePage 的 ListView 标记。

由於版面的 RootLayout 当初是用 StackLayout，就直接在该 ListView 标记上方撰写 SearchBar 的标记，并设定其 Placeholder 的文字。

接下来继续在 SearchBar 当中设定 SearchCommand 跟 SearchCommandParameter 的 Binding(系结) 对象。

而在这边也增加一个 TextTransform 的属性设定 为 Lowercase，让使用者输入的文字就算是英文大写也会变英文的小写，以防止搜寻时有大小写比对的问题发生(不做此设定也可以，但注意後面的 SearchCommand 实作时就要转换 keyword 的参数值为小写来比对)。

後续动作应该不用多说，应该也猜的到要到 PeoplePageViewModel 当中撰写对应应有的 SearchCommand 设计。

不过，要注意的是此 SearchCommand 需有设计引数 keyword 来供使用者在 SearchBar 中输入的文字(Text 属性)当参数资料输入。

SearchCommand 实际的功能程序码，大体上就针对 MockData 中的 People ，利用了 Linq 语句处理条件的部分(请先在 PeoplePageViewModel 当中加入 using System.Linq 的命名空间引用)，并且针对查询不到资料时作了一个 Alert 的 UI 显示。

若前面的 SearchBar 没有设定 TextTransform 的属性的话，请记得在比对时 keyword 也要转换成小写文字，以利使用者输入的文字能统一大小写比对查询。
(除非真的要做精准文字比对，那就可以不管这问题了)

而在双平台 (iOS、Android) 执行搜寻的效果如下:

在 PeoplePage 的 SearchBar 准备输入文字"。

在 SearchBar 输入文字，例如: "j"，并按下虚拟键盘中的 "搜寻" 键。

然後 ListView 的内容变换成搜寻後的结果。

透过 SearchBar 完成基本的 Search 效果後，则要再处理一些 SearchBar 本身设计时的 UI 问题才行...

让我们先回到 PeoplePaeg.xaml，针对 SearchBar 的标记增加 TextChanged 的事件注册。

并在 PeoplePage.xaml.cs 当中找到对应的事情处理常式的程序码。

撰写事情处理常式内部要执行的程序码。

这主要是为了要处理使用者操作的过程当中，可能会在搜寻完成後透过 SearchBar 的清除按钮时，将 SearchBar 的所有文字时删除，能顺利恢复到能观看所有联络人的状态。

修正後在双平台 (iOS、Android) 执行搜寻的效果如下:

在 SearchBar 输入文字，例如: "j"，并按下虚拟键盘中的 "搜寻" 键。

按下虚拟键盘中的 "搜寻" 键，结果显示正确。

清除 SearchBar 的文字，ListView 恢复显示所有联络人资讯。

以上本 EP18 的介绍完成~~~

蹦的掰!