.NET MAUI Shell ポップアップ

サンプルを参照する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) シェルによって提供されるナビゲーション エクスペリエンスは、ポップアップとタブに基づいています。 フライアウトはシェルアプリのオプションのルートメニューであり、完全にカスタマイズできます。 アイコンを使用するか、画面の横からスワイプしてアクセスできます。 ポップアップは、省略可能なヘッダー、ポップアップ項目、オプションのメニュー項目、および省略可能なフッターで構成されます。

フライアウト項目

ポップアップに 1 つ以上のポップアップ項目を追加でき、各ポップアップ項目は FlyoutItem オブジェクトによって表されます。 各 FlyoutItem オブジェクトは、サブクラス化された Shell オブジェクトの子である必要があります。 ポップアップ ヘッダーが存在しない場合、ポップアップ項目はポップアップの上部に表示されます。

次の例では、2 つのポップアップ項目を含むポップアップを作成します。

<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 プロパティは、ポップアップ項目のアイコンを定義します。

この例では、各 ShellContent オブジェクトにアクセスできるのはポップアップ項目のみであり、タブからアクセスすることはできません。 これは、既定では、ポップアップ項目に複数のタブが含まれている場合にのみタブが表示されるためです。

シェルには暗黙的な変換演算子があり、ビジュアル ツリーに追加のビューを導入することなく、シェルのビジュアル階層を簡略化できます。 これは、サブクラス化された 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>

この暗黙的な変換により、各 ShellContent オブジェクトが Tab オブジェクトに自動的にラップされ、 FlyoutItem オブジェクトにラップされます。

フライアウト表示オプション

FlyoutItem.FlyoutDisplayOptions プロパティは、ポップアップ項目とその子をポップアップに表示する方法を構成します。 このプロパティは、FlyoutDisplayOptions 列挙メンバーに設定する必要があります。

• AsSingleItemは、含まれる子FlyoutItemまたはTabオブジェクトの数に関係なく、ShellContentがポップアップ内で 1 つのエントリとして表示されることを示します。 選択すると、最初の子コンテンツが表示され、ユーザーはタブを使用して子を切り替えることができます (複数の子が存在する場合)。 これは、FlyoutDisplayOptions プロパティの既定値です。
• AsMultipleItemsは、Tabの直接の子 (ShellContentオブジェクトとFlyoutItem オブジェクト) がそれぞれポップアップに個別のエントリとして表示されることを示します。 これにより、ユーザーはタブを使用するのではなく、ポップアップから任意の子コンテンツに直接移動できます。

タブ ナビゲーションを使用して 1 つのポップアップ エントリの下に関連するページをグループ化する場合は、 AsSingleItem を使用します。 ポップアップ メニューから各ページに直接アクセスできるようにする場合は、 AsMultipleItems を使用します。

Tab プロパティをFlyoutItemに設定すると、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>

この例では、Tab オブジェクトの子であるFlyoutItem オブジェクトと、ShellContent オブジェクトの子であるFlyoutItem オブジェクトに対してポップアップ項目が作成されます。 これは、ShellContent オブジェクトの子である各FlyoutItem オブジェクトが、Tab オブジェクトに自動的にラップされるために発生します。 さらに、最後の ShellContent オブジェクトに対してポップアップ項目が作成され、 Tab オブジェクトに自動的にラップされた後、 FlyoutItem オブジェクトにラップされます。

これにより、次のポップアップ項目が表示されます。

FlyoutItem の外観を定義する

各 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 オブジェクトのタイトルを斜体で表示します。

Shell.ItemTemplateは添付プロパティであるため、異なるテンプレートを特定のFlyoutItem オブジェクトにアタッチできます。

さらに、シェルには、 FlyoutItem オブジェクトに自動的に適用される 3 つのスタイル クラスが含まれています。 詳細については、「 Style FlyoutItem オブジェクトと MenuItem オブジェクト」を参照してください。

FlyoutItems の既定のテンプレート

各DataTemplateに使用される既定のFlyoutItemを次に示します。

<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>

このテンプレートは、既存のポップアップ レイアウトを変更するための基礎として使用できます。また、ポップアップ項目に実装されている表示状態も表示されます。

さらに、 Grid、 Image、および Label 要素はすべて x:Name 値を持つため、Visual State Manager を使用して対象にすることができます。 詳細については、「 複数の要素の状態を設定する」を参照してください。

フライアウト コンテンツを置き換える

ポップアップ の内容を表すポップアップ項目は、必要に応じて、バインド可能な 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 コレクション内の各項目のタイトルを表示するFlyoutItemsに置き換えられます。

または、Shell.FlyoutContentTemplateDataTemplate にバインド可能なプロパティを設定することによって、フライアウト コンテンツを定義できます。

<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>

メニュー項目

メニュー項目は必要に応じてポップアップに追加でき、各メニュー項目は MenuItem オブジェクトによって表されます。 ポップアップ上の MenuItem オブジェクトの位置は、シェルビジュアル階層内での宣言順序によって異なります。 したがって、MenuItemオブジェクトの前に宣言されたFlyoutItemオブジェクトは、ポップアップ内のFlyoutItem オブジェクトの前に表示され、MenuItem オブジェクトの後に宣言されたFlyoutItemオブジェクトは、ポップアップ内の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 オブジェクトは、ICommandという名前のHelpCommandを実行し、システム Web ブラウザーの CommandParameter プロパティで指定された URL を開きます。

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 オブジェクトのタイトルを斜体で表示します。

Shell.MenuItemTemplateは添付プロパティであるため、異なるテンプレートを特定のMenuItem オブジェクトにアタッチできます。

FlyoutItem オブジェクトの既定のテンプレートは、MenuItem オブジェクトにも使用できます。 詳細については、「 FlyoutItems の既定のテンプレート」を参照してください。

FlyoutItem オブジェクトと MenuItem オブジェクトのスタイルを設定する

シェルには、 FlyoutItem オブジェクトと MenuItem オブジェクトに自動的に適用される 3 つのスタイル クラスが含まれています。 スタイル クラス名は、 FlyoutItemLabelStyle、 FlyoutItemImageStyle、および FlyoutItemLayoutStyleです。

次の 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 オブジェクトに自動的に適用されます。

さらに、カスタム スタイル クラスを定義し、 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>

これにより、次のポップアップ ヘッダーが作成されます。

または、DataTemplateをバインド可能なプロパティShell.FlyoutHeaderTemplateに設定することで、フライアウト ヘッダーの外観を定義できます。

<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.FlyoutHeaderBehaviorFlyoutHeaderBehavior列挙メンバーのいずれかに設定することで、この動作を変更できます。

• Default – プラットフォームの既定の動作が使用されることを示します。 これは、FlyoutHeaderBehavior プロパティの既定値です。
• Fixed – ポップアップ ヘッダーが常に表示され、変更されていないことを示します。
• Scroll – ユーザーが項目をスクロールすると、ポップアップ ヘッダーがビュー外にスクロールすることを示します。
• CollapseOnScroll – ユーザーが項目をスクロールすると、フライアウトヘッダーがタイトルのみになることを示します。

次の例は、ユーザーがスクロールするとポップアップ ヘッダーを折りたたむ方法を示しています。

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

フライアウト フッター

フライアウト フッターは、必要に応じてフライアウトの下部に表示されるコンテンツであり、その外観は、Shell.FlyoutFooter というバインド可能なプロパティで設定できる object によって定義されます。

<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>

これにより、次のフライアウト フッターが表示されます。

または、ポップアップ フッターの外観を定義するには、 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.FlyoutIcon型のバインド可能なプロパティImageSource適切なアイコンに設定することで変更できます。

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

フライアウトの背景

ポップアップの背景色は、バインド可能な Shell.FlyoutBackgroundColor プロパティで設定できます。

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

または、バインド可能なプロパティShell.FlyoutBackgroundBrushに設定することで、ポップアップの背景を指定できます。

<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型のバインド可能なプロパティAspectAspect列挙メンバーのいずれかに設定することで構成できます。

• AspectFill - 縦横比を維持しながら表示領域を埋めるように画像をクリップします。
• AspectFit - イメージが表示領域に収まるように、イメージが幅または高さのどちらであるかに応じて上部または下部または側面に空白スペースが追加されるように、イメージをレターボックス化します。 これは、FlyoutBackgroundImageAspect プロパティの既定値です。
• Fill - 表示領域を完全かつ正確に塗りつぶすために画像を拡大します。 これにより、画像が歪む可能性があります。

次の例は、これらのプロパティの設定を示しています。

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

これにより、ポップアップ ヘッダーの下のポップアップに背景画像が表示されます。

フライアウトの背景

ポップアップ オーバーレイの外観であるポップアップの背景は、 Shell.FlyoutBackdrop 添付プロパティを Brushに設定することで指定できます。

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

この例では、ポップアップの背景は銀色の SolidColorBrushで塗りつぶされています。

次の例は、ポップアップの背景を 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 – ポップアップをユーザーが開いたり閉じたりできることを示します。 これは、FlyoutBehavior プロパティの既定値です。
• Locked – ポップアップをユーザーが閉じることができないことを示し、コンテンツが重複していないことを示します。

次の例は、ポップアップを無効にする方法を示しています。

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

フライアウトの垂直スクロール

既定では、ポップアップ項目がポップアップに収まらない場合は、ポップアップを垂直方向にスクロールできます。 この動作は、バインド可能なプロパティShell.FlyoutVerticalScrollModeScrollMode列挙メンバーのいずれかに設定することで変更できます。

• Disabled – 垂直スクロールが無効であることを示します。
• Enabled – 垂直スクロールが有効になっていることを示します。
• Auto – ポップアップ項目がポップアップに収まらない場合に垂直スクロールが有効であることを示します。 これは、FlyoutVerticalScrollMode プロパティの既定値です。

次の例は、垂直スクロールを無効にする方法を示しています。

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

FlyoutItemの選択

ポップアップを使用するシェル アプリを最初に実行すると、サブクラス化された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 の可視性

フライアウト項目は、デフォルトでフライアウトに表示されます。 ただし、項目は、 FlyoutItemIsVisible プロパティを使用してポップアップで非表示にしたり、 IsVisible プロパティを使用してポップアップから削除したりすることができます。

• FlyoutItemIsVisibleは、 bool型で、項目がポップアップで非表示になっているが、 GoToAsync ナビゲーション メソッドを使用して到達可能かどうかを示します。 このプロパティの既定値は trueです。
• IsVisibleは、 bool型で、項目をビジュアル ツリーから削除する必要があり、ポップアップに表示されないかどうかを示します。 既定値は true です。

次の例は、ポップアップ内の項目を非表示にする方法を示しています。

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

ポップアップをプログラムで開いて閉じる

ポップアップをプログラムで開いたり閉じたりするには、バインド可能な Shell.FlyoutIsPresented プロパティを、ポップアップが現在開いているかどうかを示す boolean 値に設定します。

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

または、コードでこれを実行できます。

Shell.Current.FlyoutIsPresented = false;