Compartir a través de

Crear una aplicación UWP "¡Hola, mundo!" (XAML) con .NET 9

En este tutorial se enseña a usar XAML, C# y .NET 9 con AOT nativo (por adelantado) para crear una sencilla aplicación "Hello, World!" para la Plataforma universal de Windows (UWP) en Windows. Con un solo proyecto en Microsoft Visual Studio, puedes compilar una aplicación que se ejecute en todas las versiones compatibles de Windows 10 y Windows 11.

Aquí aprenderá a:

  • Cree un nuevo proyecto de UWP destinado a .NET 9 en Visual Studio.
  • Escriba XAML para cambiar la interfaz de usuario en la página de inicio.
  • Ejecute el proyecto en el escritorio local en Visual Studio.
  • Usa un speechSynthesizer para que la aplicación hable cuando presionas un botón.

Prerrequisitos

Nota:

Este tutorial usa Visual Studio 2022. Si usa una versión diferente de Visual Studio, puede parecer un poco diferente.

Paso 1: Crear un nuevo proyecto en Visual Studio

  1. Inicie Visual Studio.

  2. En el menú Archivo, seleccione Nuevo > Proyecto para abrir el cuadro de diálogo Nuevo Proyecto.

  3. Filtre la lista de plantillas disponibles eligiendo C# en la lista desplegable Lenguajes y UWP en la lista desplegable Tipos de proyecto para ver la lista de plantillas de proyecto de UWP disponibles para desarrolladores de C#.

    Captura de pantalla de la pantalla Crear un nuevo proyecto

    (Si no ve ninguna plantilla para UWP, es posible que falten los componentes para crear aplicaciones para UWP. Puedes repetir el proceso de instalación y agregar compatibilidad con UWP abriendo el Instalador de Visual Studio desde el menú Inicio de Windows. Consulta Configurar Visual Studio para el desarrollo para UWP para obtener más información).

  4. Elija la plantilla Aplicación en blanco para UWP .

    Importante

    Asegúrate de seleccionar la plantilla Aplicación en blanco para UWP . Si seleccionas la plantilla Aplicación en blanco para UWP (.NET Native), tendrá como destino el entorno de ejecución de .NET Native, no .NET 9. Las aplicaciones destinadas a .NET Native no tienen acceso a las últimas características de .NET y C# ni a las mejoras de seguridad y rendimiento. Para obtener más información sobre las diferencias entre los dos tipos de proyecto, consulta Modernice su aplicación UWP con la compatibilidad en versión preliminar de UWP para .NET 9 y Native AOT.

  5. Seleccione Siguiente y escriba "HelloWorld" como nombre del proyecto. Selecciona Crear.

    Captura de pantalla de la pantalla Configurar el nuevo proyecto

    Nota:

    Si es la primera vez que ha usado Visual Studio, es posible que vea un cuadro de diálogo Configuración que le pide que habilite modo desarrollador. El modo de desarrollador es una configuración especial que permite determinadas características, como el permiso para ejecutar aplicaciones directamente, en lugar de solo desde la Tienda. Para obtener más información, lea Habilitar el dispositivo para el desarrollo. Para continuar con esta guía, seleccione modo de desarrollador, haga clic en Síy cierre el cuadro de diálogo.

    Captura de pantalla de la pantalla Configuración de Windows para desarrolladores

  6. Aparece el cuadro de diálogo Versión de destino/Versión mínima. La configuración predeterminada es correcta para este tutorial, por lo que seleccione Aceptar para crear el proyecto.

    Captura de pantalla del cuadro de diálogo Nuevo proyecto de Windows en Visual Studio

  7. Cuando se abre el nuevo proyecto, sus archivos se muestran en el panel Explorador de soluciones de la derecha. Es posible que tenga que elegir la pestaña Explorador de soluciones en lugar de las pestañas Propiedades o Chat de GitHub Copilot para ver los archivos.

    Captura de pantalla del panel Explorador de soluciones de Visual Studio con el proyecto HelloWorld resaltado y todas las carpetas expandidas

Aunque la aplicación en blanco para UWP es una plantilla mínima, todavía contiene muchos archivos. Estos archivos son esenciales para todas las aplicaciones para UWP con C#. Cada proyecto de UWP que cree en Visual Studio los contiene.

¿Qué hay en los archivos?

Para ver y editar un archivo en el proyecto, haga doble clic en el archivo en el Explorador de soluciones de . Expanda un archivo XAML como una carpeta para ver su archivo de código asociado. Los archivos XAML se abren en una vista dividida que muestra la superficie de diseño y el editor XAML.

Nota:

¿Qué es XAML? Extensible Application Markup Language (XAML) es el lenguaje que se usa para definir la interfaz de usuario de la aplicación. Se puede escribir manualmente o crear mediante las herramientas de diseño de Visual Studio. Un archivo .xaml tiene un archivo de código subyacente .xaml.cs que contiene la lógica. Juntos, el CÓDIGO XAML y el código subyacente hacen una clase completa. Para obtener más información, consulta visión general de XAML.

App.xaml y App.xaml.cs

  • App.xaml es el archivo donde se declaran los recursos que se usan en toda la aplicación.
  • App.xaml.cs es el archivo de código subyacente para App.xaml. Al igual que todas las páginas de código subyacente, contiene un constructor que llama al método InitializeComponent. No escribirías el método InitializeComponent. Se genera mediante Visual Studio y su propósito principal es inicializar los elementos declarados en el archivo XAML.
  • App.xaml.cs es el punto de entrada de tu app.
  • App.xaml.cs también contiene métodos para controlar la activación y la suspensión de la aplicación.

MainPage.xaml

  • MainPage.xaml es donde defines la interfaz de usuario de la aplicación. Puedes agregar elementos directamente mediante el marcado XAML o puedes usar las herramientas de diseño proporcionadas por Visual Studio.
  • MainPage.xaml.cs es la página de código subyacente de MainPage.xaml. Es donde agregas la lógica de la aplicación y los controladores de eventos.
  • Juntos estos dos archivos definen una nueva clase denominada MainPage, que hereda de Page, en el HelloWorld espacio de nombres .

Package.appxmanifest

  • Un archivo de manifiesto que describe la aplicación: su nombre, descripción, icono, página de inicio, etc.
  • Incluye una lista de dependencias, recursos y archivos que contiene la aplicación.

conjunto de imágenes de logotipo

  • Recursos/Square150x150Logo.scale-200.png y Wide310x150Logo.scale-200.png representan tu aplicación (de tamaño medio o ancho) en el menú de inicio.
  • Assets/Square44x44Logo.png representa la aplicación en la lista de aplicaciones del menú Inicio, la barra de tareas y el administrador de tareas.
  • Assets/StoreLogo.png representa la aplicación en Microsoft Store.
  • Assets/SplashScreen.scale-200.png es la pantalla de presentación que aparece cuando se inicia la aplicación.
  • Los recursos /LockScreenLogo.scale-200.png se pueden usar para representar la aplicación en la pantalla de bloqueo, cuando el sistema está en modo de bloqueo.

Paso 2: Agregar un botón

Uso de la vista del diseñador

Vamos a agregar un botón a nuestra página. En este tutorial, trabajará con solo algunos de los archivos enumerados anteriormente: App.xaml, MainPage.xaml y MainPage.xaml.cs.

  1. Haga doble clic en MainPage.xaml para abrirlo en el editor XAML.

    Captura de pantalla de Visual Studio que muestra la página principal en el editor X A M L

    Nota:

    No verás una vista de diseño al trabajar con la plantilla Aplicación en blanco para UWP que usa .NET 9. Si quieres trabajar con un proyecto de UWP con una vista de diseño XAML, puedes usar la plantilla Aplicación en blanco para UWP (.NET Native) en su lugar. Como se indicó anteriormente, la plantilla Aplicación en blanco para UWP (.NET Native) es un poco diferente de la plantilla Aplicación en blanco para UWP , pero tiene la misma estructura básica. La principal diferencia es que la plantilla Aplicación en blanco para UWP (.NET Native) usa .NET Native para compilar la aplicación. Consulta Moderniza tu aplicación UWP con soporte UWP de vista previa para .NET 9 y AOT Nativo para obtener información sobre las ventajas de utilizar la nueva plantilla de .NET 9.

  2. Agregue el siguiente código XAML al <Grid> elemento en MainPage.xaml. Puede escribirlo o copiarlo y pegarlo desde aquí:

    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

  3. En este momento, ha creado una aplicación muy sencilla. Este es un buen momento para compilar, implementar e iniciar la aplicación y ver lo que parece. Puede depurar la aplicación en el equipo local, en un simulador o emulador, o en un dispositivo remoto. Este es el menú del dispositivo de destino en Visual Studio:

    Lista desplegable de destinos de dispositivo para depurar tu aplicación

    De forma predeterminada, la aplicación se ejecuta en el equipo local. El menú del dispositivo de destino proporciona varias opciones para depurar tu aplicación en dispositivos de la familia de escritorio.

    • HelloWorld (esto lo ejecuta en el equipo local)
    • WSL
    • Descargar nuevos emuladores...

  4. Ejecute la aplicación para ver el botón en acción. Para iniciar la depuración en el equipo local, puede ejecutar la aplicación seleccionando Depurar | Inicie el elemento Depuración en el menú haciendo clic en el botón Iniciar depuración de la barra de herramientas (con la etiqueta HelloWorld ) o presionando F5.

    La aplicación se abre en una ventana y aparece primero una pantalla de presentación predeterminada. La pantalla de presentación se define mediante una imagen (SplashScreen.png) y un color de fondo (especificado en el archivo de manifiesto de la aplicación).

    La pantalla de presentación desaparece y, a continuación, aparece la aplicación. Tiene este aspecto:

    Captura de pantalla de la aplicación HelloWorld en ejecución, que ahora contiene un botón con la etiqueta Button

  5. Presione la tecla Windows para abrir el menú Inicio y, a continuación, seleccione Todo para mostrar todas las aplicaciones. Observe que la implementación de la aplicación localmente la agrega a la lista de programas en el menú Inicio . Para volver a ejecutar la aplicación más adelante (no en modo de depuración), puede seleccionarla en el menú Inicio .

    Aún no hace mucho, pero enhorabuena, ha compilado e implementado su primera aplicación UWP en su equipo local.

  6. Para detener la depuración:

    Haga clic en el botón Detener depuración (botón Detener depuración) de la barra de herramientas.

    –o–

    En el menú Depurar, haga clic en Detener depuración.

    –o–

    Cierre la ventana de la aplicación.

  7. Cambie el texto del botón cambiando el Content valor de Button a Hello, world!.

    <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

    Si vuelve a ejecutar la aplicación, el botón se actualiza para mostrar el nuevo texto.

Paso 3: Controladores 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 (como el usuario que hace clic en el botón).

  1. Si aún no lo ha hecho, detenga la ejecución de la aplicación.

  2. Empiece a escribir Click en el editor XAML y Visual Studio te mostrará una lista de posibles eventos. Seleccione Haga clic en la lista.

    Captura de pantalla del editor XAML que muestra el evento Click en el panel de propiedades

  3. A continuación, seleccione <New Event Handler> en la lista. Esto crea un nuevo método de controlador de eventos en el archivo de código subyacente (MainPage.xaml.cs) y agrega el Click evento al elemento de botón en el código XAML.

    Captura de pantalla del editor XAML que muestra el mensaje para crear un nuevo controlador de eventos en el panel de propiedades

    El editor XAML agrega automáticamente el Click evento al elemento de botón en el código XAML:

    <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>

    Esto también agrega un controlador de eventos al archivo de código subyacente (MainPage.xaml.cs). El controlador de eventos es un método al que se llamará cuando se haga clic en el botón. El nombre del método es button_Clicky tiene dos parámetros: object sender y RoutedEventArgs e.

    private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}

    El evento Click es un evento estándar para botones. Cuando el usuario hace clic en el botón, se llama al método button_Click.

  4. Edite el código del controlador de eventos en MainPage.xaml.cs, la página de código subyacente. Aquí es donde las cosas se vuelven interesantes. Vamos a cambiarlo, así que tiene el siguiente aspecto:

    private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var 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();
}

    Asegúrese de que la firma del método ahora incluye la palabra clave async o recibirá un error al intentar ejecutar la aplicación.

¿Qué hicimos?

Este código usa algunas API de Windows para crear un objeto de síntesis de voz y, a continuación, le proporciona texto. (Para obtener más información sobre el uso de SpeechSynthesis, consulta el espacio de nombres SpeechSynthesis en la documentación de la API de Windows Runtime (WinRT).

Al ejecutar la aplicación y hacer clic en el botón, el equipo (o el teléfono) literalmente dirá "Hello, World!".

Resumen

Enhorabuena, has creado tu primera aplicación para UWP para Windows con .NET 9!

Para aprender a usar XAML para diseñar los controles que usará la aplicación, pruebe el tutorial de grido vaya directamente a pasos siguientes?

Contenido relacionado