.NET MAUI 殼層飛出

瀏覽範例。瀏覽範例

.NET 多平台應用程式介面（.NET MAUI）Shell 提供的導覽體驗基於側邊選單和分頁。飛出面板是 Shell 應用程式的選用根選單，且可以完全自訂。可以透過圖示或從螢幕側邊滑動進入。展開面板包括可選的標題、展開項目、選單項目及可選的頁尾：

Shell 註解的彈出視窗截圖。

可以加入一個或多個飛出項目，每個飛出項目由一個 FlyoutItem 物件來表示。每個 FlyoutItem 物件都應該是子 Shell 類別物件的子物件。當沒有彈出標頭時，彈出項目會出現在彈出的頂端。

以下範例會產生一個包含兩個選單項目的下拉選單：

<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.Title 屬性的型別為 string，定義飛出項目的標題。 FlyoutItem.Icon 屬性，型別為 ImageSource，定義了飛出項目的圖示：

一個 Shell 的雙頁應用程式截圖，包含彈出式項目。

在此範例中，每個 ShellContent 物件只能透過飛出項目存取，無法透過分頁存取。這是因為預設情況下，只有當飛出項目包含多個分頁時，分頁才會顯示。

這很重要

在 Shell 應用程式中，頁面會根據導航需求即時建立。這是透過使用 DataTemplate 標記延伸來將每個 ContentTemplate 物件的 ShellContent 屬性設定為 ContentPage 物件來達成的。

Shell 具有隱含的轉換運算子，使得 Shell 的視覺階層結構得以簡化，而無需在視覺樹中引入額外的視圖。這是因為子類 Shell 物件只能包含 FlyoutItem 物件，而 FlyoutItem 物件只能包含 TabBar 物件，TabBar 物件只能包含 Tab 物件，而 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>

這種隱含轉換會自動將每個 ShellContent 物件包裹在 Tab 物件中，而物件又包裹在 FlyoutItem 物件中。

備註

子類別FlyoutItem物件中的所有Shell物件都會自動加入Shell.FlyoutItems集合，集合定義了在飛出中會顯示的項目清單。

該 FlyoutItem.FlyoutDisplayOptions 屬性配置飛出項目及其子項目在飛出中如何顯示。此屬性應該設定為 ClearButtonVisibility 列舉成員：

AsSingleItem表示，無論包含多少子Tab或ShellContent物件，FlyoutItem都將作為單一條目在飛出視窗中顯示。選擇後，第一個子內容會顯示，使用者可透過分頁在子內容間切換（若存在多個子內容）。此為 FlyoutDisplayOptions 屬性的預設值。
AsMultipleItems表示FlyoutItem的直接子物件（Tab和ShellContent）將在彈出選單中各自作為獨立項目出現。這讓使用者能直接從 flyout 瀏覽任何子內容，而不必使用分頁。

當你想將相關頁面分組到一個有分頁導覽的單一跳出條目下時，請使用 AsSingleItem 。當你希望每個頁面能直接從飛出選單存取時使用 AsMultipleItems 。

在FlyoutItem中的每個Tab物件的選單項目，可以透過將FlyoutItem.FlyoutDisplayOptions屬性設成AsMultipleItems來顯示：

<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"
       FlyoutHeaderBehavior="CollapseOnScroll"
       x:Class="Xaminals.AppShell">

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />  
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

    <ShellContent Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />    
</Shell>

在此範例中，為了 FlyoutItem 物件的子物件 Tab，以及 FlyoutItem 物件的子物件 ShellContent，建立了 flyout 項目。這是因為每個 ShellContent 物件的子 FlyoutItem 物件都會自動包裹在物件 Tab 中。此外，會為最終 ShellContent 物件建立一個飛出項目，該物件會自動包裹在物件 Tab 中，然後再包裹在物件 FlyoutItem 中。

備註

當 a FlyoutItem 包含多個 ShellContent 物件時，標籤會顯示。

這導致以下飛出項目：

包含 FlyoutItem 物件的 flyout 截圖。

定義飛出項目外觀

每個FlyoutItem 的外觀可透過將Shell.ItemTemplate 附加屬性設定為DataTemplate 來自定。

<Shell ...
       xmlns:local="clr-namespace:Xaminals"
       x:DataType="local:AppShell">
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

此範例以斜體顯示每個 FlyoutItem 物件的標題：

模板化的 FlyoutItem 物件截圖。

由於 Shell.ItemTemplate 是附加屬性，不同範本可以附加於特定 FlyoutItem 物件。

備註

殼層提供了 Title 和 FlyoutIcon 的屬性給 ItemTemplate 的 BindingContext。

此外，Shell 包含三個樣式類別，會自動套用到 FlyoutItem 物件上。欲了解更多資訊，請參閱 Style FlyoutItem 與 MenuItem 物件。

FlyoutItems 的預設範本

每個FlyoutItem使用的預設DataTemplate如下所示：

<DataTemplate x:Key="FlyoutTemplate">
    <Grid x:Name="FlyoutItemLayout"
          HeightRequest="{OnPlatform 44, Android=50}"
          ColumnSpacing="{OnPlatform WinUI=0}"
          RowSpacing="{OnPlatform WinUI=0}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="Transparent" />
                        </VisualState.Setters>
                    </VisualState>          
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="{AppThemeBinding Light=#1A000000, Dark=#1AFFFFFF}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="{OnPlatform Android=54, iOS=50, WinUI=Auto}" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image x:Name="FlyoutItemImage"
               Source="{Binding FlyoutIcon}"
               VerticalOptions="Center"
               HorizontalOptions="{OnPlatform Default=Center, WinUI=Start}"
               HeightRequest="{OnPlatform Android=24, iOS=22, WinUI=16}"
               WidthRequest="{OnPlatform Android=24, iOS=22, WinUI=16}">
            <Image.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="WinUI"
                            Value="12,0,12,0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Image.Margin>
        </Image>
        <Label x:Name="FlyoutItemLabel"
               Grid.Column="1"
               Text="{Binding Title}"
               TextColor="{OnPlatform Android={AppThemeBinding Light=#DE000000, Dark=White}}"
               FontSize="{OnPlatform Android=14, iOS=14}"
               FontAttributes="{OnPlatform iOS=Bold}"
               HorizontalOptions="{OnPlatform WinUI=Start}"
               HorizontalTextAlignment="{OnPlatform WinUI=Start}"
               VerticalTextAlignment="Center">
            <Label.Margin>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="20, 0, 0, 0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.Margin>
            <Label.FontFamily>
                <OnPlatform x:TypeArguments="x:String">
                    <OnPlatform.Platforms>
                        <On Platform="Android"
                            Value="sans-serif-medium" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Label.FontFamily>
        </Label>
    </Grid>
</DataTemplate>

這很重要

在將 OnPlatform 與 AppThemeBinding 結合時，避免在具有 x:TypeArguments="Color" 的 <OnPlatform> 元素中嵌套 AppThemeBinding，因為這可能會在 Android 執行時導致類型轉換錯誤。相反地，請使用上述的內嵌標記擴充語法，或直接用樣式類別套用顏色。

此範本可用來作為修改現有飛出佈局的基礎，並展示飛出項目的實作視覺狀態。

此外， Grid、 Image、 Label 和元素都有 x:Name 值，因此可透過視覺狀態管理器作為目標。欲了解更多資訊，請參閱「多元素上的設定狀態」。

備註

同一範本也可以用於 MenuItem 物件。

飛出項目，代表飛出內容，可以選擇將其綁定屬性Shell.FlyoutContent替換為自定義內容object：

<Shell ...
       xmlns:local="clr-namespace:Xaminals"
       x:Name="shell"
       x:DataType="local:AppShell">
    ...
    <Shell.FlyoutContent>
        <CollectionView BindingContext="{x:Reference shell}"
                        IsGrouped="True"
                        ItemsSource="{Binding FlyoutItems}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="local:AppShell">
                    <Label Text="{Binding Title}"
                           TextColor="White"
                           FontSize="18" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Shell.FlyoutContent>
</Shell>

在此範例中，飛出內容被CollectionView取代，CollectionView顯示FlyoutItems集合中每個項目的標題。

備註

在Shell類別中，FlyoutItems屬性是一個唯讀的飛出項目集合。

或者，可以通過將 Shell.FlyoutContentTemplate 可綁定屬性設為 DataTemplate 來定義飛出內容：

<Shell ...
       xmlns:local="clr-namespace:Xaminals"
       x:Name="shell"
       x:DataType="local:AppShell">
    ...
    <Shell.FlyoutContentTemplate>
        <DataTemplate>
            <CollectionView BindingContext="{x:Reference shell}"
                            IsGrouped="True"
                            ItemsSource="{Binding FlyoutItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="local:AppShell">
                        <Label Text="{Binding Title}"
                               TextColor="White"
                               FontSize="18" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>
</Shell>

這很重要

飛出標題可選擇性地顯示在您的飛出內容上方，飛出頁尾也可以選擇顯示在飛出內容下方。如果您的飛出內容可捲動，Shell 會嘗試尊重您的飛出標題的捲動行為。

選單項目可選擇性地加入飛出視窗，每個選單項目由一個 MenuItem 物件表示。飛出物件的位置 MenuItem 取決於它們在 Shell 視覺階層中的宣告順序。因此，任何在MenuItem之前宣告的物件會出現在FlyoutItem物件之前的飛出選單中，而任何在MenuItem物件之後宣告的物件會出現在FlyoutItem之後的飛出選單中。

這個 MenuItem 類別有一個 Clicked 事件，一個 Command 屬性。因此，MenuItem 物件能在MenuItem被點擊時啟用執行的情境。

MenuItem 物件可以加入彈出面板，如下範例所示：

<Shell ...
       xmlns:local="clr-namespace:Xaminals"
       x:DataType="local:AppShell">
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

此範例在所有飛出項目下方新增一個 MenuItem 物件：

包含 MenuItem 物件的飛出截圖。

該 MenuItem 物件執行一個名為 HelpCommand 的 ICommand，它會在系統瀏覽器中開啟由 CommandParameter 屬性指定的 URL。

備註

每個MenuItem的BindingContext是從子類別Shell物件繼承而來。

定義 MenuItem 外觀

每個 MenuItem 的外觀可以通過將 Shell.MenuItemTemplate 設定為 DataTemplate 來自訂。

<Shell ...
       xmlns:local="clr-namespace:Xaminals"
       x:DataType="local:AppShell">
    <Shell.MenuItemTemplate>
        <DataTemplate x:DataType="MenuItem">
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding IconImageSource}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
</Shell>

此範例將 DataTemplate 附加於每個 MenuItem 物件，並以斜體顯示物件標題 MenuItem ：

模板化 MenuItem 物件的截圖。

由於 Shell.MenuItemTemplate 是附加屬性，不同範本可以附加於特定 MenuItem 物件。

備註

殼層將 Text 和 IconImageSource 的性質提供給 MenuItemTemplate 的 BindingContext。你也可以使用 Title 替代 Text，以及 Icon 替代 IconImageSource，這樣可以重複使用相同的範本來做選單項目和飛出項目。

物件的預設範本 FlyoutItem 也可以用於 MenuItem 物件。欲了解更多資訊，請參閱 FlyoutItems 的預設範本。

樣式 FlyoutItem 和 MenuItem 物件

Shell 包含三個樣式類別，會自動套用到 FlyoutItem 和 MenuItem 物件。風格類別名稱為 FlyoutItemLabelStyle、、 FlyoutItemImageStyleFlyoutItemLayoutStyle和。

以下 XAML 展示了這些樣式類別定義樣式的範例：

<Style TargetType="Label"
       Class="FlyoutItemLabelStyle">
    <Setter Property="TextColor"
            Value="Black" />
    <Setter Property="HeightRequest"
            Value="100" />
</Style>

<Style TargetType="Image"
       Class="FlyoutItemImageStyle">
    <Setter Property="Aspect"
            Value="Fill" />
</Style>

<Style TargetType="Layout"
       Class="FlyoutItemLayoutStyle"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Teal" />
</Style>

這些樣式會自動套用到 FlyoutItem 和 MenuItem 物件，無需將屬性 StyleClass 設定為 style 類別名稱。

此外，也可以定義並套用自訂樣式類別到 FlyoutItem 和 MenuItem 物件。欲了解更多風格類別資訊，請參閱風格類別。

選單列是可以選擇性出現在彈出頂端的內容，其外觀以 object 可綁定屬性 Shell.FlyoutHeader 定義。

<Shell ...>
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
</Shell>

FlyoutHeader該類型在以下範例中顯示：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xaminals.Controls.FlyoutHeader"
             HeightRequest="200">
    <Grid BackgroundColor="Black">
        <Image Aspect="AspectFill"
               Source="store.jpg"
               Opacity="0.6" />
        <Label Text="Animals"
               TextColor="White"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </Grid>
</ContentView>

這會產生以下彈出式標題：

浮動標題的截圖。

或者，彈出式標頭的外觀可透過設定 Shell.FlyoutHeaderTemplate 可綁定屬性為 DataTemplate 後定義：

<Shell ...>
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black"
                  HeightRequest="200">
                <Image Aspect="AspectFill"
                       Source="store.jpg"
                       Opacity="0.6" />
                <Label Text="Animals"
                       TextColor="White"
                       FontAttributes="Bold"
                       HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center" />
            </Grid>            
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
</Shell>

預設情況下，飛出標頭會固定在跳出視窗中，而下方內容則會在項目數量足夠時捲動。然而，這種行為可以透過將 Shell.FlyoutHeaderBehavior 可綁定屬性設為 FlyoutHeaderBehavior 枚舉成員之一來改變：

Default – 表示將使用該平台的預設行為。此為 FlyoutHeaderBehavior 屬性的預設值。
Fixed – 表示飛出標頭始終可見且不變。
Scroll – 表示當使用者捲動項目時，飛出標頭會滾出視窗。
CollapseOnScroll – 表示飛出標頭在使用者捲動項目時會縮成僅標題。

以下範例展示了使用者捲動時如何摺疊飛出標頭：

<Shell ...
       FlyoutHeaderBehavior="CollapseOnScroll">
    ...
</Shell>

飛出頁腳是可以選擇出現在飛出底部的內容，其外觀由 object 和 Shell.FlyoutFooter 的綁定屬性來定義：

<Shell ...>
    <Shell.FlyoutFooter>
        <controls:FlyoutFooter />
    </Shell.FlyoutFooter>
</Shell>

FlyoutFooter該類型在以下範例中顯示：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="Xaminals.Controls.FlyoutFooter">
    <StackLayout>
        <Label Text="Xaminals"
               TextColor="GhostWhite"
               FontAttributes="Bold"
               HorizontalOptions="Center" />
        <Label x:DataType="sys:DateTime"
               Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
               TextColor="GhostWhite"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentView>

這很重要

先前的 XAML 範例定義了一個新的 XAML 命名空間，名為 sys： xmlns:sys="clr-namespace:System;assembly=netstandard"。這個 XAML 命名空間對應 sys 到 .NET System 命名空間。映射允許你在 XAML 中使用該命名空間中定義的 .NET 類型，例如 DateTime。欲了解更多資訊，請參閱 XAML 命名空間。

以下是產生的快速選單頁腳：

彈出頁腳的截圖。

或者，可以通過將屬性Shell.FlyoutFooterTemplate設為DataTemplate來定義飛出頁腳的顯示樣式。

<Shell ...
       xmlns:sys="clr-namespace:System;assembly=netstandard">
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="Xaminals"
                       TextColor="GhostWhite"
                       FontAttributes="Bold"
                       HorizontalOptions="Center" />
                <Label x:DataType="sys:DateTime"
                       Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:MMMM dd, yyyy}'}"
                       TextColor="GhostWhite"
                       HorizontalOptions="Center" />
            </StackLayout>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
</Shell>

飛出頁腳固定在飛出底部，且高度可任意。此外，頁腳從未遮擋任何選單項目。

飛出的寬度與高度可以透過將 Shell.FlyoutWidth 和 Shell.FlyoutHeight 附加屬性設定為double值來自訂。

<Shell ...
       FlyoutWidth="400"
       FlyoutHeight="200">
    ...
</Shell>

這使得可以實現一些情境，例如：將飛出視窗擴展到整個螢幕，或降低飛出視窗的高度以避免遮擋分頁列。

預設情況下，Shell 應用程式會有一個漢堡圖示，按下去會開啟跳出視窗。此圖示可透過將 Shell.FlyoutIcon 可綁定屬性（型別 ImageSource為）設定為適當的圖示來更改：

<Shell ...
       FlyoutIcon="flyouticon.png">
    ...       
</Shell>

可以使用可綁定的屬性設置彈出視窗的背景顏色：Shell.FlyoutBackgroundColor

<Shell ...
       FlyoutBackgroundColor="AliceBlue">
    ...
</Shell>

備註

Shell.FlyoutBackgroundColor也可以從層疊樣式表（CSS）設定。如需詳細資訊，請參閱 .NET MAUI Shell 特定屬性。

或者，可以通過將Shell.FlyoutBackground可綁定屬性設定為Brush來指定彈出面板的背景：

<Shell ...
       FlyoutBackground="LightGray">
    ...
</Shell>

在這個例子中，快顯視窗背景被塗成淺灰色 SolidColorBrush。

以下範例說明將飛出背景設定為：LinearGradientBrush

<Shell ...>
    <Shell.FlyoutBackground>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#8A2387"
                          Offset="0.1" />
            <GradientStop Color="#E94057"
                          Offset="0.6" />
            <GradientStop Color="#F27121"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackground>
    ...
</Shell>

欲了解更多筆刷相關資訊，請參閱 .NET MAUI 筆刷。

滑出可以選擇性地有一個背景圖片，顯示在滑出標題下方，以及滑出項目、選單項目和滑出頁尾的後方。背景影像可透過設定 FlyoutBackgroundImage 可綁定屬性（類型 ImageSource為）來指定為檔案、嵌入式資源、URI 或串流。

背景影像的長寬比可以透過將可綁定屬性FlyoutBackgroundImageAspect 設定為類型Aspect的Aspect列舉成員之一來配置。

AspectFill - 裁剪圖像，以填滿顯示區域，同時保留寬高比。
AspectFit - 如有需要，對圖片進行加黑邊處理，使圖片適合顯示區域，並在圖片較寬或較高時在上下或左右加上留空。此為 FlyoutBackgroundImageAspect 屬性的預設值。
Fill - 延展影像以完整且完全填滿顯示區域。這可能導致影像變形。

以下範例展示了這些屬性的設定：

<Shell ...
       FlyoutBackgroundImage="photo.jpg"
       FlyoutBackgroundImageAspect="AspectFill">
    ...
</Shell>

這會導致在 flyout 標題下方出現一張背景圖片：

彈出視窗背景圖片的截圖。

飛出視窗的背景，也就是飛出視窗覆蓋層的外觀，可以透過將 Shell.FlyoutBackdrop 附加屬性設定為 Brush 來指定：

<Shell ...
       FlyoutBackdrop="Silver">
    ...
</Shell>

在這個例子中，彈出式背景被漆成銀色 SolidColorBrush。

這很重要

FlyoutBackdrop附加屬性可以設定在任何 Shell 元素上，但只有在Shell、FlyoutItem或TabBar物件上時才會被套用。

以下範例展示了將飛出背景設定為：LinearGradientBrush

<Shell ...>
    <Shell.FlyoutBackdrop>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,1">
            <GradientStop Color="#8A2387"
                          Offset="0.1" />
            <GradientStop Color="#E94057"
                          Offset="0.6" />
            <GradientStop Color="#F27121"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Shell.FlyoutBackdrop>
    ...
</Shell>

欲了解更多筆刷相關資訊，請參閱 .NET MAUI 筆刷。

這個飛出視窗可以透過漢堡圖示或從螢幕側邊滑動進入。然而，這種行為可以透過將 Shell.FlyoutBehavior 附加屬性設定為 FlyoutBehavior 列舉成員之一來改變：

Disabled – 表示使用者無法開啟快顯視窗。
Flyout – 表示使用者可以開啟或關閉飛出視窗。這是 ClearButtonVisibility 屬性的預設值。
Locked – 表示使用者無法關閉該飛出視窗，且不與內容重疊。

以下範例說明如何關閉彈出選單：

<Shell ...
       FlyoutBehavior="Disabled">
    ...
</Shell>

備註

附加屬性FlyoutBehavior可在、 Shell、 FlyoutItem和頁面物件上設定ShellContent，以覆蓋預設的飛出行為。

預設情況下，當快顯功能表中的項目無法完全顯示時，可以垂直捲動功能表。此行為可透過將 Shell.FlyoutVerticalScrollMode 可綁定屬性設為 ScrollMode 列舉成員之一來改變：

Disabled – 表示垂直捲動將被停用。
Enabled – 表示垂直捲動將被啟用。
Auto – 表示若彈出項目無法完全顯示於彈出框中，將啟用垂直捲動。此為 FlyoutVerticalScrollMode 屬性的預設值。

以下範例展示了如何關閉垂直捲動：

<Shell ...
       FlyoutVerticalScrollMode="Disabled">
    ...
</Shell>

下拉選單項目選擇

當使用 flyout 的 Shell 應用程式首次執行時，該Shell.CurrentItem屬性會被設定為子FlyoutItem類別物件中的第一個Shell物件。然而，該屬性可以設定為另一個 FlyoutItem，如下範例所示：

<Shell ...
       CurrentItem="{x:Reference aboutItem}">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        ...
    </FlyoutItem>
    <ShellContent x:Name="aboutItem"
                  Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>

此範例將屬性 CurrentItem 設定為 ShellContent 名為 aboutItem的物件，結果該物件會被選取並顯示。在此範例中，使用隱式轉換將 ShellContent 物件包裹在 Tab 物件中，再將其包裹在 FlyoutItem 物件中。

給定名為 ShellContent 的 aboutItem 物件，其等價的 C# 程式碼為：

CurrentItem = aboutItem;

在此範例中，屬性 CurrentItem 設定在子 Shell 類類別中。或者，CurrentItem 可以透過 Shell.Current 靜態屬性設定於任意類別。

Shell.Current.CurrentItem = aboutItem;

備註

應用程式可能會進入某種狀態，此狀態下選擇下拉選單項目並非有效操作。在這種情況下，FlyoutItem 可以藉由將其 IsEnabled 屬性設定為 false來停用。這會阻止使用者選擇飛出項目。

側邊選單項目可見性

飛出項目預設會在飛出中可見。然而，項目可以使用 FlyoutItemIsVisible 屬性隱藏在彈出選單中，並使用 IsVisible 屬性從彈出選單中移除：

FlyoutItemIsVisible，型別為bool，表示該項目是否隱藏在快顯選單中，但仍可透過GoToAsync導航方法抵達。這個屬性預設值為 true。
IsVisible，其型別為bool的屬性，表示該項目是否應從視覺樹中移除，因此不會在飛出視窗中顯示。其預設值為 true。

以下範例展示了在選單中隱藏項目的方法：

<Shell ...>
    <FlyoutItem ...
                FlyoutItemIsVisible="False">
        ...
    </FlyoutItem>
</Shell>

備註

還有一個 Shell.FlyoutItemIsVisible 附加屬性，可以設定在 FlyoutItem、 MenuItem、 Tab和 ShellContent 物件上。

透過設定 Shell.FlyoutIsPresented 綁定屬性為 boolean 值以指示飛出目前是否開啟，可以程式化地進行開啟和關閉：

<Shell ...
       FlyoutIsPresented="{Binding IsFlyoutOpen}">
</Shell>

或者，也可以用程式碼來執行：

Shell.Current.FlyoutIsPresented = false;

意見反應

此頁面對您有幫助嗎？

Last updated on 2026-01-15

共用方式為

展開選單項目

彈出顯示選項

定義飛出項目外觀

FlyoutItems 的預設範本

替換彈出內容

菜單項目

定義 MenuItem 外觀

樣式 FlyoutItem 和 MenuItem 物件

展開式標題

彈出式頁腳

飛出寬度與高度

彈出圖示

彈出背景

彈出背景影像

浮出背景

飛出行為

垂直捲動面板

下拉選單項目選擇

側邊選單項目可見性

以程式方式開啟與關閉彈出視窗

意見反應

其他資源