Introducción a Xamarin Shell



Introducción a Xamarin Shell

En lo que comprende el adviento Xamarin 2019, es un placer  compartir con ustedes lo nuevo de la versión de Xamarin 4.0 en adelante, sin importar si estas iniciando en el desarrollo móvil o tienes años de experiencia estoy seguro que te ayudara a agilizar el desarrollo al crear hermosas apps móviles con C# y xaml que te hará muy feliz.

Shell presenta un contenedor simple para sus aplicaciones móviles. En Shell presenta un contenedor simple para sus aplicaciones móviles. En lugar de luchar con una combinación de MasterDetailPage, TabbedPage y NavigationPage, simplemente inicie su aplición con Shell y compience a agregar páginas.




Para convertir una aplicación en una Shell, necesita usar la siguiente sintaxis:

<?xml version="1.0" encoding="UTF-8"?> 
    <Shell
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:pages="clr-namespace:ShellDemo" 
        x:Class="ShellDemo.ShellPage">
    </Shell>


Y su code behing
public App()
{
    InitializeComponent();
    MainPage = new ShellPage();

}



Configuración
 
En tu MainActivity y AppDelegate necesitas configurar la bandera experimental, colocando el siguiente con el método antes de llamar el  init de Xamarin Forms:

global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");





Elementos para crear la estructura de tu  aplicación
ShellItem
Uno o más elementos que forman parte del shell. cada ShellItem es un hijo del Shell
ShellSection
Contenido agrupado que se puede navegar por medio de tabs en la parte inferior de la aplicación, cada ShellSection es hija de un ShellItem
ShellContent
El contenido de cada página, el cual puede ser navegado por medio de tabs en la parte superior, cada ShellContent es hijo de un ShellSection


En Visual Studio 2019, trae una cuarta opción, por si queremos empezar nuestro proyecto directamente con Shell. Lo más seguro tengas varias preguntas entre ellas: si tengo un proyecto usando context o tabbpages, podría modificar algunas páginas a Shell? La respuesta es sí.


Siguiendo la estructura anterior podemos definir una UI simple con el siguiente XAML:

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Shell.MainPage">
    <ShellItem Title="Xamarin Shell">
        <ShellSection>
            <ShellContent></ShellContent>
        </ShellSection>
    </ShellItem>

</Shell>


En el menú puedes editarlo a tu estilo, agregar imágenes, textos, submenus....


Ejemplo de  estructura eminentemente creada por Shell:





ShellSection: Son representadas por las tabs inferiores.

Menu Items: Si deseas añadir elementos extra al menú lateral puedes hacer mediante la propiedad MenuItem, el cual permite también configurar una vista personalizada mediante la propiedad MenuItemTemplate.

Barras de búsquedas en Shell



Gabriel Acosta
@gacostadev


Comentarios

Publicar un comentario