Tutorial: Creación de la primera aplicación de Windows App SDK en Visual Studio con XAML y C#

En Desarrollo de aplicaciones de C# mediante el SDK de aplicaciones de Windows, seleccione Desarrollo de aplicaciones WinUI.

En Desarrollo de aplicaciones de C# mediante el SDK de aplicaciones de Windows, seleccione Desarrollo de aplicaciones WinUI.

1. Abra Visual Studio y, en la ventana de inicio, elija Crear un nuevo proyecto.

2. En la pantalla Crear un nuevo proyecto , escriba WinUI en el cuadro de búsqueda, elija la plantilla de C# para Aplicación en blanco de WinUI (empaquetada) y, a continuación, elija Siguiente.

   

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

   

1. Abra Visual Studio y, en la ventana de inicio, elija Crear un nuevo proyecto.

2. En la pantalla Crear un nuevo proyecto , escriba winui en el cuadro de búsqueda, elija la plantilla de C# para la plantilla de C# para Aplicación en blanco, Empaquetada (WinUI 3 en escritorio) y, a continuación, elija Siguiente.

   

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

   

1. En el Explorador de soluciones, haga doble clic en MainWindow.xaml para abrir el editor de marcado XAML.

   

   El Editor XAML es donde puede agregar o cambiar el marcado. A diferencia de los proyectos de UWP, WinUI 3 no tiene una vista Diseño.

   

2. Dentro del <Grid> elemento, empiece a escribir <Button. IntelliSense le ofrece una opción de botón. Presione Tab para aceptar.

   

1. En el Explorador de soluciones, haga doble clic en MainWindow.xaml para abrir el editor de marcado XAML.

   

   El Editor XAML es donde puede agregar o cambiar el marcado. A diferencia de los proyectos de UWP, WinUI 3 no tiene una vista Diseño.

   

2. Revise el control Button anidado en StackPanel en la raíz de la ventana.

   

1. En el Editor XAML, cambie el valor contenido del botón de su valor actual a "Hello World!".

   

2. Coloque el cursor en la <Button> etiqueta de inicio del elemento (después de los atributos existentes, como Content) y empiece a escribir Click. IntelliSense ofrece un nuevo controlador de eventos denominado Button_Click. Trabaja con ese código en la sección siguiente.

   

1. En el Editor XAML, cambie el valor contenido del botón de su valor actual a "Hello World!".

   

2. Observe que el botón también tiene un controlador de eventos Click denominado myButton_Click especificado. Trabajas con eso en el próximo paso.

   

1. En el Explorador de soluciones, haga doble clic en MainWindow.xaml.cs, la página de código subyacente.

2. Edite el código del controlador de eventos en la ventana del editor de C# que se abre.

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

   

   Vamos a cambiarlo, así que tiene el siguiente aspecto:

   

   Este es el código que se va a copiar y pegar:

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
       var welcomeDialog = new ContentDialog()
       {
           Title = "Hello from HelloWorld",
           Content = "Welcome to your first Windows App SDK app.",
           CloseButtonText = "Ok",
           XamlRoot = ((FrameworkElement)sender).XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }
   

1. En el Explorador de soluciones, haga doble clic en MainWindow.xaml.cs, la página de código subyacente.

2. Edite el código del controlador de eventos en la ventana del editor de C# que se abre.

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

   

   Vamos a cambiarlo, así que tiene el siguiente aspecto:

   

   Este es el código que se va a copiar y pegar:

   private async void myButton_Click(object sender, RoutedEventArgs e)
   {
       var welcomeDialog = new ContentDialog()
       {
           Title = "Hello from HelloWorld",
           Content = "Welcome to your first Windows App SDK app.",
           CloseButtonText = "Ok",
           XamlRoot = myButton.XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }