Flyout do .NET MAUI Shell

Procurar o exemplo

A experiência de navegação fornecida pelo .NET Multi-platform App UI Shell (.NET MAUI) baseia-se em flyouts e separadores. Um flyout é o menu raiz opcional para uma aplicação Shell e é totalmente personalizável. É acessível através de um ícone ou deslizando a partir do lado do ecrã. O flyout consiste num cabeçalho opcional, itens do flyout, itens opcionais do menu e um rodapé opcional:

Itens de menu expansível

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

O exemplo seguinte cria um flyout que contém 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 flyout. A propriedade FlyoutItem.Icon, do tipo ImageSource, define o ícone do item do menu expansível:

Neste exemplo, cada ShellContent objeto só pode ser acedido através de itens de menu suspenso, e não através de separadores. Isto porque, por padrão, os separadores só serão exibidos se o item do flyout contiver mais do que um separador.

O Shell tem operadores de conversão implícitos que permitem simplificar a hierarquia visual do Shell, sem introduzir vistas adicionais na árvore visual. Isto é possível porque um objeto de Shell subclasse só pode conter FlyoutItem objetos ou um TabBar objeto, que, por sua vez, pode conter apenas Tab objetos, os quais só podem conter ShellContent objetos. Estes operadores de conversão implícita podem ser usados para remover os FlyoutItem objetos 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>

Esta conversão implícita envolve automaticamente cada objeto ShellContent em objetos Tab, que são por sua vez envolvidos em objetos FlyoutItem.

Opções de exibição em janela expansível

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

• AsSingleItem, indica que o FlyoutItem aparecerá como uma única entrada no flyout, independentemente de quantos objetos Tab ou ShellContent filho contenha. Quando selecionado, o primeiro conteúdo filho é exibido, e os utilizadores podem alternar entre filhos usando separadores (se existirem mais do que um filho). Este é o valor padrão da FlyoutDisplayOptions propriedade.
• AsMultipleItems, indica que os filhos diretos (objetos Tab e ShellContent) do FlyoutItem irão aparecer cada um como uma entrada separada no flyout. Isto permite aos utilizadores navegar diretamente para qualquer conteúdo filho a partir do flyout, em vez de terem de usar separadores.

Use AsSingleItem quando quiser agrupar páginas relacionadas sob uma única entrada de flyout com navegação por separadores. Usa AsMultipleItems quando quiseres que cada página seja acessível diretamente a partir do menu de flyout.

Um item flyout para cada Tab objeto dentro de um FlyoutItem pode ser apresentado definindo a propriedade FlyoutItem.FlyoutDisplayOptions para 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, os itens flyout são criados para o Tab objeto que é filho do FlyoutItem objeto e para os ShellContent objetos que são filhos do FlyoutItem objeto. Isto acontece porque cada ShellContent objeto que é filho do FlyoutItem objeto é automaticamente encapsulado num Tab objeto. Além disso, é criado um item flyout para o objeto final ShellContent , que é automaticamente enrolado num Tab objeto e depois num FlyoutItem objeto.

Isto resulta nos seguintes itens do menu desdobrável:

Definir a aparência do FlyoutItem

A aparência de cada um FlyoutItem pode ser personalizada definindo a Shell.ItemTemplate propriedade anexa para um 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 mostra o título de cada FlyoutItem objeto em itálico:

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

Além disso, o Shell inclui três classes de estilo, que são automaticamente aplicadas aos FlyoutItem objetos. Para 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>

Este modelo pode ser usado como base para fazer alterações ao layout do flyout existente, e também mostra os estados visuais implementados para itens do flyout.

Além disso, os elementos Grid, Image e Label todos têm valores x:Name e, por isso, podem ser direcionados com o Visual State Manager. Para mais informações, veja Definir estado em múltiplos elementos.

Substituir o conteúdo do menu flutuante

Os itens do flyout, que representam o conteúdo do flyout, podem ser opcionalmente substituídos pelo seu próprio conteúdo, definindo a Shell.FlyoutContent propriedade bindable para um 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 flyout é substituído por um CollectionView que mostra o título de cada item da FlyoutItems coleção.

Alternativamente, o conteúdo do flyout pode ser especificado ao definir a Shell.FlyoutContentTemplate propriedade bindable para um 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 do menu

Os itens do menu podem ser adicionados opcionalmente ao flyout, e cada item do menu é representado por um MenuItem objeto. A posição dos objetos MenuItem no flyout depende da ordem em que são declarados na hierarquia visual do Shell. Portanto, quaisquer objetos MenuItem declarados antes dos objetos FlyoutItem aparecerão antes dos objetos FlyoutItem no flyout, e quaisquer objetos MenuItem declarados após os objetos FlyoutItem aparecerão após os objetos FlyoutItem no flyout.

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

MenuItem Objetos podem ser adicionados ao flyout, como mostrado no seguinte exemplo:

<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, por baixo de todos os itens flyout:

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

Defina a aparência do item do menu

A aparência de cada um MenuItem pode ser personalizada definindo a Shell.MenuItemTemplate propriedade anexa para um 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 MenuItem objeto, exibindo o título do MenuItem objeto em itálico:

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

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

Estilizar os objetos FlyoutItem e MenuItem.

Shell inclui três classes de estilo, que são automaticamente aplicadas a FlyoutItem e MenuItem objetos. Os nomes das classes de estilo são FlyoutItemLabelStyle, FlyoutItemImageStyle, e FlyoutItemLayoutStyle.

O seguinte XAML 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>

Estes estilos serão automaticamente aplicados aos objetos FlyoutItem e MenuItem, sem necessidade de definir as suas propriedades StyleClass com os nomes das classes de estilo.

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

Cabeçalho do painel suspenso

O cabeçalho do flyout é o conteúdo que pode aparecer de forma opcional no topo do flyout, com a sua aparência definida por um object que pode ser configurado através da propriedade vinculável Shell.FlyoutHeader.

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

O FlyoutHeader tipo é mostrado no seguinte exemplo:

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

Isto resulta no seguinte cabeçalho deslizante:

Alternativamente, a aparência do cabeçalho do flyout pode ser definida definindo a Shell.FlyoutHeaderTemplate propriedade bindable 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 flyout será fixo, enquanto o conteúdo abaixo irá rolar se houver itens suficientes. No entanto, este comportamento pode ser alterado configurando a propriedade vinculável Shell.FlyoutHeaderBehavior para um dos FlyoutHeaderBehavior membros da enumeração:

• Default – indica que o comportamento padrão da plataforma será utilizado. Este é o valor padrão da FlyoutHeaderBehavior propriedade.
• Fixed – indica que o cabeçalho do flyout permanece visível e inalterado em todos os momentos.
• Scroll – indica que o cabeçalho do flyout desloca-se para fora de vista enquanto o utilizador desloca os itens.
• CollapseOnScroll – indica que o cabeçalho do flyout colapsa apenas para um título, à medida que o utilizador percorre os itens.

O exemplo seguinte mostra como colapsar o cabeçalho do flyout à medida que o utilizador desloca:

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

Rodapé expansível

O rodapé do flyout é o conteúdo que aparece opcionalmente no final do flyout, e a sua aparência é determinada por um object, configurável através da propriedade Shell.FlyoutFooter bindable.

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

O FlyoutFooter tipo é mostrado no seguinte exemplo:

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

Isto resulta no seguinte flyout footer:

Alternativamente, a aparência do rodapé do flyout pode ser configurada ao definir 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 flyout está fixo na parte inferior do flyout e pode ter qualquer altura. Além disso, o rodapé nunca esconde nenhum item do menu.

Largura e altura do flyout

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

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

Isto permite cenários como expandir o flyout por todo o ecrã, ou reduzir a altura do flyout para que não obscureça a barra de separador.

Ícone de flyout

Por defeito, as aplicações Shell têm um ícone de hambúrguer que, quando pressionado, abre o flyout. Este ícone pode ser alterado definindo a Shell.FlyoutIcon propriedade bindable, do tipo ImageSource, para um ícone apropriado:

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

Contexto do flyout

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

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

Alternativamente, o fundo do flyout pode ser especificado ao definir a Shell.FlyoutBackground propriedade bindable para um Brush:

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

Neste exemplo, o fundo do flyout é pintado com um cinzento claro SolidColorBrush.

O seguinte exemplo mostra como definir o fundo do flyout para 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 mais informações sobre pincéis, consulte .NET MAUI Brushes.

Imagem de fundo do flyout

O flyout pode ter uma imagem de fundo opcional, que aparece por baixo do cabeçalho do flyout e atrás de quaisquer itens do flyout, itens do menu e do rodapé do flyout. A imagem de fundo pode ser especificada ao definir a propriedade vinculável FlyoutBackgroundImage, do tipo ImageSource, para um ficheiro, recurso incorporado, URI ou fluxo de dados.

A razão de aspeto da imagem de fundo pode ser configurada ao definir a propriedade bindable FlyoutBackgroundImageAspect, do tipo Aspect, para um dos membros da enumeração Aspect:

• AspectFill - recorta a imagem de modo a preencher a área de ecrã, preservando a proporção de aspeto.
• AspectFit - aplica molduras à imagem, se necessário, para que a imagem se ajuste à área de visualização, com espaço em branco adicionado na parte superior/inferior ou nas laterais, dependendo se a imagem é larga ou alta. Este é o valor padrão da FlyoutBackgroundImageAspect propriedade.
• Fill - estica a imagem para preencher completamente e exatamente a área de visualização. Isto pode resultar em distorção da imagem.

O exemplo seguinte mostra definir estas propriedades:

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

Isto resulta numa imagem de fundo a aparecer no flyout, abaixo do cabeçalho do flyout:

Cenário do flyout

O fundo do flyout, que é a aparência do overlay do flyout, pode ser especificado ao definir a Shell.FlyoutBackdrop propriedade associada a um Brush:

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

Neste exemplo, o plano de fundo do flyout é pintado de prata SolidColorBrush.

O exemplo seguinte mostra a definição do fundo do flyout 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 mais informações sobre pincéis, consulte .NET MAUI Brushes.

Comportamento de flyout

O flyout pode ser acedido através do ícone do hambúrguer ou deslizando do lado do ecrã. No entanto, este comportamento pode ser alterado ao definir a Shell.FlyoutBehavior propriedade associada a um dos FlyoutBehavior membros da enumeração:

• Disabled – indica que o flyout não pode ser aberto pelo utilizador.
• Flyout – indica que o flyout pode ser aberto e fechado pelo utilizador. Este é o valor padrão para a FlyoutBehavior propriedade.
• Locked – indica que o flyout não pode ser fechado pelo utilizador e que não se sobrepõe ao conteúdo.

O exemplo seguinte mostra como desativar o flyout:

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

Menu flutuante com scroll vertical

Por defeito, um flyout pode ser deslocado verticalmente quando os itens do flyout não cabem no flyout. Este comportamento pode ser alterado definindo a Shell.FlyoutVerticalScrollMode propriedade bindable para um dos ScrollMode membros da enumeração:

• Disabled – indica que o deslocamento vertical será desativado.
• Enabled – indica que o scroll vertical será ativado.
• Auto – indica que o scroll vertical será ativado se os itens do flyout não caberem no flyout. Este é o valor padrão da FlyoutVerticalScrollMode propriedade.

O exemplo seguinte mostra como desativar o scroll vertical:

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

Seleção de FlyoutItem

Quando uma aplicação Shell que utiliza um flyout é executada pela primeira vez, a Shell.CurrentItem propriedade será definida como o primeiro FlyoutItem objeto do objeto subclassado Shell . No entanto, a propriedade pode ser definida para outra FlyoutItem, como mostrado no seguinte exemplo:

<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 CurrentItem propriedade para o ShellContent objeto chamado aboutItem, o que resulta na sua seleção e exibição. Neste exemplo, é usada uma conversão implícita para envolver o ShellContent objeto num Tab objeto, que está envolto num FlyoutItem objeto.

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

CurrentItem = aboutItem;

Neste exemplo, a CurrentItem propriedade está definida na classe subclassada Shell . Alternativamente, a CurrentItem propriedade pode ser definida em qualquer classe através 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 ocultado no flyout com a propriedade FlyoutItemIsVisible e removido do flyout com a propriedade IsVisible.

• FlyoutItemIsVisible, do tipo bool, indica se o item está oculto no flyout, mas ainda é acessível através do 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 aparecer no flyout. O seu valor padrão é true.

O exemplo seguinte mostra como esconder um item no flyout:

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

Abrir e fechar o flyout programáticamente

O flyout pode ser aberto e fechado programaticamente definindo a Shell.FlyoutIsPresented propriedade bindable para um boolean valor que indique se o flyout está atualmente aberto:

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

Alternativamente, isto pode ser realizado em código:

Shell.Current.FlyoutIsPresented = false;