Painel deslizante do .NET MAUI Shell

Navegar na amostra

A experiência de navegação fornecida pelo Shell da interface do usuário de aplicativo multiplataforma do .NET (.NET MAUI) é baseada em submenus e guias. Um flyout é o menu principal opcional para um aplicativo de Shell e é totalmente personalizável. Ele é acessível por meio de um ícone ou deslizando do lado da tela. O submenu consiste em um cabeçalho opcional, itens de submenu, itens de menu opcionais e um rodapé opcional:

Itens de submenu

Um ou mais itens de flyout podem ser adicionados ao flyout, e cada item de flyout é representado por um objeto FlyoutItem. Cada FlyoutItem objeto deve ser um filho do objeto subclasse Shell . Os itens de flyout aparecem na parte superior do flyout quando um cabeçalho de flyout não está presente.

O exemplo a seguir cria um flyout contendo dois itens de flyout:

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

A FlyoutItem.Title propriedade, do tipo string, define o título do item de submenu. A FlyoutItem.Icon propriedade, do tipo ImageSource, define o ícone do item de submenu:

Neste exemplo, cada objeto ShellContent só pode ser acessado por meio de itens de menu flutuante, e não por meio de guias. Isso ocorre porque, por padrão, as guias só serão exibidas se o item de submenu contiver mais de uma guia.

O Shell tem operadores de conversão implícita que permitem que a hierarquia visual do Shell seja simplificada, sem introduzir exibições adicionais na árvore visual. Isso é possível porque um objeto subclasse Shell só pode conter FlyoutItem objetos ou um TabBar objeto, que só pode conter Tab objetos, que só podem conter ShellContent objetos. Esses operadores de conversão implícita podem ser usados para remover os objetos FlyoutItem e Tab do exemplo anterior.

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

Essa conversão implícita encapsula automaticamente cada ShellContent objeto em Tab objetos, que são encapsulados em FlyoutItem objetos.

Opções de exibição de menu expansível

A propriedade FlyoutItem.FlyoutDisplayOptions configura como um item de flyout e seus elementos filhos são exibidos no flyout. Essa propriedade deve ser definida como um membro de enumeração FlyoutDisplayOptions:

• AsSingleItem, indica que o FlyoutItem será visível como uma única entrada no flyout, independentemente do número de objetos Tab ou ShellContent que ele contenha. Quando selecionado, o primeiro conteúdo filho é exibido e os usuários podem alternar entre crianças usando guias (se houver mais de um filho). Este é o valor padrão da propriedade FlyoutDisplayOptions.
• AsMultipleItems, indica que os filhos diretos (Tab e ShellContent objetos) de FlyoutItem aparecerão como entradas separadas no menu flutuante. Isso permite que os usuários naveguem diretamente para qualquer conteúdo filho do submenu, em vez de precisarem usar guias.

Use AsSingleItem quando quiser agrupar páginas relacionadas em uma única entrada suspensa com navegação por abas. Utilize AsMultipleItems quando quiser que cada página seja diretamente acessível no menu suspenso.

Um item de submenu para cada Tab objeto dentro de um FlyoutItem pode ser exibido definindo a FlyoutItem.FlyoutDisplayOptions propriedade como 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>

Neste exemplo, itens de flyout são criados para o objeto Tab que é filho do objeto FlyoutItem e para os objetos ShellContent que são filhos do objeto FlyoutItem. Isso ocorre porque cada ShellContent objeto que é filho do FlyoutItem objeto é automaticamente encapsulado em um Tab objeto. Além disso, um item de flyout é criado para o objeto final ShellContent, que é automaticamente encapsulado em um objeto Tab e depois em um objeto FlyoutItem.

Isso resulta nos seguintes itens de submenu:

Definir a aparência do FlyoutItem

A aparência de cada um FlyoutItem pode ser personalizada definindo a Shell.ItemTemplate propriedade anexada como :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>

Este exemplo exibe o título de cada FlyoutItem objeto em itálico:

Como Shell.ItemTemplate é uma propriedade anexada, modelos diferentes podem ser anexados a objetos específicos FlyoutItem .

Além disso, o Shell inclui três classes de estilo, que são aplicadas automaticamente a FlyoutItem objetos. Para obter mais informações, consulte os objetos Style FlyoutItem e MenuItem.

Modelo padrão para FlyoutItems

O padrão DataTemplate usado para cada um FlyoutItem é mostrado abaixo:

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

Esse modelo pode ser usado como base para fazer alterações no layout de submenu existente e também mostra os estados visuais implementados para itens de submenu.

Além disso, os elementos Grid, Image e Label todos têm valores x:Name e portanto, podem ser alvo com o Visual State Manager. Para obter mais informações, consulte Definir estado em vários elementos.

Substituir o conteúdo do menu suspenso

Os itens de submenu, que representam o conteúdo do submenu, podem, opcionalmente, ser substituídos pelo seu próprio conteúdo, definindo a propriedade vinculável Shell.FlyoutContent como 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>

Neste exemplo, o conteúdo do submenu é substituído por um CollectionView que exibe o título de cada item na coleção FlyoutItems.

Como alternativa, o conteúdo do submenu pode ser definido definindo a Shell.FlyoutContentTemplate propriedade associável como :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>

Itens de menu

Os itens de menu podem ser adicionados opcionalmente a um flyout, e cada item de menu é representado por um objeto MenuItem. A posição dos MenuItem objetos no submenu depende de sua ordem de declaração na hierarquia visual do Shell. Portanto, qualquer MenuItem objeto declarado antes de FlyoutItem aparecerá antes dos FlyoutItem objetos no flyout, e qualquer MenuItem objeto declarado após FlyoutItem aparecerá após os FlyoutItem objetos no flyout.

A MenuItem classe tem um Clicked evento e uma Command propriedade. Portanto, MenuItem os objetos permitem cenários que, em resposta ao toque no MenuItem, executam uma ação.

MenuItem objetos podem ser adicionados ao flyout, conforme mostrado no exemplo a seguir:

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

Este exemplo adiciona um MenuItem objeto ao flyout, abaixo de todos os itens do flyout:

O MenuItem objeto executa um ICommand denominado HelpCommand, que abre a URL especificada, pela propriedade CommandParameter, no navegador da web do sistema.

Definir a aparência de MenuItem

A aparência de cada um MenuItem pode ser personalizada definindo a Shell.MenuItemTemplate propriedade anexada como :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>

Este exemplo anexa o DataTemplate a cada objeto MenuItem, exibindo o título do objeto MenuItem em itálico:

Como Shell.MenuItemTemplate é uma propriedade anexada, modelos diferentes podem ser anexados a objetos específicos MenuItem .

O modelo padrão para FlyoutItem objetos também pode ser usado para MenuItem objetos. Para obter mais informações, consulte o modelo padrão para FlyoutItems.

Como estilizar objetos FlyoutItem e MenuItem

O Shell inclui três classes de estilo, que são aplicadas automaticamente aos objetos FlyoutItem e MenuItem. Os nomes de classe de estilo são FlyoutItemLabelStyle, FlyoutItemImageStylee FlyoutItemLayoutStyle.

O XAML a seguir mostra um exemplo de definição de estilos para estas classes de estilo:

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

Esses estilos serão aplicados automaticamente aos objetos FlyoutItem e MenuItem, sem precisar definir suas propriedades StyleClass para os nomes de classe de estilo.

Além disso, classes de estilo personalizadas podem ser definidas e aplicadas aos objetos FlyoutItem e MenuItem. Para obter mais informações sobre classes de estilo, consulte classes style.

Cabeçalho expansível

O cabeçalho do flyout é o conteúdo que, opcionalmente, aparece na parte superior do flyout, com sua aparência sendo definida por um object que pode ser definido com a Shell.FlyoutHeader propriedade vinculável:

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

O FlyoutHeader tipo é mostrado no exemplo a seguir:

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

Isso resulta no seguinte cabeçalho de submenu:

Como alternativa, a aparência do cabeçalho do menu deslizante pode ser especificada configurando a Shell.FlyoutHeaderTemplate propriedade associável para um 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>

Por padrão, o cabeçalho do painel suspenso será mantido fixo no painel, enquanto o conteúdo abaixo será rolável se houver itens suficientes. No entanto, esse comportamento pode ser alterado definindo a propriedade vinculável Shell.FlyoutHeaderBehavior para um dos membros da enumeração FlyoutHeaderBehavior.

• Default – indica que o comportamento padrão da plataforma será usado. Este é o valor padrão da propriedade FlyoutHeaderBehavior.
• Fixed – indica que o cabeçalho de submenu permanece visível e inalterado o tempo todo.
• Scroll – indica que o cabeçalho flutuante sai da tela à medida que o usuário rola os itens.
• CollapseOnScroll – indica que o cabeçalho expansível é recolhido para mostrar apenas o título, à medida que o usuário rola os itens.

O exemplo a seguir mostra como recolher o cabeçalho expansível à medida que o usuário rola:

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

Rodapé de submenu

O rodapé de submenu é o conteúdo que, opcionalmente, aparece na parte inferior do submenu, com sua aparência sendo definida por um object que pode ser definido com a Shell.FlyoutFooter propriedade associável:

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

O FlyoutFooter tipo é mostrado no exemplo a seguir:

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

Isso resulta no seguinte rodapé de submenu:

Como alternativa, a aparência do rodapé de submenu pode ser ajustada configurando a propriedade Shell.FlyoutFooterTemplate para um 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>

O rodapé do submenu é fixo na parte inferior do submenu e pode ter qualquer altura. Além disso, o rodapé nunca obscurece nenhum item de menu.

Largura e altura do painel flutuante

A largura e a altura do submenu podem ser personalizadas definindo as propriedades anexadas Shell.FlyoutWidth e Shell.FlyoutHeight para valores double.

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

Isso permite cenários como expandir a janela suspensa por toda a tela ou reduzir a altura da janela suspensa para que ela não obscureça a barra de abas.

Ícone de flyout

Por padrão, os aplicativos Shell têm um ícone de hambúrguer que, quando pressionado, abre uma janela deslizante. Esse ícone pode ser alterado definindo a Shell.FlyoutIcon propriedade associável, do tipo ImageSource, para um ícone apropriado:

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

Plano de fundo do menu pop-up

A cor de fundo do flyout pode ser definida com a propriedade vinculável Shell.FlyoutBackgroundColor.

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

Como alternativa, o fundo do flyout pode ser especificado definindo a propriedade associável Shell.FlyoutBackground para um Brush

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

Neste exemplo, o plano de fundo do submenu é pintado com um cinza claro SolidColorBrush.

O exemplo a seguir mostra como definir a tela de fundo do submenu como um 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>

Para obter mais informações sobre pincéis, consulte Pincéis MAUI do .NET.

Imagem de plano de fundo do flyout

O flyout pode ter uma imagem de plano de fundo opcional, que aparece sob o cabeçalho do flyout e atrás de quaisquer itens do flyout, itens de menu e o rodapé do flyout. A imagem de plano de fundo pode ser especificada definindo a FlyoutBackgroundImage propriedade associável, do tipo ImageSource, como um arquivo, recurso inserido, URI ou fluxo.

A relação de aspecto da imagem de plano de fundo pode ser configurada definindo a FlyoutBackgroundImageAspect propriedade associável, do tipo Aspect, como um dos membros da enumeração Aspect.

• AspectFill - ajusta a imagem de forma que ela preencha a área de exibição, preservando a proporção.
• AspectFit – adiciona barras à imagem, se necessário, para que a imagem se ajuste à área de exibição, com espaço em branco adicionado à parte superior/inferior ou laterais, dependendo se a imagem é larga ou alta. Este é o valor padrão da propriedade FlyoutBackgroundImageAspect.
• Fill - estende a imagem para preencher completamente e exatamente a área de exibição. Isso pode resultar em distorção de imagem.

O exemplo a seguir mostra como definir essas propriedades:

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

Isso resulta em uma imagem de plano de fundo aparecendo no flyout, abaixo do cabeçalho do flyout.

Fundo de flyout

O pano de fundo do submenu, que é a aparência da sobreposição do submenu, pode ser especificado definindo a Shell.FlyoutBackdrop propriedade anexada como :Brush

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

Neste exemplo, o fundo do menu é pintado com uma cor prata SolidColorBrush.

O exemplo a seguir mostra a configuração do plano de fundo de sobreposição para um 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>

Para obter mais informações sobre pincéis, consulte Pincéis MAUI do .NET.

Comportamento do flyout

O submenu pode ser acessado por meio do ícone de hambúrguer ou deslizando do lado da tela. No entanto, esse comportamento pode ser alterado definindo a Shell.FlyoutBehavior propriedade associada para um dos membros da FlyoutBehavior enumeração:

• Disabled – indica que o painel deslizante não pode ser aberto pelo usuário.
• Flyout – indica que o flyout pode ser aberto e fechado pelo usuário. Este é o valor padrão para a propriedade de FlyoutBehavior .
• Locked – indica que o submenu não pode ser fechado pelo usuário e que ele não se sobrepõe ao conteúdo.

O exemplo a seguir mostra como desabilitar o flyout:

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

Rolagem vertical do menu suspenso

Por padrão, um submenu pode ser rolado verticalmente quando os itens de submenu não se encaixam no submenu. Esse comportamento pode ser alterado definindo a Shell.FlyoutVerticalScrollMode propriedade associável para um dos membros de ScrollMode enumeração:

• Disabled – indica que a rolagem vertical será desabilitada.
• Enabled – indica que a rolagem vertical será habilitada.
• Auto – indica que a rolagem vertical será habilitada se os itens do flyout não couberem no flyout. Este é o valor padrão da propriedade FlyoutVerticalScrollMode.

O exemplo a seguir mostra como desabilitar a rolagem vertical:

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

Seleção de FlyoutItem

Quando um aplicativo Shell que usa uma janela suspensa for executado pela primeira vez, a Shell.CurrentItem propriedade será definida como o primeiro FlyoutItem objeto no objeto subclassificado Shell. No entanto, a propriedade pode ser definida como outra FlyoutItem, conforme mostrado no exemplo a seguir:

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

Este exemplo define a propriedade CurrentItem para o objeto ShellContent nomeado aboutItem, o que resulta em sua seleção e exibição. Neste exemplo, uma conversão implícita é usada para encapsular o ShellContent objeto em um Tab objeto, que é encapsulado em um FlyoutItem objeto.

O código C# equivalente, dado um ShellContent objeto chamado aboutItem, é:

CurrentItem = aboutItem;

Neste exemplo, a CurrentItem propriedade é definida na classe subclasse Shell . Como alternativa, a CurrentItem propriedade pode ser definida em qualquer classe por meio da Shell.Current propriedade estática:

Shell.Current.CurrentItem = aboutItem;

Visibilidade do FlyoutItem

Os itens do flyout são visíveis no flyout por padrão. No entanto, um item pode ser oculto no menu expansível com a FlyoutItemIsVisible propriedade e removido do menu expansível com a IsVisible propriedade.

• O FlyoutItemIsVisible, do tipo bool, indica se o item está oculto no submenu, mas ainda é acessível com o método de navegação GoToAsync. O valor padrão dessa propriedade é true.
• IsVisible, do tipo bool, indica se o item deve ser removido da árvore visual e, portanto, não aparece no flyout. Seu valor padrão é true.

O exemplo a seguir mostra como ocultar um item no submenu:

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

Abrir e fechar o submenu programaticamente

O painel deslizante pode ser aberto e fechado programaticamente definindo a propriedade vinculável Shell.FlyoutIsPresented para um valor boolean que indica se o painel está aberto no momento:

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

Como alternativa, isso pode ser executado no código:

Shell.Current.FlyoutIsPresented = false;