Visión General de un proyecto .NET MAUI

¿Cómo crear un nuevo proyecto .NET MAUI?

Para crear un proyecto con .NET MAUI, debes dar clic en la opción Create a new project:

Esto abrirá una nueva ventana, en la que aparecerán todas las plantillas que puedes utilizar para crear diferentes tipos de soluciones, aquí debes aplicar un filtro con el término “maui” en Todos los Tipos de Proyectos, lo que arrojará la plantilla .NET MAUI App, que es la plantilla que nos interesa:

Selecciona la plantilla y da clic en Next. En la nueva ventana, puedes dejar el nombre del proyecto predeterminado, ya que sólo examinaremos la estructura del proyecto, para finalmente clickear sobre el botón Create:

La primera vez que crees un proyecto con .NET MAUI, deberás esperar algunos segundos, ya que se llevará a cabo la instalación de paquetes nuget necesarios:

Posteriormente, es posible que se te muestre una ventana para aceptar la licencia de uso del SDK de Android, la cual debes aceptar:

Una vez aceptada la licencia, se iniciará el proceso de descargar del SDK y herramientas correspondientes para crear aplicaciones basadas en esta plataforma, por lo que debes esperar unos segundos adicionales más mientras se termina el proceso.

Una vez finalizada la tarea, debes compilar el proyecto para asegurarte que todo funciona correctamente, para ello, vas a dar clic derecho sobre el proyecto, y seleccionarás la opción compilar:

Después de unos segundos, si todo sale bien, verás que el proceso se ha completado con éxito. Esto lo puedes saber porque en la parte inferior izquierda aparece una leyenda indicando que el proyecto está listo y que se ha compilado con éxito:

¿Cuál es la estructura de un proyecto .NET MAUI?

La estructura de un proyecto .NET MAUI, consiste en un único proyecto que va a albergar todas las configuraciones para cada plataforma:

Entre las secciones principales del proyecto, podrás ver la sección de las dependencias para cada plataforma, desde Android, pasando por iOS, Mac Catalyst y Windows también.

También tenemos una carpeta Propiedades, en la que podrás encontrar un archivo JSON que permite realizar configuraciones en la aplicación. También vemos una carpeta llamada Platforms, que es la que aloja archivos específicos para cada una de las plataformas (Puede que dependiendo cuando leas esto, encuentres algunas plataformas adicionales como Tizen):

Por ejemplo, en la imagen vemos el contenido de la carpeta Android, que contiene archivos de configuración específicos como la carpeta Resources, el archivo AndroidManifest.xml y la clase MainActivity.cs.

Por otra parte, en la carpeta iOS podemos encontrar la clase AppDelegate.cs, el archivo Info.plist. En el caso de MacCatalyst encontramos archivos similares que vimos en la plataforma iOS:

Por último, como parte de la plataforma Windows, vemos algunos archivos como App.xaml, el manifiesto de la aplicación para el paquete de Windows, entre otros:

También podemos ver una sección llamada Resources, que es diferente a la de la carpeta de Android. Aquí es donde debes colocar los recursos comunes en todo el proyecto.

Carpeta Resources en .NET MAUI

Por ejemplo, si quieres añadir una fuente a tu proyecto, basta con que coloques la fuente en la carpeta llamada Fonts. A continuación, te describo que tipo de recursos debes colocar en cada carpeta:

• AppIcon: Íconos de la aplicación, de preferencia en un formato svg para permitir el escalamiento automático
• Fonts: Fuentes que quieras añadir a tu aplicación
• Images: Imágenes que desees colocar en tu aplicación, desde los clásicos jpg, pasando por archivos png y svg para un escalamiento automático
• Raw: Archivos en crudo que quieras distribuir en tu aplicación, como por ejemplo archivos de texto, pdf's, algún archivo csv, etc.
• Splash: Imágenes que utilizarás para el splashscreen de la aplicación. Se recomienda un formato svg para aprovechar la característica de auto escalamiento.
• Styles: Diccionarios de recursos para ser utilizados en la aplicación.

Overview de App.xaml, MainPage.xaml y AppShell.xaml en un proyecto .NET MAUI

También puedes ver algunos archivos que irás conociendo poco a poco, como el archivo App.xaml, en el cual se definen elementos comunes a toda la aplicación, como diccionarios de estilos para definir la apariencia visual de los elementos de la aplicación.

También puedes ver un archivo llamado AppShell.xaml, que permite crear aplicaciones rápidamente, definiendo las páginas de contenido y acomodándolas como si de un rompecabezas se tratara, creando de forma automática un menú y una navegación basada en pestañas.

Como parte del contenido del Shell, se pueden definir rápidamente elementos como el título, la referencia a una de las páginas de contenido, si queremos o no un menú deslizable, una ruta para especificar cómo acceder a esta página.

Además, vemos también una página llamada MainPage.xaml, que es una ContentPage, en otra publicación veremos más a detalle este tipo de página.

En esta página de contenido de la plantilla por default, vemos la definición de controles a través de etiquetas, tales como un ScrollView, un control Label, un control Button, un control Image, de los cuales hablaré a fondo en otra publicación.

Podemos ver también una clase llamada MauiProgram.cs, que es una clase especial que permite realizar configuraciones de la aplicación. Por ejemplo, podemos ver que en cada proyecto nuevo se registran las fuentes que serán utilizadas en la aplicación, aunque es posible configurar muchas otras cosas.

Esta es la estructura de una aplicación .NET MAUI a primera vista, si quieres ver cómo ejecutarla te sugiero leer la siguiente lección del curso llamada Instalando y creando emuladores para .NET MAUI.