Tutorial .NET MAUI: tu primera aplicación multiplataforma en C#

Introducción

Propósito

Configure el entorno de desarrollo y compile su primera aplicación de .NET Multi-Platform App UI (.NET MAUI).

Requisitos previos

Compruebe los requisitos del sistema para Visual Studio 2022.

Tiempo para completar

10 minutos + tiempo de descarga/instalación

Escenario

Una aplicación móvil y de escritorio que se ejecuta en Windows y Android y que muestra un mensaje Hello, World!.

Descargar e instalar

Descargar e instalar Visual Studio 2022.

Descargar Visual Studio 2022

Durante la instalación, se debe seleccionar la carga de trabajo Desarrollo de.NET Multi-Platform App UI. El uso del vínculo anterior debe preseleccionar todos los requisitos previos correctamente, como se muestra en la siguiente imagen:

¿Ya tiene Visual Studio 2022?

Si ya tiene Visual Studio 2022, asegúrese de que esté actualizado y de que tiene instalada la carga de trabajo necesaria:

Seleccione la tecla Windows, escriba Instalador de Visual Studio y presione Entrar.
Si se le solicita, permita que el instalador se actualice a sí mismo.
En caso de haber actualizaciones disponibles de Visual Studio 2022, se mostrará el botón Actualizar. Selecciónelo para actualizar antes de modificar la instalación. Este tutorial solo es válido para Visual Studio 2022 17.12 y versiones posteriores.
Busque la instalación de Visual Studio 2022 y seleccione Modificar.
Seleccione Desarrollo de .NET Multi-Platform App UI.
Seleccione el botón Modificar.

Descarga e instalación del SDK de .NET. Una vez completada la descarga, inicie la descarga para comenzar la instalación.

Descarga del SDK x64 de .NET 9 (Intel)
Descarga del SDK Arm64 de .NET 9 (Apple Silicon)

Si está en un equipo Mac con un chip M1 o M2 de Apple, debe instalar la versión Arm64 del SDK.
Descargar e instalar VS Code:

Descargue VS Code
Abra VS Code y seleccione el botón Extensiones en la barra de actividades de VS Code, a la izquierda. Escriba MAUI en la barra de búsqueda, seleccione .NET MAUI, y después seleccione el botón Instalar en la página de extensión de .NET MAUI.

Esta extensión incluye el Kit de desarrollo de C# y las extensiones de C#, que son necesarias para que se ejecute la extensión .NET MAUI.
Abra un nuevo terminal e instale la carga de trabajo .NET MAUI mediante la ejecución del siguiente comando:
Terminal
```
sudo dotnet workload install maui
```
Si la instalación se realizó correctamente, debería ver una salida similar a la siguiente:
Terminal
```
Successfully installed workload maui
```

Comprobar que todo está instalado correctamente

Una vez que haya configurado el entorno, abra un nuevo terminal de VS Code. En la barra de herramientas, seleccione Terminal y, a continuación, Nuevo terminal.

En el terminal, ejecute el siguiente comando para comprobar la instalación.

Terminal

dotnet workload list

Si la instalación se realizó correctamente, debería ver una salida similar a la siguiente:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

¿Tiene un error?

Si recibe un error 'dotnet' no se reconoce como un comando interno o externo, asegúrese de que ha abierto un nuevo terminal de VS Code. Si reiniciar VS Code o reiniciar su máquina no resuelve el problema, use el botón He encontrado un problema al final de la página para obtener ayuda para solucionar el problema.

Instalar Xcode

Para compilar las aplicaciones .NET MAUI, también necesitarás:

Versión más reciente de Xcode

Para encontrar la versión más reciente de Xcode que sea compatible con .NET MAUI, revise esta referencia de versiones de lanzamiento. Vaya a la columna Herramientas de Apple para encontrar la versión de Xcode compatible más reciente.
Un id. de Apple

Si aún no tiene un id. de Apple, puede crear uno nuevo en https://appleid.apple.com. Se requiere un id. de Apple para instalar e iniciar sesión en Xcode.
Tras instalar Xcode, debe abrir Xcode y aceptar los contratos de licencia e instalar los componentes opcionales, si se le solicita.
Cuando se le pregunte para qué plataformas le gustaría desarrollar, seleccione las plataformas macOS e iOS y después Descargar e instalar.
Abra un nuevo terminal e instale las herramientas de desarrollo de la línea de comandos de Xcode mediante la ejecución del siguiente comando:
Terminal
```
xcode-select --install
```
Cuando se le pida que instale las herramientas de desarrollo de la línea de comandos de Xcode, seleccione Instalar. Por último, acepte el contrato de licencia.

Si todo parece correcto, seleccione el botón Continuar de abajo para ir al siguiente paso.

Crear la aplicación

Creación de una nueva aplicación de .NET MAUI:

Abra Visual Studio 2022.
Seleccione el botón Crear un nuevo proyecto.
En la ventana Crear un nuevo proyecto, escriba MAUI App en el cuadro de búsqueda y pulse la tecla Entrar. Seleccione la plantilla Aplicación .NET MAUI y seleccione el botón Siguiente.
En la ventana Configurar su nuevo proyecto, escriba MyFirstMauiApp como nombre del proyecto y haga clic en el botón Siguiente.
En la ventana Información adicional, seleccione .NET 9.0 en la lista desplegable Marco si aún no estuviera seleccionado y haga clic en el botón Crear.

Visual Studio crea el nuevo proyecto. Si recibe una advertencia de alerta de Seguridad de Windows sobre el firewall que bloquea algunas características, seleccione el botón Permitir acceso.

Esperar al proceso de restauración de paquetes NuGet

NuGet es un administrador de paquetes que incorporará las dependencias de la nueva aplicación.

El proceso de restauración del paquete se iniciará automáticamente. Espere hasta que aparezca el mensaje Restaurado o Listo en la barra de estado de la parte inferior izquierda de la pantalla.

Ejecutar la aplicación

Este tutorial se centrará primero en la implementación de una aplicación de .NET MAUI en la máquina Windows local. Más adelante, tendrá la opción de configurar un emulador o un dispositivo Android.

En la barra de herramientas de Visual Studio, debería ver Equipo Windows como destino de depuración de forma predeterminada. Presione el botón Equipo Windows para compilar y ejecutar la aplicación:

En la aplicación en ejecución, seleccione el botón Hacer clic aquí varias veces y observe cómo el número de clics en los botones se incrementa:

Enhorabuena, ha creado y ejecutado su primera aplicación .NET MAUI. Siga ejecutando la aplicación y continúe con el tutorial.

Editar el código

Al desarrollar aplicaciones con .NET MAUI, Recarga activa de XAML está disponible al depurar la aplicación. Esto significa que puede cambiar la interfaz de usuario (UI) XAML mientras se ejecuta la aplicación y la interfaz de usuario se actualizará automáticamente.

Vuelva a Visual Studio y deje la aplicación en ejecución. En el Explorador de soluciones, haga doble clic en el archivo MainPage.xaml del proyecto MyFirstMauiApp. Si no ve el panel de Explorador de soluciones, seleccione Ver > Explorador de soluciones en el menú principal (o presione CTRL+ALT+L).

Actualmente, el Text de la segunda Label de la línea 17 está establecido para que diga Hello, World! como se muestra en el siguiente código:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Actualice el texto para leer Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

La interfaz de usuario de la aplicación se actualiza automáticamente a medida que se realizan cambios.

Al desarrollar aplicaciones con .NET MAUI, también puede usar la Recarga activa de .NET para volver a cargar el código de C#. Vamos a modificar la lógica de la aplicación para incrementar el recuento en 10 en lugar de en 1 al hacer clic en el botón.

Abra MainPage.xaml.cs (este archivo está anidado en MainPage.xaml o puede hacer clic con el botón derecho y seleccionar Ver código en el menú).

El método OnCounterClicked de ese archivo tiene actualmente el siguiente código:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Actualizar el count++; para incrementar en 10 cambiándolo a count += 10;.

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Para aplicar los cambios de código, guarde el archivo y seleccione el botón Recarga activa en Visual Studio o seleccione ALT+F10.

Seleccione el botón Haga clic aquí y vea cómo se incrementa por 10. ¡Bien hecho! Ahora puede cerrar la aplicación en ejecución.

Ejecutar en un dispositivo móvil

Puede decidir implementar en una o varias de las plataformas en función del entorno de desarrollo. Acaba de ejecutar e implementar la aplicación en Windows. Ahora, vamos a configurar un dispositivo o emulador Android.

Activar Hyper-V

En la barra de Windows Search, escriba características de Windows y seleccione Activar o desactivar las características de Windows.

Asegúrese de que la casilla de Hyper-V esté activada y seleccione Aceptar.

Deberá reiniciar el equipo en este momento para que el cambio surta efecto.

instalación de Android SDK

Abra Visual Studio y su solución de MyFirstMauiApp. En el menú desplegable del destino de depuración, seleccione net8.0-android en Framework.

Se requieren versiones específicas del Android SDK para compilar proyectos. Si no ha aceptado la licencia de Android SDK, verá el siguiente mensaje de error en la ventana Lista de errores.

Haga doble clic en el mensaje para iniciar el proceso de aceptación de la licencia. Haga clic en Aceptar para cada una de las licencias presentes y se iniciará la instalación automática.

Configuración del emulador de Android

Si no tiene un dispositivo Android en el que realizar la implementación, puede seguir estos pasos para configurar un emulador de Android. Si ya lo ha hecho o desea usar su propio dispositivo Android, puede omitir este paso.

Si es la primera vez que compila una aplicación de .NET MAUI, verá Android Emulator seleccionado en el menú desplegable de destino de depuración. Haga clic en él para iniciar el proceso de creación. Si aparece un cuadro de diálogo de aceptación de licencia, seleccione Accept.

Se abrirá la ventana Nuevo dispositivo. Seleccione el botón Crear para crear un emulador con la configuración predeterminada. Esto descargará las imágenes del emulador y finalizará la creación del emulador para usarlo en Visual Studio. Este paso puede tardar unos minutos.

No se preocupe si el nivel de API que ve es diferente de las imágenes. Debe tener 33 años o más.

Una vez creado el emulador, verá un botón que dice Iniciar. Haga clic en él.

Es posible que reciba un mensaje para habilitar la plataforma de hipervisor de Windows. Siga ladocumentación para habilitar la aceleración para mejorar el rendimiento (necesario para permitir el funcionamiento del emulador). Seleccione Ejecutar de todos modos.

El emulador de Android se iniciará y finalizará por completo cuando vea la opción de Detener en el Administrador de dispositivos Android. Esto puede tardar algún tiempo.

Una vez que haya finalizado, se mostrará en el menú de depuración Visual Studio.

Ahora se ha creado el emulador de Android y está listo para usarse. La próxima vez que ejecute Visual Studio, el emulador aparecerá directamente en la ventana de destino de depuración y se iniciará cuando lo seleccione. Si ha tenido algún problema o tiene problemas de rendimiento con el emulador, lea la documentación de configuración completa.

Configurar dispositivo Android

Para desarrollar con su dispositivo Android, es necesario habilitar la depuración USB. Siga estos pasos en el dispositivo para conectarlo a Visual Studio. Si no tiene un dispositivo Android, puede omitir esta sección.

Habilitar el modo de desarrollador

Vaya a la pantalla Configuración.
Busque Número de compilación mediante la búsqueda en la parte superior de la pantalla de configuración o búsquelo en Acerca del teléfono.
Pulse Número de compilación 7-10 veces hasta que aparezca "Ahora es un desarrollador".

Comprobación del estado de depuración USB

Vaya a la pantalla Configuración.
Encuentra Depuración de USB mediante la búsqueda en la parte superior de la pantalla de configuración o encuéntrala en Opciones de desarrollador.
Habilite la depuración USB si aún no está habilitada.

Dispositivo de confianza

Conecte el dispositivo al equipo.
Se le pedirá Permitir depuración USB.
ComprobarPermitir siempre desde este equipo.
Haga clic en Permitir.

El dispositivo ya está configurado y se mostrará en Visual Studio como un destino de implementación.

¿Tiene problemas? Consulte la documentación.

El emulador o el dispositivo ahora deben configurarse para la implementación.

Ejecutar en Android

Asegúrese de que el dispositivo o emulador está seleccionado como destino de depuración.

En el menú, seleccione Depurar > Iniciar depuración (o presione F5). Si esta opción está deshabilitada, asegúrese de que está seleccionado un emulador o un dispositivo.

La aplicación se compilará, implementará en el dispositivo o emulador Android seleccionado y se ejecutará.