La navegacion con Tabs mejora al usuario el uso de nuestra aplicacion, vamos a crear una navegacion con Tabs con C# .NET MAUI.
Primero vamos a abrir el Visual Studio Community y vamos a crear un proyecto en .NET MAUI.
Recordemos que los Archivos de Paginas de WPF o XAML tienen asocialdo un archivo .cs de C# (C Sharp).
Crear Nueva Vista
La pagina principal se llama MainPage.xaml , vamos al explorador de soluciones y vamos a Agregar Nuevo Elemento y vamos a seleccionar .NET MAUI Content Page (XAML) y le vamos a poner un nombre a la nueva vista, yo la dejare como NewPage1.cs
Modificar AppShell
Vamos al archivo AppShell.xaml y vamos a agregar el componente TabBar y dos sub elementos Tab, uno para MainPage y otro para NewPage1.
<TabBar>
<Tab Title="Inicio" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
<Tab Title="Nueva Pagina" Icon="settings.png">
<ShellContent ContentTemplate="{DataTemplate local:NewPage1}" />
</Tab>
</TabBar>En los Tab se puede ver que en el parametro ContentTamplate se hace referencia a la vista MainPage o NewPage1, ustedes pueden agregar mas paginas al proyecto y agregarlas al Tab pero hay que poner la referencia al nombre de la pagina.
Ahora vamos a registrar Una ruta en AppShell.xaml.cs para que el Tab de Nueva Pagina renderice NewPage1.
Justo despues de la funcion InitializeComponents() de AppShell.xaml.cs agregamos esto.}
Routing.RegisterRoute("ruta1", typeof(NewPage1));Y con esto registramos la ruta para poder usarla mas adelante.
Rutas en AppShell
El registro de Rutas nos permite navegar en las rutas como si fueran URLS y nos permite movernos de una Vista a otra desde un boton por ejemplo, sin usar los tabs.
Para movernos a una ruta podemos usar Shell.Current.GoToAsync una funcion o metodo.
private async void OnButtonClicked(object sender, EventArgs e)
{
await Shell.Current.GoToAsync("detalles");
}Y si queremos regresar de una vista a la vista anterior, usamos dos puntos “..” como en la terminal cuando queremos regresar de directorio.
private async void OnButtonClicked(object sender, EventArgs e)
{
await Shell.Current.GoToAsync("..");
}Resultado
Este es el resultado al ejecutar el proyecto, en la parte de arriba aparecen los Tabs Inicio y NUeva Pagina y al seleccionar el tab se renderiza a la vista correspondiente.
