Creación de una aplicación de Hola mundo con C# y WinUI 3/SDK de Aplicaciones para Windows

En este tutorial, usaremos Visual Studio 2022 y WinUI 3/SDK de Aplicaciones para Windows para crear una aplicación de escritorio de Windows que muestre "Hola mundo" cuando se inicie:

Este tutorial está dirigido a principiantes y no se asume que estén familiarizados con el desarrollo de escritorio de Windows.

Requisitos previos

En este tutorial se usa Visual Studio y se basa en la plantilla de aplicación en blanco de WinUI 3. Para configurarlo, siga las instrucciones de Introducción a WinUI. Instalará Visual Studio, lo configurará para desarrollar aplicaciones con WinUI, creará el proyecto de Hola mundo y se asegurará de que tiene la versión más reciente de WinUI.

Cuando haya terminado, vuelva aquí para obtener más información sobre el proyecto de Hola mundo y realizar algunas actualizaciones en él.

Revisión del proyecto de aplicación en blanco

Las plantillas de proyecto de WinUI de Visual Studio contienen todo lo que necesita para crear y ejecutar la aplicación. La plantilla de aplicación en blanco crea una ventana con un botón interactivo que tiene este aspecto cuando se ejecuta en modo de depuración.

Haga clic en el botón Click Me para ver una demostración del control de eventos:

En este caso, el evento Clic de un control Botón está enlazado al controlador de eventos myButton_Click ubicado en MainWindow.xaml.cs:

Aunque MainWindow.xaml.cs contiene los elementos de lógica de negocios de nuestra ventana principal en forma de archivo de código subyacente, los elementos de presentación se encuentran en MainWindow.xaml:

Esta separación de los elementos de lógica de negocios y presentación le permite enlazar datos y eventos hacia y desde la interfaz de usuario de la aplicación mediante un patrón de desarrollo de aplicaciones coherente.

Estructura de archivos del proyecto

Vamos a revisar la estructura de archivos del proyecto antes de realizar cambios en el código.

La estructura de archivos del proyecto tiene el siguiente aspecto:

En esta tabla se describen los archivos, empezando por la parte superior hacia abajo:

Elemento	Descripción
Solution 'Hello World'	Se trata de un archivo de solución, un contenedor lógico para los proyectos. Los proyectos suelen ser aplicaciones, pero también pueden admitir bibliotecas de clases.
Hello World	Se trata de un archivo de proyecto, un contenedor lógico para los archivos de la aplicación.
Dependencies	La aplicación depende de marcos (como .NET y el SDK de Windows) y paquetes (como el SDK de Aplicaciones para Windows). A medida que introduce funcionalidades más sofisticadas y bibliotecas de terceros en la aplicación, aparecerán dependencias adicionales aquí.
Properties	Por convención, los proyectos de WinUI 3 colocan perfiles de publicación e inician archivos de configuración en esta carpeta.
PublishProfiles	Los perfiles de publicación especifican la configuración de publicación de la aplicación en una variedad de plataformas.
launchSettings.json	Este archivo le permite configurar perfiles de inicio que se pueden usar al ejecutar la aplicación a través de dotnet run.
Assets	Esta carpeta contiene el logotipo, las imágenes y otros recursos multimedia de la aplicación.
app.manifest	Este archivo de manifiesto de la aplicación contiene la configuración relacionada con la forma en que Windows muestra la aplicación cuando se instala en dispositivos de usuario.
App.xaml	Este archivo de marcado especifica los recursos compartidos y accesibles globalmente de los que depende la aplicación.
App.xaml.cs	Este archivo de código subyacente representa el punto de entrada a la lógica de negocios de la aplicación. Se encarga de crear y activar una instancia de su MainWindow.
MainWindow.xaml	Este archivo de marcado contiene los elementos de presentación de la ventana principal de la aplicación.
MainWindow.xaml.cs	Este archivo de código subyacente contiene los elementos de lógica de negocios asociados a la ventana principal de la aplicación.
Package.appxmanifest	Este archivo de manifiesto de paquete le permite configurar información del publicador, logotipos, arquitecturas de procesador y otros detalles que determinan cómo aparece la aplicación en Windows Store.

Mostrar "Hola mundo"

Para mostrar "Hola mundo" en lugar del botón "Haga clic", vaya a MainWindow.xaml. Debería ver el marcado XAML de un control StackPanel:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Sugerencia

Con frecuencia, hará referencia a documentos de referencia de API al crear aplicaciones de Windows. Los documentos de referencia de StackPanel contienen más información sobre el control StackPanel y sobre cómo se puede personalizar.

Vamos a actualizar el control StackPanel para que muestre Hello world! con texto rojo:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>

Si intenta ejecutar la aplicación ahora, Visual Studio producirá un error en las líneas de The name 'myButton' does not exist in the current context. Esto se debe a que hemos actualizamos la capa de presentación con un nuevo control, pero no hemos actualizado la lógica de negocios del control anterior en nuestro archivo de código subyacente.

Vaya a MainWindow.xaml.cs y elimine el controlador de eventos myButton_Click. Podemos hacerlo porque hemos reemplazado el botón Click me interactivo por el texto estático Hello world!. La lógica de negocios de la ventana principal debería tener ahora este aspecto:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    // ↓ you can delete this ↓
    //private void myButton_Click(object sender, RoutedEventArgs e)
    //{
    //    myButton.Content = "Clicked";
    //}
}

Si reinicia la aplicación, debería ver Hello world! en color rojo:

Actualización de la barra de título de la aplicación

Agregue this.Title = "Hello world!"; al archivo de código subyacente MainWindow.xaml.cs:

public MainWindow()
{
    this.InitializeComponent();
    this.Title = "Hello world!"; // <- this is new
}

Si reinicia la aplicación, ahora debería ver Hello world! en el cuerpo y en la barra de título:

Felicidades. Ha creado su primera aplicación de SDK de Aplicaciones para Windows/WinUI 3.

Resumen

Esto es lo que ha logado en estas instrucciones:

1. Ha empezado con la plantilla de proyecto de Visual Studio.
2. Ha experimentado un controlador de eventos que enlaza el evento de unButton control a una actualización de Click la interfaz de usuario.
3. Se ha familiarizado con la convención de separar los elementos de presentación de los elementos de lógica de negocios mediante archivos de marcado XAML bien acoplados y archivos de código subyacente de C#, respectivamente.
4. Ha revisado la estructura de archivos predeterminada de proyecto de WinUI 3.
5. Ha modificado tanto la capa de presentación (marcado XAML) como la lógica de negocios (código subyacente) para admitir un nuevo control TextBlock dentro de StackPanel.
6. Ha revisado los documentos de referencia para comprender mejor las propiedades del control StackPanel.
7. Ha actualizado la barra de título de la ventana principal.

Archivos de código completo

<!-- MainWindow.xaml -->
<Window
    x:Class="Hello_World.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
    </StackPanel>
</Window>

// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            this.Title = "Hello world!";
        }
    }
}

<!-- App.xaml -->
<Application
    x:Class="Hello_World.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Hello_World">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>

// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;

namespace Hello_World
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }

        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            m_window.Activate();
        }

        private Window m_window;
    }
}

Preguntas más frecuentes

P: ¿Qué significa "empaquetado"?

Las aplicaciones de Windows se pueden entregar a los usuarios finales mediante una variedad de formatos de empaquetado de aplicaciones. Al trabajar con WinUI 3/SDK de Aplicaciones para Windows, las aplicaciones empaquetadas usan MSIX para agrupar la aplicación de forma que ofrezca una instalación y actualizaciones cómodas a los usuarios finales. Consulte Arquitectura de implementación e información general sobre las aplicaciones dependientes del marco para obtener más información.

P: ¿Puedo usar VS Code para crear aplicaciones de WinUI 3?

Aunque técnicamente es posible, se recomienda encarecidamente usar Visual Studio 2019/2022 para crear aplicaciones de escritorio con WinUI 3/SDK de Aplicaciones para Windows. Consulte las preguntas más frecuentes para desarrolladores de Windows para obtener más información.

P: ¿Puedo usar C++ para crear aplicaciones de WinUI 3?

Sí. Para más información, vea Introducción a C++/WinRT.

Temas relacionados

• Ejemplos de aplicaciones para el desarrollo en Windows
• Preguntas más frecuentes para desarrolladores de Windows
• Glosario para desarrolladores de Windows
• Procedimientos recomendados para el desarrollo de Windows