Implementar navegação de submenu
A navegação por submenu é um tipo de navegação em que uma janela de itens de menu desliza (ou voa) do lado da tela do dispositivo. Ele é invocado tocando no que é chamado de menu de "hambúrguer" ou um ícone com três linhas horizontais empilhadas uma sobre a outra.
Nesta unidade, você aprenderá a criar um aplicativo que implementa a navegação de submenu.
O que é navegação de submenu?
A navegação do submenu exibe um menu que fornece um meio rápido de alternar o contexto em seu aplicativo.
O menu suspenso é composto por várias partes, o Header
, , FlyoutItems
MenuItems
e Footer
.
A imagem a seguir mostra um exemplo visual das partes do submenu.
Como o menu suspenso nem sempre está visível, ele pode ser usado para alternar o contexto entre partes conceitualmente diferentes do seu aplicativo. Por exemplo, um item de submenu pode levar a uma página de entrada de dados (ou páginas) e outro a uma página sobre.
Navegação de submenu em um aplicativo .NET MAUI
Use a classe para implementar a FlyoutItem
navegação de submenu no .NET MAUI. FlyoutItem
faz parte do paradigma de desenvolvimento de aplicativos Shell fornecido pelo .NET MAUI.
A navegação com um submenu no .NET MAUI ocorre quando um FlyoutItem
item é tocado. O FlyoutItem
alterna automaticamente o que é exibido em seu aplicativo. Você especifica o que é exibido quando um FlyoutItem
é tocado definindo sua ShellContent
propriedade. Essa propriedade aponta para uma página em seu aplicativo.
O FlyoutItem
precisa ser hospedado em uma Shell
página, que serve como página principal do seu aplicativo. E você pode ter quantos FlyoutItem
s quiser.
O exemplo a seguir cria um submenu contendo dois itens de submenu:
<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>
Criar um submenu
Um ou mais itens do submenu podem ser adicionados ao submenu. Um FlyoutItem
objeto representa cada item do submenu. Cada FlyoutItem
objeto deve ser filho do objeto subclassificado Shell
que serve como arquivo MainPage
.
O Shell
objeto tem operadores de conversão implícitos que permitem que a hierarquia visual do Shell seja simplificada. Essa simplificação é possível porque um objeto subclassificado Shell
só pode conter objetos ou um TabBar
objeto, que só pode conter objetos, que só pode conter FlyoutItem
Tab
ShellContent
objetos.
Esses operadores de conversão implícitos 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>
Esse código resulta em um submenu com dois itens. O CatsPage
é exibido por padrão quando o aplicativo é aberto. Tocar no segundo exibe o DogsPage
arquivo .
Itens de menu do submenu
Os itens de menu podem ser adicionados opcionalmente ao submenu. Um MenuItem
objeto representa cada item de menu. Os itens de menu são semelhantes aos botões, na medida em que tocar em um leva a uma ação a ocorrer em vez de uma página para exibir.
A posição dos objetos no submenu depende de sua ordem de MenuItem
declaração na hierarquia visual do Shell. Portanto, todos os objetos declarados antes dos objetos aparecerão antes dos objetos no submenu e todos os objetos declarados após os MenuItem
objetos aparecerão após FlyoutItem
os FlyoutItem
MenuItem
FlyoutItem
objetos no submenu.FlyoutItem
<Shell ...>
...
<MenuItem Text="Help"
IconImageSource="help.png"
Command="{Binding HelpCommand}"
CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />
</Shell>
Cabeçalho e rodapé do submenu
O cabeçalho do submenu é o conteúdo que opcionalmente aparece na parte superior do submenu. Você define a aparência do cabeçalho definindo um objeto com a Shell.FlyoutHeader
propriedade bindable:
<Shell ...>
<Shell.FlyoutHeader>
<Grid>
<Image Source="header-image.png" />
</Grid>
</Shell.FlyoutHeader>
</Shell>
O rodapé do submenu é o conteúdo que opcionalmente aparece na parte inferior do submenu. Você define a aparência do rodapé definindo um objeto com a Shell.FlyoutFooter
propriedade bindable:
<Shell ...>
<Shell.FlyoutFooter>
<Grid>
<Image Source="footer-image.png" />
</Grid>
</Shell.FlyoutFooter>
</Shell>