Wysuwane menu .NET MAUI Shell

Przeglądanie przykładu

Środowisko nawigacji zapewniane przez powłokę interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) jest oparte na oknach wysuwanych i kartach. Menu wysuwane to opcjonalne menu główne aplikacji powłoki (Shell) i jest w pełni konfigurowalne. Jest on dostępny za pośrednictwem ikony lub przesuwając palcem z boku ekranu. Menu wysuwane składa się z opcjonalnego nagłówka, elementów wysuwanych, opcjonalnych elementów menu i opcjonalnej stopki:

Elementy wysuwane

Do menu rozwijanego można dodać co najmniej jeden element, a każdy element w menu rozwijanym jest reprezentowany przez obiekt FlyoutItem. Każdy FlyoutItem obiekt powinien być elementem podrzędnym podklasowanego Shell obiektu. Elementy rozwijane są wyświetlane w górnej części menu rozwijanego, gdy nagłówka nie ma.

W poniższym przykładzie zostanie utworzone okno wysuwane zawierające dwa elementy wysuwane:

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

Właściwość FlyoutItem.Title typu stringdefiniuje tytuł elementu wysuwanego. Właściwość FlyoutItem.Icon typu ImageSourcedefiniuje ikonę elementu wysuwanego:

W tym przykładzie dostęp do każdego ShellContent obiektu można uzyskać tylko poprzez wysuwane elementy, a nie za pomocą kart. Jest to spowodowane tym, że domyślnie karty będą wyświetlane tylko wtedy, gdy element rozwijany zawiera więcej niż jedną kartę.

Powłoka ma niejawne operatory konwersji, które umożliwiają uproszczenie hierarchii wizualnej powłoki bez wprowadzania dodatkowych widoków do drzewa wizualnego. Jest to możliwe, ponieważ podklasowany Shell obiekt może zawierać tylko FlyoutItem obiekty lub TabBar obiekt, który może zawierać tylko Tab obiekty, które mogą zawierać tylko ShellContent obiekty. Te niejawne operatory konwersji mogą służyć do usuwania FlyoutItem obiektów i Tab z poprzedniego przykładu:

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

Ta niejawna konwersja automatycznie opakowuje każdy ShellContent obiekt w Tab obiektach, które są opakowane w FlyoutItem obiekty.

Opcje wyświetlania wysuwane

Właściwość FlyoutItem.FlyoutDisplayOptions konfiguruje sposób wyświetlania elementu wysuwanego i jego elementów podrzędnych w menu wysuwanym. Ta właściwość powinna być ustawiona na element członkowski ClearButtonVisibility wyliczenia:

• AsSingleItem, wskazuje, że FlyoutItem będzie widoczny jako pojedynczy wpis w wysuwanym oknie, niezależnie od liczby podrzędnych elementów Tab lub ShellContent, które zawiera. Po wybraniu zostanie wyświetlona pierwsza zawartość podrzędna, a użytkownicy mogą przełączać się między elementami podrzędnymi przy użyciu kart (jeśli istnieje więcej niż jedno dziecko). Jest to wartość domyślna FlyoutDisplayOptions właściwości.
• AsMultipleItems, wskazuje, że bezpośrednie elementy podrzędne obiekty Tab i ShellContent elementu FlyoutItem będą wyświetlane jako oddzielne wpisy w panelu rozwijanym. Dzięki temu użytkownicy mogą przechodzić bezpośrednio do dowolnej zawartości podrzędnej z poziomu elementu rozwijanego, zamiast korzystać z kart.

Użyj AsSingleItem polecenia, jeśli chcesz zgrupować powiązane strony w ramach jednego menu rozwijanego z nawigacją przy użyciu kart. Użyj AsMultipleItems, aby każda strona była dostępna bezpośrednio z wysuwanego menu.

Element wysuwany dla każdego Tab obiektu w obiekcie FlyoutItem można wyświetlić, ustawiając FlyoutItem.FlyoutDisplayOptions właściwość na 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>

W tym przykładzie elementy wysuwane są tworzone dla Tab obiektu, który jest obiektem podrzędnym FlyoutItem obiektu oraz dla ShellContent obiektów, które są obiektami podrzędnymi FlyoutItem obiektu. Dzieje się tak, ponieważ każdy obiekt będący dzieckiem obiektu FlyoutItem jest automatycznie owinięty w obiekt Tab. Ponadto element wysuwany jest tworzony dla obiektu końcowego ShellContent, który jest automatycznie owiniety przez Tab obiekt, a następnie przez FlyoutItem obiekt.

Spowoduje to wyświetlenie następujących elementów rozwijanych:

Definiowanie wyglądu flyoutItem

Wygląd każdego FlyoutItem można dostosować, ustawiając właściwość dołączoną Shell.ItemTemplate na 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>

W tym przykładzie zostanie wyświetlony tytuł każdego FlyoutItem obiektu w kursywie:

Ponieważ Shell.ItemTemplate jest dołączoną właściwością, różne szablony można dołączyć do określonych FlyoutItem obiektów.

Ponadto Shell zawiera trzy klasy stylów, które są automatycznie stosowane do FlyoutItem obiektów. Aby uzyskać więcej informacji, zobacz obiekty Style FlyoutItem i MenuItem.

Domyślny szablon flyoutItems

Poniżej przedstawiono wartość domyślną DataTemplate używaną dla każdego FlyoutItem z nich:

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

Ten szablon może służyć jako podstawa do wprowadzania zmian w istniejącym układzie rozwijanym, a także pokazuje stany wizualne implementowane dla elementów rozwijanych.

Ponadto wszystkie Gridelementy , Imagei Label mają x:Name wartości, a więc mogą być przeznaczone dla programu Visual State Manager. Aby uzyskać więcej informacji, zobacz Ustawianie stanu na wielu elementach.

Zamień zawartość rozwijanego menu

Elementy rozwijane, które reprezentują treść rozwijaną, można opcjonalnie zastąpić własną treścią, ustawiając właściwość powiązywalną Shell.FlyoutContent z elementem typu 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>

W tym przykładzie zawartość wysuwanego elementu jest zastępowana symbolem CollectionView, który wyświetla tytuł każdego elementu w kolekcji FlyoutItems.

Alternatywnie, zawartość wysuwaną można zdefiniować, ustawiając powiązywalną właściwość Shell.FlyoutContentTemplate na 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>

Elementy menu

Elementy menu można opcjonalnie dodać do wysuwanego menu, a każdy element menu jest reprezentowany przez obiekt MenuItem. Położenie elementów MenuItem na panelu rozwijanym zależy od ich kolejności deklaracji w hierarchii wizualnej Powłoki. W związku z tym wszystkie MenuItem obiekty zadeklarowane przed FlyoutItem obiektami pojawią się przed FlyoutItem obiektami w oknie wysuwanym, a wszystkie MenuItem obiekty zadeklarowane po FlyoutItem obiektach pojawią się po FlyoutItem obiektach w oknie wysuwanym.

Klasa MenuItem ma Clicked zdarzenie i Command właściwość . MenuItem Dlatego obiekty umożliwiają scenariusze, które wykonują akcję w odpowiedzi na dotknięcie MenuItem.

MenuItem obiekty można dodać do panelu wysuwanego, jak pokazano w poniższym przykładzie:

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

W tym przykładzie do MenuItem wysuwanego elementu zostanie dodany obiekt znajdujący się pod wszystkimi elementami wysuwanymi:

Obiekt MenuItem wykonuje ICommand o nazwie HelpCommand, która otwiera adres URL określony we właściwości CommandParameter w systemowej przeglądarce internetowej.

Zdefiniuj wygląd elementu menu

Wygląd każdego MenuItem można dostosować, ustawiając dołączoną właściwość Shell.MenuItemTemplate na 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>

Ten przykład dołącza DataTemplate do każdego obiektu MenuItem, wyświetlając tytuł obiektu MenuItem pochyłym drukiem.

Ponieważ Shell.MenuItemTemplate jest dołączoną właściwością, różne szablony można dołączyć do określonych MenuItem obiektów.

Domyślny szablon obiektów FlyoutItem może być również używany dla MenuItem obiektów. Aby uzyskać więcej informacji, zobacz Szablon domyślny dla elementu FlyoutItems.

Stylizuj obiekty FlyoutItem i MenuItem

Powłoka zawiera trzy klasy stylów, które są automatycznie stosowane do obiektów FlyoutItem i MenuItem. Nazwy klas stylów to FlyoutItemLabelStyle, FlyoutItemImageStylei FlyoutItemLayoutStyle.

Poniższy kod XAML przedstawia przykład definiowania stylów dla tych klas stylów:

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

Te style zostaną automatycznie zastosowane do obiektów FlyoutItem i MenuItem, bez konieczności ustawiania ich właściwości StyleClass na nazwy klas stylów.

Ponadto niestandardowe klasy stylów można definiować i stosować do obiektów FlyoutItem i MenuItem. Aby uzyskać więcej informacji na temat klas stylów, zobacz Klasy stylów.

Nagłówek rozwijany

Nagłówek wysuwany to element opcjonalnie wyświetlany na górze wysuwanego menu, którego wygląd jest zdefiniowany przez element object, który można ustawić za pomocą właściwości Shell.FlyoutHeader przeznaczonej do powiązania.

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

Typ FlyoutHeader jest wyświetlany w poniższym przykładzie:

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

Wynikiem tego będzie następujący nagłówek wysuwany:

Alternatywnie można zdefiniować wygląd nagłówka wysuwanego przez ustawienie właściwości możliwej Shell.FlyoutHeaderTemplate do powiązania z elementem 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>

Domyślnie nagłówek wysuwanego menu pozostanie nieruchomy, podczas gdy zawartość poniżej będzie przewijana, jeśli elementów jest wystarczająco dużo. Można jednak zmienić to zachowanie, ustawiając właściwość powiązywalną Shell.FlyoutHeaderBehavior na jeden z członków wyliczenia FlyoutHeaderBehavior.

• Default — wskazuje, że będzie używane domyślne zachowanie platformy. Jest to wartość domyślna FlyoutHeaderBehavior właściwości.
• Fixed — wskazuje, że nagłówek rozwijany pozostaje widoczny i niezmieniony cały czas.
• Scroll — wskazuje, że nagłówek wyskakujący opuszcza widok, gdy użytkownik przewija elementy.
• CollapseOnScroll — wskazuje, że nagłówek rozwijany zwija się do samego tytułu podczas przewijania przez użytkownika elementów.

W poniższym przykładzie pokazano, jak zwinąć nagłówek wysuwany, gdy użytkownik przewija.

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

Stopka rozwijana

Stopka panelu wysuwanego to zawartość, która opcjonalnie pojawia się w dolnej części panelu, a jej wygląd jest zdefiniowany przez element object , który można ustawić przy użyciu właściwości wiązanej Shell.FlyoutFooter.

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

Typ FlyoutFooter jest wyświetlany w poniższym przykładzie:

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

Spowoduje to wyświetlenie następującej stopki menu wysuwanego:

Alternatywnie można zdefiniować wygląd stopki wysuwanej, ustawiając Shell.FlyoutFooterTemplate właściwość na DataTemplate wartość:

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

Stopka w wysuwanym menu jest przymocowana na stałe do jego dolnej krawędzi i może mieć dowolną wysokość. Ponadto stopka nigdy nie zasłania żadnych elementów menu.

Szerokość i wysokość okienka

Szerokość i wysokość okna wysuwanego można dostosować, ustawiając dołączone właściwości Shell.FlyoutWidth i Shell.FlyoutHeight na wartości double.

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

Umożliwia to takie scenariusze jak rozszerzanie wysuwanego okna na całym ekranie lub zmniejszenie wysokości wysuwanego okna, dzięki czemu nie zasłania paska kart.

Ikona rozwijanego menu

Domyślnie aplikacje powłoki mają ikonę hamburgera, która po naciśnięciu przycisku otwiera okno wysuwane. Istnieje możliwość zmiany tej ikony poprzez ustawienie powiązanej właściwości Shell.FlyoutIcon typu ImageSource na odpowiednią ikonę:

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

Tło rozwijane

Kolor tła wysuwanego okna można ustawić za pomocą wiązalnej właściwości Shell.FlyoutBackgroundColor.

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

Alternatywnie można określić tło wysuwanego elementu, ustawiając Shell.FlyoutBackground właściwość powiązaną z elementem Brush:

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

W tym przykładzie wysuwane tło jest pomalowane jasnoszarym SolidColorBrush.

W poniższym przykładzie pokazano ustawienie tła wysuwanego na wartość 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>

Aby uzyskać więcej informacji na temat pędzli, zobacz .NET MAUI Brushes.

Obraz tła rozwijanego panelu

Wysuwane okno może zawierać opcjonalny obraz tła, który pojawia się pod nagłówkiem okna i za dowolnymi elementami okna, elementami menu i stopką. Obraz tła można określić, ustawiając FlyoutBackgroundImage wiązalną właściwość typu ImageSource, na plik, zasób osadzony, identyfikator URI lub strumień danych.

Współczynnik proporcji obrazu tła można skonfigurować, ustawiając powiązaną właściwość FlyoutBackgroundImageAspect typu Aspect na jeden z elementów wyliczenia Aspect.

• AspectFill — przycina obraz tak, aby wypełniał obszar wyświetlania przy zachowaniu współczynnika proporcji.
• AspectFit - dopasowuje obraz do obszaru wyświetlania, dodając puste miejsce na górze/dole lub po bokach w zależności od tego, czy obraz jest szerszy, czy wyższy. Jest to wartość domyślna FlyoutBackgroundImageAspect właściwości.
• Fill — rozciąga obraz do całkowitego i dokładnie wypełnienia obszaru wyświetlania. Może to spowodować zniekształcenie obrazu.

W poniższym przykładzie pokazano ustawienie tych właściwości:

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

Spowoduje to wyświetlenie obrazu tła w oknie wysuwanym poniżej nagłówka wysuwanego:

Tło wysuwane

Tło okna wysuwanego, czyli wygląd jego nakładki, można określić, ustawiając dołączoną właściwość Shell.FlyoutBackdrop na element Brush.

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

W tym przykładzie tło wysuwanego panelu jest pomalowane na srebrno SolidColorBrush.

W poniższym przykładzie pokazano, jak ustawić tło wysuwane na wartość 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>

Aby uzyskać więcej informacji na temat pędzli, zobacz .NET MAUI Brushes.

Zachowanie okna wysuwanego

Dostęp do wysuwanego menu można uzyskać za pośrednictwem ikony hamburgera lub przesuwając palcem od boku ekranu. To zachowanie można jednak zmienić, ustawiając dołączoną Shell.FlyoutBehavior właściwość na jeden z FlyoutBehavior elementów członkowskich wyliczenia:

• Disabled — wskazuje, że użytkownik nie może otworzyć wysuwanego okna.
• Flyout — wskazuje, że użytkownik może otwierać i zamykać okno wysuwane. Jest to wartość domyślna ClearButtonVisibility właściwości .
• Locked — wskazuje, że okno wysuwane nie może zostać zamknięte przez użytkownika i że nie nakłada się na zawartość.

W poniższym przykładzie pokazano, jak wyłączyć okno wysuwane:

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

Pionowe przewijanie panelu wysuwanego

Domyślnie okno wysuwane można przewijać w pionie, gdy elementy wysuwane nie mieszczą się w wysuwanym oknie. To zachowanie można zmienić, ustawiając wiążącą właściwość Shell.FlyoutVerticalScrollMode na jednego z członków wyliczenia ScrollMode.

• Disabled — wskazuje, że przewijanie w pionie zostanie wyłączone.
• Enabled — wskazuje, że przewijanie w pionie zostanie włączone.
• Auto — oznacza, że przewijanie w pionie zostanie włączone, jeśli elementy menu rozwijanego nie mieszczą się w menu rozwijanym. Jest to wartość domyślna FlyoutVerticalScrollMode właściwości.

W poniższym przykładzie pokazano, jak wyłączyć przewijanie w pionie:

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

Wybór elementu rozwijanego

Gdy aplikacja Shell, która korzysta z wysuwanego okienka, jest uruchamiana po raz pierwszy, Shell.CurrentItem właściwość zostanie ustawiona na pierwszy FlyoutItem obiekt w obiekcie podklasy Shell. Można jednak ustawić właściwość na inną FlyoutItem, jak pokazano w poniższym przykładzie:

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

W tym przykładzie właściwość CurrentItem ustawia się na obiekt ShellContent o nazwie aboutItem, co powoduje jego wybranie i wyświetlenie. W tym przykładzie, niejawna konwersja jest używana do opakowania obiektu ShellContent w obiekt Tab, który jest następnie owinięty w obiekt FlyoutItem.

Równoważny kod języka C#, biorąc pod uwagę ShellContent obiekt o nazwie aboutItem, to:

CurrentItem = aboutItem;

W tym przykładzie CurrentItem właściwość jest ustawiana w klasie podklasowej Shell . Alternatywnie, można ustawić właściwość CurrentItem w dowolnej klasie za pomocą statycznej właściwości Shell.Current.

Shell.Current.CurrentItem = aboutItem;

Widoczność elementu FlyoutItem

Elementy w menu rozwijanym są domyślnie widoczne. Jednak element może być ukryty w menu rozwijanym z właściwością FlyoutItemIsVisible i usunięty z menu rozwijanego z właściwością IsVisible:

• FlyoutItemIsVisible, typu bool, wskazuje, czy element jest ukryty w wysuwanym oknie, ale nadal jest osiągalny za pomocą metody nawigacji GoToAsync. Wartość domyślna tej właściwości to true.
• IsVisible, typu bool, wskazuje, czy element powinien zostać usunięty z drzewa wizualizacji i dlatego nie pojawia się w wysuwanym menu. Jego wartością domyślną jest true.

W poniższym przykładzie pokazano ukrywanie elementu w wyskakującym menu:

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

Programowe otwieranie i zamykanie okna wysuwanego

Okno wysuwane może być otwierane i zamykane programowo przez ustawienie powiązywanej właściwości Shell.FlyoutIsPresented na wartość boolean, która wskazuje, czy okno wysuwane jest aktualnie otwarte.

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

Alternatywnie można to wykonać w kodzie:

Shell.Current.FlyoutIsPresented = false;