Configure el entorno de desarrollo y compile su primera aplicación de interfaz de usuario de aplicaciones multiplataforma (.NET MAUI) de .NET.
Compruebe los requisitos del sistema para Visual Studio 2022.
Compruebe los requisitos del sistema para Visual Studio para Mac 2022 y los requisitos mínimos para la versión más reciente de Xcode.
10 minutos + tiempo de descarga/instalación
Una aplicación móvil y de escritorio que se ejecuta en Windows y Android y que muestra un mensaje Hello, World!
.
Una aplicación móvil y de escritorio que se ejecuta en Mac y Android y que muestra un mensaje Hello, World!
.
Descargar e instalar Visual Studio 2022.
Durante la instalación, se debe seleccionar la carga de trabajo Desarrollo de interfaz de usuario de aplicaciones multiplataforma de .NET. El uso del vínculo anterior debe preseleccionar todos los requisitos previos correctamente, como se muestra en la siguiente imagen:
Si ya tiene Visual Studio 2022, puede actualizar la instalación para agregar compatibilidad con .NET MAUI:
Descargue e instale Visual Studio 2022 para Mac.
Descargar Visual Studio 2022 para Mac
Durante la instalación, asegúrese de que se seleccionen las siguientes cargas de trabajo:
Las dos últimas cargas de trabajo (Android e iOS) deben seleccionarse automáticamente una vez que seleccione .NET MAUI.
Este tutorial está optimizado para la última versión de Visual Studio para Mac. Si ya tiene Visual Studio 2022 para Mac, puede comprobar si hay actualizaciones:
Para compilar las aplicaciones .NET MAUI, también necesitarás:
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.
Después de instalar Xcode, debe abrir Xcode, aceptar las condiciones del servicio e instalar componentes opcionales, si se le solicita.
Creación de una nueva aplicación de .NET MAUI:
En la ventana Crear un nuevo proyecto, escriba Blazor 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 8.0 (Soporte de duración largo) en la lista desplegable Marco si aún no está 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.
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.
En la ventana Elegir una plantilla para el nuevo proyecto, seleccione Multiplataforma > Aplicación, seleccione la plantilla aplicación .NET MAUI, y haga clic en el botón Continuar.
En la ventana Configurar la nueva aplicación de .NET MAUI, seleccione .NET 7.0 en la lista desplegable de la plataforma de destino si aún no se ha seleccionado y haga clic en el botón Continuar:
Escriba MyFirstMauiApp como nombre del proyecto y haga clic en el botón Crear.
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:
Si aún no ha habilitado el modo de desarrollador, Visual Studio le pedirá que lo habilite. En el cuadro de diálogo Habilitar modo de desarrollador para Windows, haga clic en el vínculo configuración para desarrolladores para abrir la aplicación Configuración:
En función de su versión de Windows, esta configuración puede tener un aspecto un poco diferente. Active el botón de alternancia en o junto al modo de desarrollador.
Se muestra el cuadro de diálogo Usar características para desarrolladores. Seleccione Sí para confirmar que quiere habilitar el modo de desarrollador.
Cierre la aplicación Configuración y, a continuación, cierre el cuadro de diálogo Habilitar modo de desarrollador para Windows. La aplicación debe empezar a ejecutarse.
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:
Este tutorial se centrará primero en la implementación de una aplicación de .NET MAUI en la máquina Mac 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 Mi Mac como destino de depuración de forma predeterminada. Presione el icono de reproducir (▶) 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.
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).
Vuelva a Visual Studio y deje la aplicación en ejecución. En la ventana Solución, haga doble clic en el archivo MainPage.xaml
del proyecto MyFirstMauiApp
. Si no ve la ventana de Solución, seleccione Ver > Solución en el menú principal.
Actualmente, el Text
de la primera Label
está establecido para que diga Hello, World!
, como se muestra en el código siguiente:
<Label
Text="Hello, World!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />
Actualice el texto para leer Hello, .NET MAUI!
:
<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:
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;
.
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.
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.
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 Hypter-V esté activada y seleccione Aceptar.
Deberá reiniciar el equipo en este momento para que el cambio surta efecto.
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.
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.
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 Mac. Ahora, vamos a configurar un dispositivo o emulador Android.
Si es la primera vez que compila una aplicación de .NET MAUI, deberá crear una nuevo Android Emulator. Verá Android Emulator en el menú de depuración. Presione el icono de reproducción (▶) para iniciar el proceso de creación.
Las opciones se rellenan automáticamente para un emulador base. Si es necesario, cambie las opciones y, a continuación, seleccione Crear.
En este punto, es posible que se le solicite que acepte el contrato de licencia del emulador de Android. Lea y seleccione Aceptar para continuar con el proceso. Esto descargará las imágenes del emulador y finalizará la creación del emulador para usarlo en Visual Studio.
Una vez creado el emulador, verá un botón que dice Reproducir. Haga clic en él.
Se iniciará el emulador de Android. Espere a que finalice completamente el inicio y verá que se muestra en el menú de depuración Visual Studio. Esto puede tardar algún tiempo si no usa la aceleración de hardware.
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.
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
Comprobación del estado de depuración USB
Dispositivo de confianza
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.
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.
En el menú, seleccione Depurar > Iniciar depuración. Si esta opción está deshabilitada, asegúrese de que haya un emulador o dispositivo seleccionado.
La aplicación se compilará, implementará en el dispositivo o emulador Android seleccionado y se ejecutará.
Enhorabuena, ha creado y ejecutado su primera aplicación .NET MAUI.
Ahora que ya tiene los conceptos básicos, siga aprendiendo a crear aplicaciones .NET MAUI con la ruta de aprendizaje autoguiado en Microsoft Learn.
Ruta de aprendizaje de .NET MAUI
Deje que James le guíe a través de la creación de una aplicación .NET MAUI completa de principio a fin:
Es posible que también le interese...