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

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

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

在前一回當中已經完成讓 GoodsPage 轉跳至 ProductDetailPage 時能檢視 Product 的資料，並且也能進行修改或新增。不過，如果細心的捧友應該有發現 Product 資料當中有一個 images 的屬性欄位沒有被呈現出來，本回就來介紹這個部分囉！

首先，先找到專案底下的 "Resources" 資料夾，在此資料夾當中有先前所介紹過的 AppIcon、Fonts、Images、Raw、Splash、Styles 這幾個資料夾，提供 MauiApp 在各平台執行時的共用資源檔案。

本回的主軸在 Images 這個部分，要在這邊放入一張產品的準備圖片 "tmp.png"，直接透過檔案總管拖拉圖片到 Visual Studio 2022 的方案總管當中：

完成結果如下圖紅框所示，並且注意該檔案的 "建置動作" 是否為 MauiImage：

接著要開啟 Pages 資料夾中的 "ProductDetailPage.xaml" 檔案：

找到 VerticalStackLayout 元件：

並在其 VerticalStackLayout 元件的外部，再用一個 ScrollView 元件給包起來，以便有些螢幕較小的裝置，無法顯示 Product 的所有資訊時，能夠透過滑動頁面的方式往下捲動觀看資料，如下圖紅框所示：

完成後再到 VerticalStackLayout 當中，加入以下 Image 元件的 XAML 標記：

<Image
    Margin="0,10"
    HorizontalOptions="FillAndExpand"
    IsEnabled="{Binding IsEdit}"
    Source="{Binding EditProduct.Images}"
    VerticalOptions="Center" />

接著再開啟位於 Utilities 資料夾底下的 "MockData.cs" 檔案：

找到當初設計 NewProduct() 的方法：

並在產生 Product 物件時的屬性初始值除了 Id 設定外，也要幫 Images 屬性設定其初始值：

, Images= "tmp.png"

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

完成後其執行結果如下：

點選 "物品項" 頁面導覽列右上角的 "新增" 按鈕，直接轉跳到 ProductDetailPage 並且可以開始編輯 "新商品" 的資料：

點選 "物品項" 頁面列表中的某個商品，直接轉跳到 ProductDetailPage 並且帶入該 "商品" 的資料呈現詳細資訊：

由於有 Image 的顯示預設的商品準備圖 "tmp.png"，所以整體的商品資料就相對的佔據比較長的版面，因此本回介紹中所加上的 ScrollView 就可以發揮其作用了：

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