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 的介紹完成~~~

蹦的掰!