Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會利用目前 Visual Studio 內建的專案樣本建立一個初始的 .NET MAUI 專案，並且透過此 .NET MAUI 專案來把 TopStore App 的開發從 Xamairn.Forms 轉換到 .NET MAUI 上進行。

本篇是 Re: 從零改成用 .NET MAUI 技術來繼續過去用 Xamarin 開發的一個 App : TopStore 系列 系列文的 EP26。

繼前一回對 CollectionView 當中對於列表的 UI 呈現與操作的設計完畢後，緊接著來針對整個 GoodsPage 再做一些畫面上的 UI 與操作的調整。

首先，打開 "GoodsPage.xaml" 這個檔案：

接著找到 ContentPage 標記與 StackLayout 標記(注意雖然在 .NET MAUI 仍可以繼續沿用 StackLayout 元件，但微軟官方文件建議在 .NET MAUI 當中使用 UI 新設計的 Layout 元件 VerticalStackLayout 或 HorizontalStackLayout 取代 StackLayout)之間來安插 ToolbarItems 的標記：

<ContentPage.ToolbarItems>
    <ToolbarItem Text="新增" />
</ContentPage.ToolbarItems>

完成的結果如下圖紅框所示：

再繼續在 StackLayout 的標記下方加入 SearchBar 的標記：

<SearchBar
    Placeholder="請輸入要搜尋的物品名稱..."
    TextChanged="SearchBar_TextChanged"
    TextTransform="Lowercase" />

完成的結果如下圖紅框所示：

完成的呈現結果如下：

接著跟之前的 PeoplePage 一樣，在 SearchBar 文字進行改變的時候，需要透過 TextChanged 事件做一些狀況排除，所以開啟 "GoodsPage.xaml.cs" 檔案，會看到已經有自動建立出來的事件處理常式(如果 SearchBar 的 XAML 標記是打字輸入的，會有提醒可自動建立)：

private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
{

}

如下圖紅框所示：

在此事件處理常式當中，加入以下程式碼：

var vm = BindingContext as ViewModels.GoodsPageViewModel;
if (e.NewTextValue?.Length == 0 && e.OldTextValue?.Length > 0)
{
    vm.SearchCommand.Execute(string.Empty);
}

完成結果如下圖紅框所示：

再回到 "GoodsPage.xaml" 檔案當中，繼續針對 ToolbarItem 與 SearchBar 編輯 XAML 標記當中的 Command 們的繫結對象。

對於 ToolbarItem 的 Command 就繫結到先前在 GoodsPageViewModel 中所設計的 Add() 方法(透過 [RelayCommand] 會形成 AddCommand)：

Command="{Binding AddCommand}"

完成結果如下圖紅框所示：

對於 SearchBar 的 SearchCommand 就繫結到先前在 GoodsPageViewModel 中所設計的 Search() 方法(透過 [RelayCommand] 會形成 SearchCommand)，並且設定其 SearchCommandParameter 的資料為輸入在 SearchBar 當中的文字：

SearchCommand="{Binding SearchCommand}"
SearchCommandParameter="{Binding Source={RelativeSource Self}, Path=Text}"

完成結果如下圖紅框所示：

完成的結果如下：

• 點選 GoodsPage 導覽列左上角的 "新增"，會執行 AddCommand 的操作：
  

• 點選進入 SearchBar 並輸入文字後按下 "Search"，會執行 SearchCommand 的操作：
  

• 搜尋完畢後點選 SearchBar 中的 "清除文字" 會回到原本的 Goods 列表呈現：
  

本 EP 介紹所完成的範例程式碼可在此下載。

(此次上傳到 GitHub 的 TopStoreApp 程式碼，在此 "GoodsPage.xaml" 的 StackLayout 已改成 VerticalStackLayout)