練習：實作索引標籤瀏覽

10 分鐘

在天文學應用程式中，系統會要求您合併索引標籤與飛出視窗，以協助瀏覽不同頁面。

您決定要做的第一件事，就是移除飛出視窗中的所有頁面，並將這些頁面新增到 TabBar，以便查看應用程式的樣貌。

新增 TabBar

在 [方案總管] 視窗中，開啟 AppShell.xaml 頁面。
在 [XAML 標記] 頁面中，刪除 <Shell> 內的所有內容。

建立 <TabBar> 和空白的 <Tab>。

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

    <TabBar>
        <Tab>

        </Tab>
    </TabBar>
</Shell>

接下來，將 ShellContent 新增至 Tab，並將其內容設定為 MoonPhasePage。

<TabBar>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
    </Tab>
</TabBar>

現在，使用 Title 和 Icon 屬性為索引標籤提供要顯示的標題和圖示。
```
<Tab Title="Moon Phase" Icon="moon.png">
```

針對 SunrisePage 新增另一個 Tab。將其 Title 設定為日出，並將其 Icon 設定為 sun.png。完成後的 XAML 樣貌如下:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">  

    <TabBar>
        <Tab Title="Moon Phase" Icon="moon.png">
            <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
        </Tab>
        <Tab Title="Sunrise" Icon="sun.png">
            <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
        </Tab>
    </TabBar>
</Shell>

執行應用程式以查看其樣貌。

您認為應該讓月相和日出頁面顯示在同一個索引標籤頁面中。您也認為關於頁面應該分開。因此，您決定重新加入飛出視窗。第一個飛出視窗項目會顯示索引標籤頁面，第二個則會顯示關於頁面。

刪除 TabBar 及其中包含的所有子項目。
在其位置中，新增 <FlyoutItem>。將其 Title 屬性設定為天文學，並將其圖示設定為 moon.png。
```
<FlyoutItem Title="Astronomy" Icon="moon.png">

</FlyoutItem>
```

在 <FlyoutItem> 內，新增指向 MoonPhasePage 的 <ShellContent>。將其 Title 屬性設定為月相，並將 Icon 屬性設定為 moon.png。

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
</FlyoutItem>

在同一個 <FlyoutItem> 內，新增另一個 <ShellContent> 以指向 SunrisePage。將其 Title 屬性設定為日出，並將 Icon 屬性設定為 sun.png。

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

現在，點選此飛出視窗項目，會顯示有兩個索引標籤的索引標籤頁面。

若要建立新的飛出視窗項目並指向 AboutPage，請新增 <FlyoutItem>。將其 Title 屬性設定為關於，並將 Icon 屬性設定為 question.png。

在該 <FlyoutItem> 內，新增指向 AboutPage 的 <ShellContent>。

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

重新執行應用程式。您應該會在飛出視窗中看到兩個項目。第一個項目會開啟索引標籤頁面，其中包含 MoonPhasePage 和 SunrisePage。第二個項目會顯示 AboutPage 本身。

是否需要協助?

AppShell.xaml 的最後一個 XAML 程式碼看起來應該像此範例:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->

    <FlyoutItem Title="Astronomy" Icon="moon.png">
        <ShellContent Title="Moon Phase" Icon="moon.png"
            ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

        <ShellContent Title="Sunrise" Icon="sun.png"
            ContentTemplate="{DataTemplate local:SunrisePage}"/>
    </FlyoutItem>

    <FlyoutItem Title="About" Icon="question.png">
        <ShellContent
            ContentTemplate="{DataTemplate local:AboutPage}"/>
    </FlyoutItem>
</Shell>

練習：實作索引標籤瀏覽

新增 TabBar

合併索引標籤頁面與飛出視窗

是否需要協助?

意見反應