上一個

下一個

執行飛出視窗瀏覽

已完成

飛出視窗瀏覽是一種瀏覽類型，其中功能表項目視窗會從裝置螢幕的側邊滑進 (或飛出)。 點選所謂的「漢堡」選單，或三條水平線互相堆疊的圖示來叫用。

在此單元中，您會瞭解如何組建可執行飛出視窗瀏覽的應用程式。

什麼是飛出視窗瀏覽？

飛出視窗瀏覽會顯示功能表，提供在應用程式內切換內容的快速方法。

飛出視窗功能表由數個組件組成，分別是Header、FlyoutItems、MenuItems和Footer。

以下影像顯示飛出視窗組件的視覺範例。

由於飛出視窗功能表不一定會顯示出來，因此可用來在應用程式中概念不同的組件之間切換內容。 例如，一個飛出視窗項目可能會引導至資料輸入頁面 (或多個頁面) ，另一個項目會引導至關於頁面。

.NET MAUI 應用程式中的飛出視窗瀏覽

您可以使用FlyoutItem類別在 .NET MAUI 中執行飛出視窗瀏覽。 FlyoutItem屬於 .NET MAUI 提供的 Shell 應用程式開發 範例的一部分。

在 .NET MAUI 中以飛出視窗進行瀏覽，會在點選FlyoutItem項目時發生。 FlyoutItem 會自動切換應用程式中顯示的內容。 點選 FlyoutItem設定其ShellContent 屬性時，您可以指定顯示的內容。 該屬性會指向應用程式中的頁面。

FlyoutItem必須裝載在Shell頁面中，做為應用程式的主頁面。 而且您可以隨您喜好擁有任意數量的FlyoutItem。

下列範例會建立包含兩個飛出視窗項目的飛出視窗：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

建立飛出視窗

一或多個飛出視窗項目可以新增至飛出視窗。 FlyoutItem 物件代表每個飛出視窗項目。 每個FlyoutItem物件都應該是您應用程式MainPage子類別Shell物件的子系。

物件 Shell 具有隱含轉換運算子，可簡化 Shell 視覺階層。 此簡化有可能，因為子類別 Shell 物件只能包含 FlyoutItem 物件或 TabBar 物件，而其只能包含 Tab 物件，而其只能包含 ShellContent 物件。

這些隱含的轉換運算子可以用來移除上一個範例中的 FlyoutItem、和 Tab 物件：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

此程式碼會產生具有兩個項目的飛出視窗。 應用程式開啟時，會預設顯示 CatsPage。 點選第二個項目會顯示 DogsPage。

飛出視窗功能表項目

功能表項目可以選擇性地新增至飛出視窗。 MenuItem 物件代表每個功能表項目。 功能表項目與按鈕相似，因為點選後會導致發生動作，而非顯示頁面。

飛出視窗上的物件位置 MenuItem 取決於它們在 Shell 視覺階層中的宣告順序。 因此，任何在FlyoutItem物件之前宣告的MenuItem物件都會出現在飛出視窗中的其他FlyoutItem物件之前，而任何 在FlyoutItem物件之後 宣告的MenuItem物件都會出現在飛出視窗中的其他FlyoutItem物件之後。

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

飛出視窗標題和頁尾

飛出視窗標頭是選擇性出現在飛出視窗頂端的內容。 您可以藉由設定 Shell.FlyoutHeader 具有可系結屬性的物件來定義標頭的外觀:

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png" />
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

飛出視窗頁尾是選擇性出現在飛出視窗底部的內容。 您可以藉由設定 Shell.FlyoutFooter 具有可系結屬性的物件來定義頁尾的外觀:

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>

繼續