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 系列 系列文的 EP10。

如果仔細觀察一下在 EP06 當中所顯示的原 TopStoreApp 進到訂單內部的畫面：

跟目前的轉跳呈現的效果好像有些出入：

差別在哪邊呢？在下方的 TabBar 是否消失：

這是當初開發此 TopStoreApp 的時候，一項比較特別的 UI 需求，希望在進行 "訂單" 功能時，不會出現其他的 TabBar 選項，以免誤觸其他功能跳到其他頁面去。

而由於目前在控制轉跳頁面瀏覽的功能是仰賴 Shell 來完成的，因此在這方面要控制的處理就首先想到透過 Shell 來處理。

在 Shell 的介紹當中有一個章節是講到 Pages 的章節，並進一步講解到是否顯示導覽列的控制：
Microsoft Learn : .NET MAUI 殼層頁面 -
停用瀏覽列

雖然頁籤列沒有特別明講作法，但其實是類似於上述導覽列的控制處理。

所以在當前 TopStoreApp 的控制上，最基本的作法就是找到 OrderOwnersPage.xaml 並在其 ContentPage 的屬性上增加：

Shell.TabBarIsVisible="False"

而由於此頁面顯示時都會直接關閉 TabBar 的顯示，所以在這邊就直接設定常數值 "False" 即可。

完成結果如下圖所示：

App 執行的效果畫面如下：

Android:

iOS:

接著，再繼續幫此 OrderOwnersPage 增加轉跳到觀看訂單明細的頁面處理吧~~~

首先根據前一篇 EP 的介紹，其實針對 OrderOwner 的調整還需要多設計一個 OrderId 屬性：

public int OrderId { get; set; }

完成結果如下圖所示：

並且在 MockData 當中的 GetOrderOwners 方法，也針對 OrderId 來賦予資料：

, OrderId = order.Id

完成結果如下圖所示：

接著來增加 ViewModels 底下的 OrderOwnersPageViewModel 應有的 RelayCommand：

[RelayCommand]
private async void Select(OrderOwner order)
{
    await Shell.Current.DisplayAlert("Order Selected",
                                    $"Order Owner: {order.Owner}\r\n" +
                                    $"Order Id: {order.OrderId}", "OK");
}

完成結果如下圖所示：

再繼續到 Pages 底下的 OrderOwnersPage.xaml 調整當中的按鈕，幫其按鈕增加 Command 與 CommandParameter 屬性：

Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:OrderOwnersPageViewModel}}, Path=SelectCommand}"
CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"

完成結果如下圖所示：

所以當，點選到某個訂單後就會出現 DisplayAlert，並顯示點選到某個 Order 其中的 OrderId 值，其結果如下圖所示：

下一回再繼續開始來設計 OrderDetail 及其顯示頁面囉~~~