Tutorial: Creación de la primera aplicación de la Plataforma universal de Windows en Visual Studio con XAML y C#

En este tutorial, como introducción al entorno de desarrollo integrado (IDE) de Visual Studio, se crea una aplicación "Hello World" que se ejecuta en cualquier dispositivo Windows 10 o posterior. Para ello, usas una plantilla de proyecto para la Plataforma universal de Windows (UWP), lenguaje de marcado extensible de aplicaciones (XAML) y el lenguaje de programación C#.

Nota

Si estás satisfecho con tu funcionalidad actual en la Plataforma universal de Windows (UWP), no es necesario migrar el tipo de proyecto a Windows App SDK. WinUI 2.x y Windows SDK admiten tipos de proyecto para UWP. Si quiere empezar a trabajar con WinUI 3 y Windows App SDK, puede seguir los pasos descritos en el tutorial Windows App SDK.

En este tutorial, usted:

• Creación de un proyecto
• Creación de una aplicación
• Ejecución de la aplicación

Prerrequisitos

Necesitas:

• Visual Studio. Visite la página de descargas de Visual Studio para obtener una versión gratuita.

• Cargas de trabajo y componentes necesarios para desarrollar una aplicación para UWP. Para comprobar o instalar una carga de trabajo en Visual Studio, seleccione Herramientas>Obtener herramientas y características, o bien, en la ventana Crear un nuevo proyecto , seleccione el vínculo Instalar más 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:

  Visual Studio 2022, versión 17.10 o posterior

  • Para el desarrollo de aplicaciones mediante UWP, seleccione la carga de trabajo Desarrollo de aplicaciones winUI . A continuación, en el panel Detalles de instalación, en el nodo Desarrollo de aplicaciones winUI , seleccione la opción para UWP que necesite (esto también seleccionará los componentes necesarios adicionales).

  • En C#, seleccione Herramientas de la Plataforma universal de Windows y SDK de Windows 11 (10.0.26100.0) .

  • Este tutorial requiere la plantilla de proyecto Aplicación en blanco para UWP .

  Visual Studio 2022 versión 17.1 - 17.9

  • En Desarrollo de aplicaciones de C# con UWP, seleccione la carga de trabajo Desarrollo de la Plataforma universal de Windows .

  • En este tutorial se requiere la plantilla de proyecto Aplicación vacía (Windows universal).

  Nota

  En Visual Studio 17.10 - 17.12, esta carga de trabajo se denomina desarrollo de aplicaciones de Windows.

Creación de un proyecto

En primer lugar, cree un proyecto de plataforma universal de Windows. El tipo de proyecto incluye todos los archivos de plantilla que necesita, antes de agregar nada.

1. Abra Visual Studio y, en la ventana de inicio, elija Crear un nuevo proyecto.

2. En la pantalla Crear un nuevo proyecto , escriba Universal Windows en el cuadro de búsqueda, elija la plantilla de C# para Aplicación vacía (Windows universal) o aplicación en blanco para UWP en Visual Studio 2022 17.10 o posterior y, a continuación, elija Siguiente.

   

3. Asigne un nombre al proyecto, HelloWorldy elija Crear.

   

4. Acepte la versión de destino predeterminada y la configuración de la versión mínima en el cuadro de diálogo Nuevo proyecto de la Plataforma universal de Windows.

   

   Nota

   Si es la primera vez que has usado Visual Studio para crear una aplicación para UWP, aparece el cuadro de diálogo Habilitar modo de desarrollador para Windows. Seleccione Configuración para desarrolladores para abrir Configuración. Active modo desarrolladory 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 de Configuración de .

Creación de la aplicación

Es hora de empezar a desarrollar. Agregue un control de botón, agregue una acción al botón y, a continuación, inicie la aplicación "Hola mundo" para ver lo que parece.

Agregar un botón en el lienzo de diseño

1. En el Explorador de soluciones de , haga doble clic en MainPage.xaml para abrir una vista dividida.

   

   Hay dos paneles: el diseñador XAML , que incluye un lienzo de diseño y el editor XAML , donde puedes agregar o cambiar código.

   

2. Elija Cuadro de herramientas para abrir la ventana flotante Cuadro de herramientas.

   

   Si no ve la opción Cuadro de herramientas, puede abrirla desde la barra de menús. Para ello, elija Ver>barra de herramientas. O bien, presione Ctrl+Alt+X.

3. Seleccione el icono Anclar para acoplar la ventana del cuadro de herramientas.

   

4. Seleccione el control del botón y arrástrelo al lienzo de diseño.

   

   Si examinas el código del editor XAML de , verás que el botón aparece allí también:

   

Agregar una etiqueta al botón

1. En el Editor XAML, cambie el valor Button Content de Botón a ¡Hola mundo!

   

2. Observe que el botón del Diseñador XAML también cambia.

   

Adición de un 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 al botón ¡Hola Mundo!.

1. Haga doble clic en el control de botón en el lienzo de diseño.

2. Edite el código del controlador de eventos en MainPage.xaml.cs, la página de código subyacente.

   Aquí es donde las cosas son interesantes. El controlador de eventos predeterminado tiene este aspecto:

   

   Cámbielo, así que tiene el siguiente aspecto:

   

   Este es el código que se va a copiar y pegar:

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
      MediaElement mediaElement = new MediaElement();
      var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
      Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
      mediaElement.SetSource(stream, stream.ContentType);
      mediaElement.Play();
   }
   

¿Qué hicimos?

El código usa algunas API de Windows para crear un objeto de síntesis de voz y, a continuación, le proporciona texto para decir. Para obtener más información sobre el uso de SpeechSynthesis, vea System.Speech.Synthesis.

Ejecución de la aplicación

Es hora de compilar, implementar y lanzar la aplicación UWP "Hola Mundo" para ver cómo se ve y suena. Así es como.

1. Use el botón Reproducir (tiene el texto máquina local) 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.

2. Ve tu aplicación, que aparece poco después de que desaparezca la pantalla de inicio. La aplicación debe tener un aspecto similar a esta imagen:

   

3. Seleccione el botón Hola Mundo.

   El dispositivo Windows 10 o posterior dice literalmente" "Hello, World!"

4. Para cerrar la aplicación, seleccione el botón Detener depuración en la barra de herramientas. O bien, elija Depurar>Detener depuración en la barra de menús o presione Mayús+F5.

Contenido relacionado

• Información general sobre UWP
• obtener ejemplos de aplicaciones UWP

Paso siguiente

Enhorabuena por completar este tutorial. Esperamos que hayas aprendido algunos aspectos básicos sobre UWP y el IDE de Visual Studio. Para más información, continúe con el siguiente tutorial:

Crear una interfaz de usuario