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

Necesita Visual Studio para completar este tutorial. Visite la página de descargas de Visual Studio para obtener una versión gratuita.

Nota

En este tutorial se requiere la plantilla de proyecto Aplicación vacía (Windows universal). Durante la instalación, seleccione la carga de trabajo Desarrollo de la Plataforma universal de Windows:

Si ya tiene Visual Studio instalado y necesita agregarlo, en el menú, seleccione Herramientas>Obtener herramientas y característicaso en la ventana crear un nuevo proyecto, seleccione el vínculo Instalar más herramientas y características.

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 Windows universal en el cuadro de búsqueda, elija la plantilla de C# para Aplicación vacía (Windows universal) y haga clic en 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 Configuración.

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 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 el momento de compilar, implementar e iniciar 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. Mira 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:

   

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