Estructura básica de ContentPage en .NET MAUI

Crear tu primer ContentPage en .NET MAUI es el punto de partida para construir interfaces móviles multiplataforma. Aquí aprendes qué es esta página, cómo se estructura en código y cómo ejecutar tu primera aplicación en Visual Studio, ideal si estás iniciando con desarrollo cross-platform en C# y XAML.

¿Qué es un ContentPage en .NET MAUI?

El ContentPage es el tipo de página más común dentro de .NET MAUI. Funciona como un lienzo en blanco donde plasmas toda la UI y la idea visual que necesitas para tu aplicación.

¿Qué es un ContentPage? Es una página en blanco de .NET MAUI que te permite añadir controles, layouts y elementos visuales para construir la interfaz de tu app desde cero.

Cuando creas un proyecto nuevo, .NET MAUI ya trae un modelo por defecto basado en un ContentPage, así que vas a verlo en acción desde el primer minuto [3:34].

¿Cómo crear tu primer proyecto en .NET MAUI paso a paso?

Antes de escribir código, necesitas tener Visual Studio instalado en Mac o Windows. Sin esa base, no puedes avanzar a la práctica [0:18].

Estos son los pasos exactos que sigues dentro de Visual Studio [1:25]:

1. Haz clic en el botón new y selecciona la opción .NET MAUI app.
2. Presiona continuar y deja el target framework en .NET 6 sin cambios.
3. Define el project name y el solution name. En el ejemplo se usó Page Platzi Sample.
4. Elige la ubicación donde se guardará el proyecto con browse o escribiendo la ruta.
5. Haz clic en create y espera unos segundos a que se genere todo.

Un detalle útil: cuando escribes el project name, el solution name se autocompleta. Puedes cambiarlo, pero conviene dejarlo igual para evitar confusiones más adelante.

¿Qué carpetas trae un proyecto básico de .NET MAUI?

Apenas se crea el proyecto, vas a encontrar una estructura organizada que conviene reconocer desde el inicio [3:00]:

• Connected Services: para conectar servicios externos.
• Dependencies: librerías y paquetes del proyecto.
• Platforms: cada plataforma soportada en su propia carpeta.
• Properties: configuración general del proyecto.
• Resources: recursos externos, estilos y look and feel.

Esta separación es la que hace que .NET MAUI sea verdaderamente multiplataforma desde un solo proyecto.

¿Cómo se estructura un ContentPage en código XAML?

La estructura básica del ContentPage aparece en cuanto abres el archivo principal. Aunque tú no escribiste nada, ahí ya hay código generado automáticamente [4:07].

Lo primero que ves son las tags o etiquetas que envuelven todo: la etiqueta principal ContentPage abre y cierra el bloque, y dentro vive toda tu interfaz.

Esa etiqueta principal viene acompañada de los namespaces, que son autogenerados. No necesitas escribirlos a mano, solo entender que sirven para referenciar las librerías necesarias y la clase sobre la que estás trabajando.

¿Qué son los namespaces en .NET MAUI? Son referencias autogeneradas que conectan tu archivo XAML con las librerías y la clase de C# correspondiente. No los modificas, solo conviven con tu ContentPage.

Dentro del ContentPage va un layout que arropa todos los controles de la UI. Y al final, debes cerrar la etiqueta del ContentPage tal como lo exige la sintaxis.

¿Cómo ejecutar tu app en un dispositivo de prueba?

Para ver el resultado en pantalla necesitas elegir un dispositivo virtual y correr la aplicación [5:20]:

• Ubica el botón con el ícono de flecha en la barra superior.
• Selecciona el dispositivo desde el desplegable, por ejemplo iPhone 11 Pro.
• Haz clic para iniciar la ejecución y espera el logo de .NET MAUI.

El modelo por defecto te muestra el logo de .NET, un Hello World, una descripción y un botón. Es la forma más rápida de confirmar que tu entorno funciona bien.

¿Por qué se ve la pantalla en blanco al borrar el contenido?

Aquí está la prueba de que el ContentPage es realmente un lienzo vacío. Si borras el contenido interno del layout, la pantalla queda completamente en blanco al ejecutar la app [6:25].

Eso confirma dos cosas importantes: que el ContentPage no impone diseño propio y que cualquier elemento visual depende de los controles y layouts que tú agregues dentro de él.

Más adelante vas a aprender a poblar ese lienzo con controles, botones, imágenes y layouts específicos para organizar la información.

¿Ya pudiste crear tu primer proyecto en .NET MAUI? Cuéntame en los comentarios cómo te fue, qué dispositivo elegiste para ejecutarlo y si tuviste algún inconveniente con la instalación o la estructura del ContentPage.