Compartir a través de

Creación de la primera aplicación WinUI 3

En esta serie de tutoriales se muestra cómo crear una aplicación WinUI mediante XAML y C#. La aplicación que va a crear es una aplicación de nota, donde el usuario puede crear, guardar y cargar varias notas. Puede descargar o ver el código de este tutorial desde el repositorio GitHub.

En este tutorial, aprenderá a:

  • Use el marcado XAML para definir la interfaz de usuario de la aplicación.
  • Interactúe con elementos XAML a través del código de C#.
  • Guarde y cargue archivos desde el sistema de archivos local.
  • Crear vistas y enlazarlas a datos.
  • Use la navegación para desplazarse hacia y desde las páginas de la aplicación.
  • Use recursos como documentación y aplicaciones de ejemplo para crear su propia aplicación.

Usará Visual Studio 2022 para crear una aplicación que pueda usar para introducir una nota y guardarla en el almacenamiento local de la aplicación. Puede encontrar el código fuente de esta aplicación aquí. La aplicación tendrá dos páginas:

  • NotePage - una página para editar una sola nota.
  • AllNotesPage : una página para mostrar todas las notas guardadas.

A continuación se muestra la aplicación final:

AllNotesPage

Captura de pantalla final de la aplicación de notas, en la que se muestran tres notas guardadas.

NotePage

Captura de pantalla final de la aplicación de notas, que muestra una nueva nota en blanco.

Crea el proyecto de Visual Studio

Para comenzar este tutorial, debe crear un proyecto de aplicación WinUI en Visual Studio con la plantilla de proyecto de C# Blank App, Packaged (WinUI in Desktop). Al crear el project, use la siguiente configuración:

  • Nombre del Proyecto

    Debe establecerse en WinUINotes. Si el project se denomina algo diferente, el código que copia y pega de este tutorial puede producir errores de compilación. Esto se debe a que Visual Studio usa el nombre del project como valor predeterminado namespace para el código de la aplicación.

  • Windows App SDK

    En este tutorial se usan características nuevas en Windows App SDK 1.7. Debe asegurarse de que el paquete NuGet de Windows App SDK se actualiza a la versión 1.7 o posterior.

Importante

Si no has creado un project winUI antes, sigue los pasos descritos en Start developing Windows apps para asegurarte de que tu entorno de desarrollo y Visual Studio project estén configurados correctamente.

Al ejecutar el proyecto de aplicación en blanco (como se describe en Iniciar el desarrollo de aplicaciones de Windows), debería ver una ventana vacía con el siguiente aspecto:

Ventana de la aplicación de notas con una barra de título y un área de contenido vacía.

Sugerencia

Con frecuencia, usará documentos de referencia de API y documentos conceptuales al desarrollar aplicaciones de Windows. En este tutorial, verá vínculos insertados en el texto, y en grupos bajo la etiqueta 'Más información en los documentos:'. Estos vínculos son opcionales; No es necesario seguirlos para completar el tutorial. Se proporcionan en caso de que quieras anotar dónde encontrar la información que necesitarás al empezar a crear tus propias aplicaciones.

Continue al paso 1: configuración de Project

  • Last updated on