Tutorial: Creación de la primera aplicación de Windows App SDK en Visual Studio con XAML y C#
En esta introducción al entorno de desarrollo integrado (IDE) de Visual Studio, creará una aplicación "Hola mundo" que se ejecuta en cualquier dispositivo Windows 10 o posterior. Para ello, usarás una plantilla de proyecto de Windows App SDK (WinUI 3), extensible Application Markup Language (XAML) y el lenguaje de programación de C#.
Nota
WinUI 3 es el componente nativo de la plataforma de interfaz de usuario que se incluye con el SDK de aplicaciones de Windows (completamente desacoplado de los SDK de Windows ). Para obtener más información, vea WinUI 3.
Si todavía no ha instalado Visual Studio, vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.
Prerrequisitos
Necesita Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.
Cargas de trabajo y componentes necesarios para desarrollar con WinUI y windows App SDK. Para comprobar o instalar una carga de trabajo en Visual Studio, seleccione Tools>Obtener herramientas y características. Para obtener más información, consulte Cambiar cargas de trabajo o componentes individuales.
En la pestaña Cargas de trabajo del Instalador de Visual Studio, seleccione las siguientes cargas de trabajo y componentes:
- Para desarrollo de aplicaciones de C# con SDK de Aplicaciones para Windows, seleccione desarrollo de aplicaciones de Windows.
Creación de un proyecto
En primer lugar, cree un proyecto de WinUI 3. El tipo de proyecto viene con todos los archivos de plantilla que necesitas, ¡incluso antes de que hayas añadido nada!
Importante
Visual Studio 2019 solo admite Windows App SDK 1.1 y versiones anteriores. Se recomienda Visual Studio 2022 para desarrollar aplicaciones con todas las versiones del SDK de aplicaciones de Windows.
Las plantillas de SDK de Aplicaciones para Windows 1.1.x están disponibles mediante la instalación de una extensión de Visual Studio (VSIX).
Nota
Si ya tiene instalada una extensión de Visual Studio para Windows App SDK (VSIX), desinstálela antes de instalar otra versión. Para obtener instrucciones, consulte Administrar extensiones para Visual Studio.
- Puede instalar la versión estable más reciente de VSIX 1.1.x desde Visual Studio. Seleccione Extensiones>Administrar extensiones, busque SDK de Aplicaciones para Windows y descargue la extensión SDK de Aplicaciones para Windows. Cierre y vuelva a abrir Visual Studio y siga las indicaciones para instalar la extensión. Asegúrese de instalar las plantillas para Windows App SDK 1.1.
- Como alternativa, puede descargar la extensión directamente desde Visual Studio Marketplacee instalarla:
Una vez instalada la extensión templates, puede crear el primer proyecto. Para obtener más información sobre la compatibilidad con Visual Studio 2019, consulte Instalar herramientas para Windows App SDK. En el resto de este tutorial se supone que usa Visual Studio 2022.
Abra Visual Studio y, en la ventana de inicio, elija Crear un nuevo proyecto.
En la pantalla Crear un nuevo proyecto, escriba WinUI en el cuadro de búsqueda, elija la plantilla de C# para Aplicación vacía, empaquetada (WinUI 3 en escritorio) y haga clic en Siguiente.
Asigne un nombre al proyecto, HelloWorldy elija Crear.
Nota
Si se trata de la primera vez que ha utilizado Visual Studio para crear una aplicación del SDK de Aplicaciones para Windows, es posible que aparezca el cuadro de diálogo Configuración. Elija modo desarrolladory, después, elija Sí.
Visual Studio instala un paquete de modo de desarrollador adicional automáticamente. Una vez completada la instalación del paquete, cierre el cuadro de diálogo Configuración.
Creación de la aplicación
Es hora de empezar a desarrollar. Añadirás un control de botón, agregarás una acción al botón y, a continuación, ejecutarás la aplicación "Hola mundo" para ver cómo se ve.
Agregar un botón al lienzo de diseño
En el Explorador de soluciones, haga doble clic en MainWindow.xaml para abrir el editor de marcado XAML.
El Editor XAML es donde puede agregar o cambiar el marcado. A diferencia de los proyectos de UWP, WinUI 3 no tiene una vista Diseño.
Revise el control Button anidado en StackPanel en la raíz de la ventana.
Cambiar la etiqueta en el botón
En el Editor XAML, cambie el valor de Contenido del botón de "Button" a "¡Hola mundo!".
Observe que el botón también tiene un controlador de eventos Click denominado myButton_Click especificado. Llegaremos a eso en el paso siguiente.
Modificación del controlador de eventos
Un "controlador de eventos" suena complicado, pero es solo otro nombre para el código al que se llama cuando se produce un evento. En este caso, agrega una acción desencadenada por el botón "Hola mundo".
En el Explorador de soluciones, haga doble clic en MainWindow.xaml.cs, la página de código subyacente.
Edite el código del controlador de eventos en la ventana del editor de C# que se abre.
Aquí es donde las cosas se vuelven interesantes. El controlador de eventos predeterminado tiene este aspecto:
Vamos a cambiarlo, así que tiene el siguiente aspecto:
Este es el código que se va a copiar y pegar:
private async void myButton_Click(object sender, RoutedEventArgs e) { var welcomeDialog = new ContentDialog() { Title = "Hello from HelloWorld", Content = "Welcome to your first Windows App SDK app.", CloseButtonText = "Ok", XamlRoot = myButton.XamlRoot }; await welcomeDialog.ShowAsync(); }
¿Qué hicimos?
El código usa el control ContentDialog para mostrar un mensaje de bienvenida en un control emergente modal dentro de la ventana actual. (Para más información sobre el uso de Microsoft.UI.Xaml.Controls.ContentDialog, consulte Clase ContentDialog).
Ejecución de la aplicación
Es el momento de compilar, implementar e iniciar la aplicación "Hello World" de Windows App SDK para ver el aspecto que tiene. Así es como.
Use el botón Reproducir (tiene el texto HelloWorld (paquete)) para iniciar la aplicación en el equipo local.
(Como alternativa, puedes elegir Depurar>Iniciar depuración en la barra de menús o presionar F5 para iniciar la aplicación).
Visualiza tu aplicación, que aparece poco después de que desaparezca una pantalla de inicio. La aplicación debe tener un aspecto similar a esta imagen:
Seleccione el botón Hola Mundo.
El dispositivo Windows 10 o posterior mostrará un mensaje que indica "Bienvenido a la primera aplicación de Windows App SDK" con el título "Hello from HelloWorld". Haga clic en Aceptar para descartar el mensaje.
Para cerrar la aplicación, seleccione el botón Detener depuración en la barra de herramientas. (Como alternativa, puede elegir Depurar>Detener depuración en la barra de menús, o bien presionar Mayús+F5).
Pasos siguientes
Enhorabuena por completar este tutorial. Esperamos que haya aprendido algunos aspectos básicos sobre windows App SDK, WinUI 3 y el IDE de Visual Studio. Para más información, continúe con el siguiente tutorial: