Implementación de la navegación flotante
La navegación flotante es un tipo de navegación en el que una ventana de elementos de menú se desliza (o flota) desde el lateral de la pantalla del dispositivo. Se invoca pulsando en un menú "hamburguesa", un icono con tres líneas horizontales apiladas una encima de la otra.
En esta unidad, aprenderá a crear una aplicación que implemente la navegación flotante en una .NET Multi-Platform App UI (MAUI).
¿Qué es la navegación flotante?
La navegación flotante muestra un menú que ofrece un medio rápido para cambiar el contexto dentro de la aplicación.
El menú flotante se compone de varias partes: Header, FlyoutItems, MenuItems y Footer.
En la imagen siguiente, se muestra un ejemplo visual de las partes del control flotante.
Dado que el menú flotante no siempre está visible, se puede usar para cambiar el contexto entre partes conceptualmente diferentes de la aplicación. Por ejemplo, un elemento flotante puede llevar a una página (o varias páginas) de entrada de datos; y otro, a una página informativa.
Navegación flotante en una aplicación de .NET MAUI
La clase FlyoutItem se usa para implementar la navegación flotante en .NET MAUI. FlyoutItem forma parte del paradigma de desarrollo de aplicaciones de shell proporcionado por .NET MAUI.
La navegación con un menú flotante en .NET MAUI se produce cuando se pulsa un elemento FlyoutItem. FlyoutItem cambia automáticamente el contenido que se muestra en la aplicación. Para especificar qué se muestra al pulsar un elemento FlyoutItem, establezca su propiedad ShellContent. Esa propiedad apunta a una página de la aplicación.
El elemento FlyoutItem tiene que hospedarse en una página Shell, que sirve de página principal de la aplicación. Puede tener tantos elementos FlyoutItem como quiera.
En el ejemplo siguiente, se crea un control flotante que contiene dos elementos de control flotante:
<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>
Crear un control flotante
Se pueden agregar uno o varios elementos de control flotante al control flotante. Un objeto FlyoutItem representa cada elemento de control flotante. Cada objeto FlyoutItem debe ser un elemento secundario del objeto Shell de subclase que sirve de MainPage de la aplicación.
El objeto Shell tiene operadores de conversión implícitos que permiten simplificar la jerarquía visual del shell. Esta simplificación es posible porque un objeto Shell con subclases solo puede contener objetos FlyoutItem o un objeto TabBar, que solo puede contener objetos Tab, que solo pueden contener objetos ShellContent.
Se pueden usar estos operadores de conversión implícita para quitar los objetos FlyoutItem y Tab del ejemplo 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>
Este código da como resultado un control flotante con dos elementos. El elemento CatsPage se muestra de manera predeterminada cuando se abre la aplicación. Al pulsar en el segundo, se muestra DogsPage.
Elementos del menú flotante
Como alternativa, los elementos de menú se pueden agregar al control flotante. Un objeto MenuItem representa cada elemento de menú. Los elementos de menú son similares a los botones, en la medida en que, al pulsar uno, se produce una acción, en lugar de que se muestre una página.
La posición de los objetos MenuItem en el control flotante depende de su orden de declaración en la jerarquía visual del Shell. Por lo tanto, los objetos MenuItem declarados antes de los objetos FlyoutItem aparecerán antes de los objetos FlyoutItem en el control flotante y los objetos MenuItem declarados después de los objetos FlyoutItem aparecerán después de los objetos FlyoutItem en el control flotante.
<Shell ...>
...
<MenuItem Text="Help"
IconImageSource="help.png"
Command="{Binding HelpCommand}"
CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />
</Shell>
Encabezado y pie de página del menú flotante
El encabezado del control flotante es el contenido que aparece, de manera opcional, en la parte superior del control flotante. Para definir la apariencia del encabezado, establezca un objeto con la propiedad Shell.FlyoutHeader enlazable:
<Shell ...>
<Shell.FlyoutHeader>
<Grid>
<Image Source="header-image.png" />
</Grid>
</Shell.FlyoutHeader>
</Shell>
El pie de página del control flotante es el contenido que aparece, de manera opcional, en la parte inferior del control flotante. Para definir la apariencia del pie de página, establezca un objeto con la propiedad enlazable Shell.FlyoutFooter:
<Shell ...>
<Shell.FlyoutFooter>
<Grid>
<Image Source="footer-image.png" />
</Grid>
</Shell.FlyoutFooter>
</Shell>