練習：搭配使用索引標籤式頁面與導覽頁面

10 分鐘

在天文學應用程式中，系統已要求您新增頁面，以讓使用者選取不同的天體，並顯示其詳細資料。可能會有任意數的天體，因此為每個天體建立一個索引標籤不是可行的方式。因此，若要讓使用者選取要檢視的天體，您可以決定新增另一個包含清單的頁面。使用者可以從此清單中選取一個天體，而應用程式會在新頁面中顯示該天體的詳細資料。清單頁面可作為堆疊導覽的「根頁面」。您可將清單頁面新增為現有使用者介面中的索引標籤。

Diagram of the stack navigation model for moving between pages for astronomical bodies.

開啟入門解決方案

移至存放庫中您在本課程模組開頭所複製的 exercise3 資料夾，然後移至 start 資料夾。
使用 Visual Studio 開啟 [Astronomy.sln] 解決方案或 Visual Studio Code 中的資料夾。

注意

此解決方案包含未在您先前練習中所使用應用程式版本中的頁面。
在 [方案總管] 視窗中，開啟 Pages 資料夾。除了 MoonPhasePage、SunrisePage 和 AboutPage 檔案之外，此資料夾還包含另外兩個頁面：
- AstronomicalBodiesPage。此頁面包含四個按鈕，可讓使用者選取太陽、月亮、地球或哈雷彗星的詳細資料。應用程式的目前版本只是概念證明。未來，此頁面可讓使用者從較大的清單中選取。
- AstronomicalBodyPage。此頁面用來顯示天體的資訊。

AstronomicalBodiesPage 已新增為按一下 [天文學] 飛出視窗時所顯示頁面上的索引標籤。

新增詳細資料頁面的路線

若要巡覽至 AstronomicalBodyPage，您需要在 AppShell 類別的建構函式中註冊一個路由來設定該路由：

public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
}

瀏覽至詳細資料頁面

現在，我們需要執行導覽。在 AstronomicalBodiesPage.xaml.cs 中，為該頁面上的每個 Button 建立按一下事件處理常式。

public AstronomicalBodiesPage()
{
    InitializeComponent();

    btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
    btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
    btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
    btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
}

每當按一下 Button，該應用程式就會導覽至 [AstronomicalBodyPage] 頁面。但我們仍需要傳送要顯示的天體類型。

若要將資料傳送至 [AstronomicalBodyPage]，請在路線資訊中新增查詢參數字串。字串的格式為 ?astroName=astroBodyToDisplay。

btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");

若要在 [AstronomicalBodyPage] 上接收資料，請先建立類別層級屬性來保存傳入的資料。將其命名為 AstroName。
```
string astroName;
public string AstroName
{
    get => astroName;
    set
    {
        astroName = value;

        // this is a custom function to update the UI immediately
        UpdateAstroBodyUI(astroName);
    } 
}
```
在這裡，UpdateAstroBodyUI(astroName) 是一種協助程式函數，可用來在設定 AstroName 屬性時立即更新使用者介面。
然後您需要使用註釋來裝飾類別，而此類別會將您所建立的屬性對應至傳入的查詢參數。
```
[QueryProperty(nameof(AstroName), "astroName")]
public partial class AstronomicalBodyPage
{ 
    ...
}
```
啟動應用程式，然後選取標題為 [天體] 的索引標籤。
選擇 [太陽] 按鈕。 [太陽] 的詳細資料應該隨即出現。導覽列應該包含「上一步箭號」，以讓使用者返回天體清單。其餘索引標籤仍然會顯示且為使用中：
關閉應用程式，並返回 Visual Studio 或 Visual Studio Code。

繼續

練習：搭配使用索引標籤式頁面與導覽頁面

開啟入門解決方案

新增詳細資料頁面的路線

瀏覽至詳細資料頁面

意見反應