Compilación de la primera aplicación

En este tutorial, aprenderás a crear y ejecutar tu primera aplicación de interfaz de usuario de aplicaciones multiplataforma de .NET (.NET MAUI) en Visual Studio 2022 en Windows o Visual Studio 2022 para Mac. Esto te ayudará a asegurarte de que el entorno de desarrollo está configurado correctamente.

Visual Studio

Requisitos previos

• Visual Studio 2022 17.8 o posterior, con la carga de trabajo .NET MAUI Multi-platform App UI instalada. Para más información, consulte Instalación.

Creación de una aplicación

En este tutorial, crearás la primera aplicación .NET MAUI en Visual Studio 2022 y la ejecutarás en un emulador de Android:

El desarrollo de aplicaciones .NET MAUI para iOS en Windows requiere un host de compilación de Mac. Si no necesitas tener específicamente el destino iOS y no tienes un equipo Mac, considera la posibilidad de empezar a usar Android o Windows en su lugar.

En este tutorial, crearás la primera aplicación .NET MAUI en Visual Studio y la ejecutarás en un simulador de iOS:

En este tutorial, crearás la primera aplicación .NET MAUI en Visual Studio 2022 y la ejecutarás en Windows:

1. Inicie Visual Studio 2022. En la ventana de inicio, haz clic en Create a new project para crear un proyecto nuevo:

   

2. En la ventana Crear un nuevo proyecto, selecciona MAUI en la lista desplegable Todos los tipos de proyecto, selecciona la plantilla .NET MAUI App y luego el botón Siguiente.

   

3. En la ventana Configurar el nuevo proyecto, dale un nombre al proyecto, elige una ubicación adecuada para él y selecciona el botón Siguiente:

   

4. En la ventana Información adicional, elige la versión de .NET a la que te quieres dirigirte y haz clic en el botón Crear:

   

5. Espera a que se creen los proyectos y se restauren sus dependencias.

   

6. En la barra de herramientas de Visual Studio, usa la lista desplegable Destino de depuración para seleccionar Emuladores de Android y después la entrada Emulador de Android:

   

7. En la barra de herramientas de Visual Studio, selecciona el botón Emulador de Android:

   

   Visual Studio comenzará a instalar el Android SDK predeterminado y Android Emulator.

8. En la ventana Contrato de licencia de Android SDK, selecciona el botón Aceptar:

   

9. En la ventana Contrato de licencia de Android SDK, selecciona el botón Aceptar:

   

10. En el cuadro de diálogo Control de cuentas de usuario, presiona el botón Sí:

    

11. En la ventana Aceptación de licencia, presiona el botón Aceptar.

    

    Espere a que Visual Studio descargue Android SDK y Android Emulator.

12. En la barra de herramientas de Visual Studio, selecciona el botón Emulador de Android:

    

    Visual Studio comenzará a crear un emulador de Android predeterminado.

13. En el cuadro de diálogo Control de cuentas de usuario, presiona el botón Sí:

    

14. En la ventana Dispositivo nuevo, presiona el botón Crear:

    

    Espera a que Visual Studio se descargue, se descomprima y crea una instancia del Emulador de Android.

15. Cierra la ventana Administrador de dispositivos Android.

    

16. En la barra de herramientas de Visual Studio, presiona el botón Pixel 5 - API 34 (Android 14.0 - API 33) para compilar y ejecutar la aplicación:

    

    Visual Studio inicia Android Emulator, compila e implementa la aplicación en el Emulator.

    Advertencia

    La aceleración de hardware debe estar habilitada para maximizar el rendimiento del emulador de Android. Si no se hace esto, el emulador se ejecuta muy lentamente. Para más información, consulte Cómo habilitar la aceleración de hardware con emuladores de Android (Hyper-V y AEHD).

17. En la aplicación en ejecución en el Emulador de Android, presiona el botón Hacer clic aquí varias veces y observa que se incrementa el recuento del número de clics de botón.

    

Solución de problemas

Si la aplicación no se puede compilar, revisa Solución de problemas conocidos, que puede tener una solución a tu problema. Si el problema está relacionado con el Android Emulator, consulta Solución de problemas de Android Emulator.

6. En la barra de herramientas de Visual Studio, use la lista desplegable Depurar destino para seleccionar Framework y, a continuación, la entrada net8.0-windows:

   

7. En la barra de herramientas de Visual Studio, presiona el botón Equipo Windows para compilar y ejecutar la aplicación:

   

   Si no has habilitado el modo de desarrollador, Visual Studio te pedirá que lo habilites. En el cuadro de diálogo Habilitar el modo de desarrollador en Windows, haz clic en configuración para desarrolladores para abrir la aplicación Configuración:

   

   En la aplicación Configuración, activa el Modo de desarrollador y acepta la declinación de responsabilidades:

   

   Cierra la aplicación Configuración y después cierra el cuadro de diálogo Habilitar el modo de desarrollador en Windows.

8. En la aplicación en ejecución, presiona el botón Hacer clic varias veces y observa que el recuento del número de clics de botón se incrementa:

   

Solución de problemas

Si la aplicación no se puede compilar, revisa Solución de problemas conocidos, que puede tener una solución a tu problema.

6. En Visual Studio, empareja IDE con un host de compilación de Mac. Para obtener más información, consulta Emparejar con Mac para el desarrollo de iOS.

7. En la barra de herramientas de Visual Studio, usa la lista desplegable Destino de depuración para seleccionar Simuladores de SO de iOS y después un simulador de iOS específico:

   

8. En la barra de herramientas de Visual Studio, presiona el botón de iniciar del simulador de iOS elegido para compilar y ejecutar la aplicación:

   

   Visual Studio compilará la aplicación, iniciará el simulador remoto de iOS para Windows e implementará la aplicación en el simulador remoto. Para obtener más información sobre el Simulador remoto de iOS para Windows, consulta Simulador remoto de iOS para Windows.

9. En la aplicación en ejecución, presiona el botón Hacer clic varias veces y observa que se incrementa el recuento del número de clics de botón.

   

Solución de problemas

Si la aplicación no se puede compilar, revisa Solución de problemas conocidos, que puede tener una solución a tu problema.

Las aplicaciones de .NET MAUI destinadas a Mac Catalyst solo pueden iniciarse y depurarse con Visual Studio 2022 para Mac.

Visual Studio para Mac

Nota:

La retirada de Visual Studio para Mac está programada para el 31 de agosto de 2024 de acuerdo con la Directiva de ciclo de vida moderno de Microsoft. Visual Studio para Mac 17.6 seguirá recibiendo soporte técnico hasta el 31 de agosto de 2024, con actualizaciones de mantenimiento para problemas de seguridad y plataformas actualizadas de Apple. Para obtener más información, incluyendo opciones alternativas para desarrollar en un Mac, consulta ¿Qué sucede con Visual Studio para Mac?.

Requisitos previos

• Visual Studio 2022 para Mac 17.6 con las cargas de trabajo .NET, .NET MAUI, Android e iOS instaladas. Para más información, consulte Instalación.

Importante

Para usar Visual Studio para Mac con .NET 8, habilita la casilla Visual Studio >Preferencias > Otros > Características de vista previa > Usar el SDK de .NET 8 si está instalado (requiere reinicio).

Creación de una aplicación

En este tutorial, crearás tu primera aplicación .NET MAUI en Visual Studio 2022 para Mac y la ejecutarás en la plataforma elegida:

1. Inicia Visual Studio 2022 para Mac. En la ventana de inicio, haz clic en Nuevo para crear un nuevo proyecto.

   

2. En el cuadro de diálogo Elija una plantilla para el nuevo proyecto, seleccciona Multiplatforma > Aplicación, selecciona la plantilla Aplicación .NET MAUI App y haz clic en el botón Continuar:

   

3. En la ventana Configure su .NET MAUI App nueva, elige la versión de .NET a la que quieres dirigirte y haz clic en el botón Continuar:

   

4. En la ventana Configure su .NET MAUI App nueva, escribe MyMauiApp como el nombre del proyecto, selecciona una ubicación adecuada para este y haz clic en el botón Crear:

   

5. Espera a que se creen los proyectos y se restauren sus dependencias.

   

6. Visual Studio 2022 para Mac mostrará una barra de información si el equipo Mac carece de los componentes de Android SDK. Haz clic en el botón Instalar para instalar Android SDK:

   

7. En la ventana Android SDK, selecciona la casilla Download and install Android dependencies automatically y haz clic en el botón Download and Install:

   

8. En la ventana License Acceptance, selecciona el botón Accept.

   

   Espera a que Visual Studio 2022 para Mac descargue Android SDK:

9. En la barra de herramientas de Visual Studio 2022 para Mac, cambia el destino de depuración a Android Emulator:

   

10. En la barra de herramientas de Visual Studio 2022 para Mac, presiona el botón Reproducir para compilar la aplicación e intenta iniciarla:

    

    Visual Studio 2022 para Mac compilará la aplicación y después creará un emulador de Android predeterminado.

11. En la ventana Dispositivo nuevo, selecciona el botón Crear:

    

12. En la ventana License Acceptance, selecciona el botón Accept.

    

    Espera a que Visual Studio 2022 para Mac descargue e instale Android Emulator.

13. Cierra la ventana Administrador de dispositivos Android.

    

14. En la barra de herramientas de Visual Studio 2022 para Mac, cambia el destino de depuración a Pixel 5 - API 34 (API 34):

    

15. En la barra de herramientas de Visual Studio 2022 para Mac, pulsa el botón Reproducir para iniciar la aplicación en Android Emulator:

    

    Visual Studio 2022 para Mac iniciará Android Emulator, compila el proyecto e implementa la aplicación en el emulador.

16. En la aplicación de ejecución en Android Emulator, presiona el botón Hacer clic aquí varias veces y observa que el recuento del número de clics de botones se incrementa:

    

6. En la barra de herramientas de Visual Studio 2022 para Mac, asegúrate de que el destino de depuración esté establecido en un simulador de iOS:

   

7. En la barra de herramientas de Visual Studio 2022 para Mac, pulsa el botón Reproducir para iniciar la aplicación en la instancia elegida del simulador iOS:

   

   Visual Studio 2022 para Mac iniciará el simulador de iOS, compilará la aplicación e implementará la aplicación en el simulador.

8. En la aplicación en ejecución, pulsa varias veces el botón Hacer clic aquí y observa que se incrementa el recuento del número de clics de los botones:

   

6. En la barra de herramientas de Visual Studio 2022 para Mac, asegúrate de que el destino de depuración está establecido en Mi Mac (MacCatalyst):

   

7. En Visual Studio 2022 para Mac, haz clic con el botón derecho en el proyecto MyMauiApp y selecciona Editar el archivo del proyecto. Después, en el editor de archivos de proyecto inserta el siguiente XML antes del primer <ItemGroup>:

   <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net8.0-maccatalyst|AnyCPU'">
       <RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers>
   </PropertyGroup>
   

8. En la barra de herramientas de Visual Studio 2022 para Mac, pulsa el botón Reproducir para iniciar la aplicación en tu Mac:

   

   Visual Studio 2022 para Mac compilará e implementará la aplicación.

9. En la aplicación en ejecución, pulsa el botón Hacer clic aquí varias veces y observa cómo el recuento del número de clics se incrementa:

   

Las aplicaciones .NET MAUI que tienen como destino Windows solo se pueden iniciar y depurar mediante Visual Studio 2022.

Visual Studio Code (vista previa)

Nota:

La compatibilidad con .NET MAUI en Visual Studio Code todavía está en versión preliminar. Pruébala y comparte tu opinión con nosotros.

Instale la extensión

Sigue las instrucciones para configurar la extensión de .NET MAUI para Visual Studio Code.

Creación de la aplicación

Para crear una aplicación .NET MAUI:

1. Haz clic en Crear proyecto de .NET en el Explorador o CTRL/CMD+SHIFT+P>Nuevo proyecto de .NET....
2. Selecciona Aplicación .NET MAUI o .NET MAUI Blazor App.
3. Selecciona una carpeta vacía. Si el explorador de archivos vuelve a abrirse, la carpeta no está vacía.
4. Dé nombre al proyecto.
5. Asegúrate de que el proyecto se carga correctamente en el Explorador de soluciones y luego abre un archivo C# o XAML.

También puedes abrir un proyecto .NET MAUI existente en Visual Studio Code a través Archivo >Abrir....

Ahora deberías ver la aplicación en el Explorador de soluciones del kit de desarrollo #C de Visual Studio Code. Puesto que la extensión de .NET MAUI depende del kit de desarrollo de C#, puedes usar todas sus características junto con la extensión.

Elegir el dispositivo de destino

Haz clic en el símbolo de corchetes { } en la esquina inferior derecha de Visual Studio Code. Aquí puedes cambiar el proyecto de inicio, cambiar el destino de depuración a cualquier elemento válido en la máquina de desarrollo y anclar cualquiera de las opciones a la barra de estado de Visual Studio Code:

También puedes establecer el proyecto de inicio y el destino de depuración en la paleta de comandos mediante CTRL/CMD+SHIFT+P y buscando ".NET MAUI".

De forma predeterminada, puedes implementar en la máquina de desarrollo local de macOS o Windows. En macOS, también puedes implementar en simuladores de iOS.

Si quieres usar emuladores de Android, sigue estos pasos:

1. Ve en el terminal a <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/latest/bin/.
2. Ejecuta sdkmanager --install emulator y sdkmanager --install system-images;android-33;google_apis;x86_64 en Windows o ./sdkmanager --install emulator y ./sdkmanager --install system-images;android-33;google_apis;x86_64 en macOS.
3. Luego puedes crear un nuevo emulador en la línea de comandos con avdmanager de Android. Por ejemplo, puedes ejecutar avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" en Windows o ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64" en macOS.

También puedes depurar en dispositivos Android físicos.

Depurar la aplicación

Para depurar la aplicación, ve al menú Ejecutar y depurar de Visual Studio Code y selecciona el botón "Ejecutar y depurar". También puedes usar F5 para iniciar una sesión de depuración. Si Visual Studio Code te pide que selecciones un depurador, asegúrate de seleccionar ".NET MAUI".

El depurador elegirá automáticamente el destino de depuración y el proyecto de inicio que establezcas en el menú de llaves { }. Si no seleccionaste nada, se te pedirá que elijas un destino de depuración.

Una vez que la aplicación inicie la depuración, puedes usar las herramientas de depuración integradas de Visual Studio Code para establecer puntos de interrupción, recorrer paso a paso el código y mucho más.

Saber más

Si tienes algún problema con la extensión, puedes seguir los pasos de solución de problemas, ver nuestros problemas conocidos o proporcionar comentarios.

Pasos siguientes

En este tutorial, aprendiste a crear y ejecutar la primera aplicación de interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI).

Para obtener información sobre los aspectos básicos de la creación de una aplicación con .NET MAUI, consulta Creación de una aplicación .NET MAUI. Como alternativa, para obtener un curso completo de aprendizaje de .NET MAUI, consulta Creación de aplicaciones móviles y de escritorio con .NET MAUI.