.NET Multi-platform App UI (.NET MAUI) ha sido publicado con nuevas funcionalidades, tanto como los anteriores pre-releases, RC3 tiene un seguro “go-live”, lo cual significa que .NET MAUI poseerá soporte de parte de Microsoft para tus aplicaciones en producción. Para iniciar con .Net MAUI, instala o actualiza a la última versión de visual studio 2022, y selecciona la opción “.NET Multi-platform App UI development”. Esto instalará todos los paquetes necesarios de .NET 6, además, habilitará la previsualización de funcionalidades para conseguir que tu experiencia desarrollando en .NET MAUI sea más productiva.

Enfocados en la Navegación

.NET MAUI tiene 2 formas principales de implementar la navegación en tus aplicaciones, la más sencilla, pero robusta opción, corresponde a correr tu aplicación con Shell, la cual se encuentra optimizada tanto para aplicaciones Móviles, como de escritorio. La segunda opción es utilizar elementos como FlyoutPage, TabbedPage, y NavigationPage.

Pero, ¿Cuál deberías usar? Las nuevas plantillas de .NET MAUI implementan Shell y proveen de una experiencia optimizada, así que te recomendamos comenzar con esa. Si en un futuro cercano, necesitas realizar el cambio para controles específicos, podrás reutilizar tu UI (interfaz de usuario). Shell es un control de UI que contiene las páginas de tu aplicación y ofrece Flyout y tabs de manera automática.  A continuación, se presenta un ejemplo de cómo utilizar la Shell:

<Shell

x:Class=”MauiApp2.AppShell”

xmlns=”http://schemas.microsoft.com/dotnet/2021/maui”

xmlns:x=”http://schemas.microsoft

.com/winfx/2009/xaml”

xmlns:local=”clr-namespace:MauiApp2″

Shell.FlyoutBehavior=”Flyout”>

<ShellContent

Title=”Home”

ContentTemplate=”{DataTemplate local:MainPage}”

Route=”MainPage” />

<ShellContent

Title=”Items”

ContentTemplate=”{DataTemplate local:ItemsPage}”

Route=”ItemsPage” />

</Shell>

ShellContent te habilita para definir las rutas URI de navegación y para usar data templates, para que tus páginas se carguen con la modalidad on-demand  y así preservar el performance de tu App. A continuación, un ejemplo de cómo como realizar lo anteriormente mencionado:

<FlyoutItem Title=”Home” FlyoutIcon=”home.png”>

<ShellContent …>

</FlyoutItem>

<FlyoutItem Title=”Items” FlyoutIcon=”store.png”>

<ShellContent …>

</FlyoutItem>

Shell soporta muchas modificaciones del flyout incluyendo estilos y fondos (backgrounds), backdrop cubriendo el contenido, plantillas de header, footer o todo el content, incluso solo los ítems del menú.

También puedes especificar el ancho (width) del flyout. He aquí algunos ejemplos de distintos diseños:

Para mostrar tabs, solo debes cambiar el FlyoutItem con un Tab. Puedes generar grupos de tabs utilizando TabBar, para que la navegación de tu app se ajuste a las necesidades de tu negocio, siendo Shell quien realizará toda la navegación por ti (Si necesitas más información, visita:  Shell flyout y Shell tabs).

Cuando necesitas navegar entre páginas de una manera diferente en tu aplicación, puedes declarar rutas Custom y navegar entre ellas a través de la URI, inclusive agregando parámetros tipo querystring.

// declare a new route

Routing.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));

// execute a route

await Shell.Current.GoToAsync(nameof(SettingsPage));

// execute a route passing data

await Shell.Current.GoToAsync($”{nameof(SettingsPage)}?setting=appearance”);

// receive querystring value

[QueryProperty(nameof(SelectedSubSection), “setting”)]

public partial class TipsPage : ContentPage

{

…

public string SelectedSubSection { get;set;}

…

}

En adición a los parámetros, también puedes agregar tipos de dato complejo a través de la nueva API introducida en .NET MAUI:

// execute a route passing full object

var person = new Person { Name=”James” };

await Shell.Current.GoToAsync(“DetailsPage”, new Dictionary<string, object>

{

{ “person”, person }

});

// received the object

[QueryProperty(nameof(Person), “person”)]

public partial class DetailsPage : ContentPage

{

Person person;

public Person Person

{

get => person;

set => person = value;

}

}

Puedes revisar .NET MAUI Workshop para más ejemplos.

El atributo QueryProperty genera las rutas para las asignaciones de los nuevos objetos públicos en las vistas. También se puede realizar lo anteriormente mencionado con los modelos del patrón MVVM. Para mayor información sobre la navegación de shell deberías seguir el siguiente link: Shell documentation.

En Valuesite nos caracterizamos siempre por estar conociendo los nuevos adelantos de esta herramienta, y tú ¿Qué esperas para probarlo?

Te invitamos a trabajar junto a nuestro equipo de profesionales con amplia experiencia en el desarrollo de soluciones tecnológicas para diferentes industrias, que agregan valor a nuestros clientes.

Contáctanos a través de nuestro correo contacto@valuesite.cl