Compartir a través de


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:

Captura de pantalla del Instalador de Visual Studio que muestra 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.

Captura de pantalla de la ventana Crear un proyecto que muestra el vínculo

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.

    Captura de pantalla del cuadro de diálogo

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

    Captura de pantalla del cuadro de diálogo

  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.

    Captura de pantalla del cuadro de diálogo Nuevo proyecto de la Plataforma universal de Windows que muestra la versión de destino predeterminada y la configuración de versión mínima.

    Nota

    Si es la primera vez que has usado Visual Studio para crear una aplicación para UWP, puede aparecer un cuadro de diálogo Configuración. Elija modo desarrolladory, después, elija .

    Captura de pantalla que muestra el cuadro de diálogo Configuración de UWP con la opción para habilitar el modo de desarrollador.

    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 .

  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.

    Captura de pantalla del cuadro de diálogo

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

    Captura de pantalla del cuadro de diálogo

  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.

    Captura de pantalla del cuadro de diálogo Nuevo proyecto de la Plataforma universal de Windows que muestra la versión de destino predeterminada y la configuración de versión mínima.

    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 .

    Captura de pantalla que muestra el cuadro de diálogo Configuración de UWP con la opción para habilitar el modo de desarrollador.

    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.

    Captura de pantalla de la ventana Explorador de soluciones en la que se muestran las propiedades, las referencias, los recursos y los archivos del proyecto HelloWorld con el archivo MainPage.xaml seleccionado.

    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.

    Captura de pantalla que muestra MainPage.xaml abierto en el IDE de Visual Studio y el panel Diseñador XAML muestra una superficie de diseño en blanco y el panel Editor XAML muestra parte del código XAML.

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

    Captura de pantalla que muestra la pestaña de la ventana flotante

    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.

    Captura de pantalla en la que se muestra el icono Anclar resaltado en la barra superior de la ventana del cuadro de herramientas.

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

    Captura de pantalla en la que se muestra el control

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

    Captura de pantalla que muestra el código del botón recién agregado resaltado en el editor XAML.

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

    Captura de pantalla de la ventana Explorador de soluciones en la que se muestran las propiedades, las referencias, los recursos y los archivos del proyecto HelloWorld. El archivo MainPage.xaml está seleccionado.

    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.

    Captura de pantalla que muestra MainPage.xaml abierto en el IDE de Visual Studio. El panel Diseñador XAML muestra una superficie de diseño en blanco y el panel Editor XAML muestra parte del código XAML.

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

    Captura de pantalla que muestra la pestaña de la ventana flotante

    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.

    Captura de pantalla en la que se muestra el icono Anclar resaltado en la barra superior de la ventana del cuadro de herramientas.

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

    Captura de pantalla en la que se muestra el control

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

    Captura de pantalla que muestra el código del botón recién agregado resaltado en el editor XAML.

Agregar una etiqueta al botón

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

    Captura de pantalla que muestra el código XAML del botón en el editor XAML, con la propiedad Content cambiada a Hello World.

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

    Captura de pantalla que muestra el control botón en el lienzo del Diseñador XAML con la etiqueta del botón cambiada a ¡Hola Mundo!

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

    Captura de pantalla que muestra el código XAML del botón en el editor XAML con el valor de la propiedad Content cambiada a

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

    Captura de pantalla que muestra el control Botón en el lienzo del Diseñador XAML con la etiqueta del botón cambiada a ¡Hola Mundo!

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:

    Captura de pantalla que muestra el código de C# para el controlador de eventos de Button_Click predeterminado.

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

    Captura de pantalla que muestra el código de C# para el nuevo controlador de eventos Button_Click asincrónico.

    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();
    }
    
  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:

    Captura de pantalla que muestra el código de C# para el controlador de eventos de Button_Click predeterminado.

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

    Captura de pantalla que muestra el código de C# para el nuevo controlador de eventos Button_Click asincrónico.

    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 para iniciar la aplicación en el equipo local. Tiene el texto Máquina Local.

    Captura de pantalla que muestra el cuadro desplegable abierto junto al botón Reproducir con la opción

    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 figura:

    Captura de pantalla que muestra la aplicación

  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.

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.

    Captura de pantalla que muestra el cuadro desplegable abierto junto al botón Reproducir con la opción

    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:

    Captura de pantalla que muestra la aplicación

  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.

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: