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

Nota:

Si está satisfecho con la funcionalidad actual de la Plataforma universal de Windows (UWP), no es necesario migrar el tipo de proyecto al SDK de Aplicaciones para Windows. WinUI 2.x y Windows SDK admiten tipos de proyecto para UWP. Si desea empezar a trabajar con WinUI 3 y el SDK de aplicaciones para Windows, puedes seguir los pasos del tutorial de SDK de Aplicaciones para Windows.

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 con Windows 10 o posterior. Para ello, deberá utilizar una plantilla de proyecto de la Plataforma universal de Windows (UWP), el lenguaje XAML (Extensible Application Markup Language) y el lenguaje de programación C#.

Si todavía no ha instalado Visual Studio, vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.

Crear un proyecto

En primer lugar, cree un proyecto de la Plataforma universal de Windows. En el tipo de proyecto se incluyen todos los archivos de plantilla que necesita, sin necesidad de agregar nada más.

1. Abra Visual Studio y, en la ventana de inicio, elija Crear un 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.

   

   Nota:

   Si no ve la plantilla de proyecto Aplicación vacía (Windows universal) , haga clic en el vínculo Instalar más herramientas y características.
   
   
   
   Se iniciará el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de la Plataforma universal de Windows y, después, seleccione Modificar.
   
   

3. Asigne un nombre al proyecto, HelloWorld, y seleccione 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 se trata de la primera vez que ha utilizado Visual Studio para crear una aplicación UWP, aparecerá el cuadro de diálogo Habilitar modo de desarrollador para Windows. Seleccione Configuración para desarrolladores para abrir Configuración. Active Modo de programador y, a continuación, elija Sí.
   
   
   
   Visual Studio instala un paquete de modo de desarrollador adicional. Una vez completada la instalación del paquete, cierre el cuadro de diálogo Configuración.

Crear la aplicación

Es hora de empezar a desarrollar. Deberá agregar un control de botón y una acción al botón y, a continuación, iniciar la aplicación "Hello World" para ver su aspecto.

Agregar un botón al lienzo Diseño

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

   

   Hay dos paneles: el Diseñador XAML, que incluye un lienzo de diseño, y el Editor XAML, donde se puede agregar o modificar el 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 abrirlo desde la barra de menús. Para ello, seleccione Ver>Barra de herramientas. O bien, pulse 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 observa el código en el Editor XAML, verá que el botón también se ha agregado ahí:

   

Agregar una etiqueta al botón

1. En el Editor XAML, cambie el valor de Contenido del botón de "Button" a "Hello World!".

   

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

   

Agregar un controlador de eventos

Un "controlador de eventos" parece algo complicado, pero es simplemente otro nombre para el código 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 del lienzo de diseño.

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

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

   

   Vamos a cambiarlo para que tenga esta apariencia:

   

   Este es el código que se debe 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é acabamos de hacer?

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

Ejecutar la aplicación

Es el momento de compilar, implementar y ejecutar la aplicación UWP "Hello World" para ver qué aspecto tiene y cómo suena. Esta es la manera de hacerlo.

1. Use el botón de reproducción (es el que tiene escrito Máquina local) para iniciar la aplicación en la máquina local.

   

   (Como alternativa, puede elegir Depurar>Iniciar depuración en la barra de menús o presionar F5 para iniciar la aplicación).

2. Vea la aplicación, que se muestra poco después de que desaparezca una pantalla de presentación. La aplicación debería tener un aspecto similar al de esta imagen:

   

3. Seleccione el botón Hello World.

   El dispositivo con Windows 10 o posterior dirá literalmente "Hello, World!".

4. 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 conceptos básicos sobre UWP y el IDE de Visual Studio. Para obtener más información, continúe con el tutorial siguiente:

Crear una interfaz de usuario

Vea también

• Información general sobre UWP
• Obtener muestras de aplicaciones para UWP