Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
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
- ¿Qué es una aplicación universal de Windows?
- Descarga Visual Studio (y Windows). Si necesita una mano, aprenda a configurar.
- También se supone que usa el diseño de ventana predeterminado en Visual Studio. Si cambia el diseño predeterminado, puede restablecerlo en el menú de la ventana mediante el comando Restablecer diseño de ventana.
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
Inicie Visual Studio.
En el menú Archivo, seleccione Nuevo > Proyecto para abrir el cuadro de diálogo Nuevo Proyecto.
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#.
(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).
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.
Seleccione Siguiente y escriba "HelloWorld" como nombre del proyecto. Selecciona Crear.
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.
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.
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.
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étodoInitializeComponent
. 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 elHelloWorld
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.
Haga doble clic en MainPage.xaml para abrirlo en el editor XAML.
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.
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"/>
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:
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...
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:
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.
Para detener la depuración:
Haga clic en el 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.
Cambie el texto del botón cambiando el
Content
valor deButton
aHello, 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).
Si aún no lo ha hecho, detenga la ejecución de la aplicación.
Empiece a escribir
Click
en el editor XAML y Visual Studio te mostrará una lista de posibles eventos. Seleccione Haga clic en la lista.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 elClick
evento al elemento de botón en el código XAML.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_Click
y tiene dos parámetros:object sender
yRoutedEventArgs 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étodobutton_Click
.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?