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

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP20。

接著在 EP17 中 "下訂單" 的過程中，出現聯絡人列表後會由點選其中某個聯絡人的 "下訂單" 按鈕後，轉跳到 "物品項" 的列表頁面，以利進行 "下訂單" 過程當中的物品點選。

所以本 EP 就要來改造現在聯絡人列表當中的 "撥電話" 按鈕的功能為上述的 "下訂單" 功能，並轉跳到 "物品項" 的列表頁面。

首先，要變更聯絡人列表當中的 "撥電話" 按鈕並不難，找到 PeoplePage 上定義的 Button 標記，將其文字屬性與 Command 所繫結的 Path 作修改：

Text="下訂單"

Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:PeoplePageViewModel}}, Path=MakeOrderCommand}"

完成結果如下圖：

當然，其 PeoplePage 所對應的 PeoplePageViewModel 也要定義出此 OrderingCommand ，找到 PeoplePageViewModel.cs 並在其類別設計中增加如下方法：

[RelayCommand]
private void MakeOrder(Person person)
{
    var routing = IsOrder ? $"//Orders/People/Goods?personId={person.Id}&isOrder=true" 
                            : $"//People/Goods?personId={person.Id}&isOrder=true";
    Shell.Current.GoToAsync(routing);
}

完成結果如下圖：

由上述 MakeOrder 方法的程式碼得知，要進行兩種不同的路由轉跳到 GoodsPage 呈現物品項列表。

接著再讓繼續開啟 AppShell.xaml.cs 並在其建構方法中來註冊該路由：

Routing.RegisterRoute("Orders/People/Goods", typeof(Pages.GoodsPage));
Routing.RegisterRoute("People/Goods", typeof(Pages.GoodsPage));

完成結果如下圖：

另外，由於物品項的頁面不再是單一出現的物件了，也來調整一下其 builder 建立物件的方式，開啟 MauiProgram.cs 找到 RegisterAppViewsAndViewModels 方法，進行變更：

builder.Services.AddTransient<Pages.GoodsPage>();
builder.Services.AddTransient<ViewModels.GoodsPageViewModel>();

完成結果如下圖：

而若會有疑問為何要設計兩種路由轉跳，理由很簡單，因為本來在聯絡人列表的按鈕變更為 "下訂單"，那就可能直接在聯絡人列表發動 "下訂單"，無須透過訂單列表的 "新增" 發動 "下訂單"。

因此轉跳的行為方式就會有所不同囉~~~

由聯絡人列表發動 "下訂單"：

由訂單列表的 "新增" 發動 "下訂單"：

而如果還有印象先前撰寫 GoodsPage 時預留的設計，其實物品項列表的物品項也要能發動 "下訂單"：

不過第三種發動 "下訂單" 的頁面轉跳會更為特殊，在這邊就先不討論這部份了~~~

接著會發現，"下訂單" 要進入到 GoodsPage 的時候也會隱藏下方的頁籤，其處理作法跟 EP18 的作法極為雷同，以下就速速來完成吧~~~

將 GoogsPage 的 ContnetPage 標記增加 Shell.TabBarIsVisible 設定值：

Shell.TabBarIsVisible="{Binding IsOrder, Converter={StaticResource BoolReverseValueConverter}}"

完成結果如下圖：

接著找到 ViewModels 當中的 GoogsPageViewMode，並幫其設計增加接收參數與設定的 IsOrder 屬性。

增加路由參數處理：

[QueryProperty(nameof(IsOrderQueryString), "isOrder")]

增加可繫結屬性：

[ObservableProperty]
private bool _isOrder;

public string IsOrderQueryString
{
    set
    {
        IsOrder = bool.Parse(value);
    }
}

完成結果如下圖：

以上完成~~~