Configuración del proyecto

Antes de empezar a codificar la aplicación, echaremos un vistazo rápido al proyecto de Visual Studio y nos ocuparemos de la configuración de algún proyecto. Cuando Visual Studio crea un proyecto de WinUI 3, se generan varias carpetas importantes y archivos de código. Estos se pueden ver en el panel Explorador de soluciones de Visual Studio:

Los elementos enumerados aquí son los con los que interactuarás principalmente. Estos archivos ayudan a configurar y ejecutar la aplicación WinUI 3. Cada archivo sirve para un propósito diferente, que se describe a continuación:

• Carpeta Assets

  Esta carpeta contiene el logotipo, las imágenes y otros recursos multimedia de la aplicación. Se inicia rellenado con archivos de marcador de posición para el logotipo de la aplicación. Este logotipo representa la aplicación en el menú Inicio de Windows, la barra de tareas de Windows y en Microsoft Store cuando la aplicación se publica allí.

• App.xaml y App.xaml.cs

  El App.xaml archivo contiene recursos XAML para toda la aplicación, como colores, estilos o plantillas. El App.xaml.cs archivo generalmente contiene código que crea instancias y activa la ventana de la aplicación. En este proyecto, apunta a la clase MainWindow.

• MainWindow.xaml y MainWindow.xaml.cs

  Estos archivos representan la ventana de la aplicación.

• Package.appxmanifest

  Este archivo de manifiesto de paquete te permite configurar información del publicador, logotipos, arquitecturas de procesador y otros detalles que determinan cómo aparece la aplicación en Microsoft Store.

Archivos XAML y clases parciales

Extensible Application Markup Language (XAML) es un lenguaje declarativo que puede inicializar objetos y establecer propiedades de objetos. Puedes crear elementos de interfaz de usuario visibles en el marcado XAML declarativo. A continuación, puedes asociar un archivo de código independiente para cada archivo XAML (normalmente denominado archivo de código subyacente ) que pueda responder a eventos y manipular los objetos que declares originalmente en XAML.

Por lo general, hay dos archivos con cualquier archivo XAML, el .xaml propio archivo y un archivo de código subyacente correspondiente que es un elemento secundario del mismo en el Explorador de soluciones.

• El .xaml archivo contiene marcado XAML que define la interfaz de usuario de la aplicación. El nombre de clase se declara con el x:Class atributo .
• El archivo de código contiene código que creas para interactuar con el marcado XAML y una llamada al InitializeComponent método . La clase se define como .partial class

Al compilar el InitializeComponent proyecto, se llama al método para analizar el .xaml archivo y generar código unido al código partial class para crear la clase completa.

Obtenga más información en los documentos:

• Información general sobre XAML
• Clases y métodos parciales (Guía de programación de C#)
• Atributo x:Class, x:Class (Directiva)

Actualizar MainWindow

La MainWindow clase incluida con el proyecto es una subclase de la clase Window XAML, que se usa para definir el shell de la aplicación. La ventana de la aplicación tiene dos partes:

• La parte del cliente de la ventana es donde va el contenido.
• La parte que no es cliente es la parte controlada por el sistema operativo Windows. Incluye la barra de título, donde están los controles de título (botones Min/Max/Close), icono de aplicación, título y área de arrastre. También incluye el marco alrededor del exterior de la ventana.

Para que la aplicación WinUI Notes sea coherente con las directrices de Fluent Design, realizará algunas modificaciones en MainWindow. En primer lugar, aplicará material de Mica como telón de fondo de la ventana. Mica es un material opaco y dinámico que incorpora fondos de pantalla de tema y escritorio para pintar el fondo de la ventana. A continuación, extenderás el contenido de la aplicación en el área de la barra de título y reemplazarás la barra de título del sistema por un control TitleBar XAML. Esto hace un mejor uso del espacio y le proporciona más control sobre el diseño, a la vez que proporciona toda la funcionalidad necesaria de la barra de título.

También agregará un frame como contenido de la ventana. La Frame clase funciona con la clase Page para permitirle navegar entre páginas de contenido en la aplicación. Agregará las páginas en un paso posterior.

Sugerencia

Puede descargar o ver el código de este tutorial desde el repositorio de GitHub. Para ver el código tal como está en este paso, consulte esta confirmación: página de notas: inicial.

1. Haga doble clic MainWindow.xaml en el Explorador de soluciones para abrirlo.

2. Entre las etiquetas de apertura y cierre<Window.. > , reemplace cualquier XAML existente por este:

   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
   
   <Grid>
       <Grid.RowDefinitions>
           <!-- Title Bar -->
           <RowDefinition Height="Auto" />
           <!-- App Content -->
           <RowDefinition Height="*" />     
       </Grid.RowDefinitions>
       <TitleBar x:Name="AppTitleBar"
                 Title="WinUI Notes">
           <TitleBar.IconSource>
               <FontIconSource Glyph="&#xF4AA;"/>
           </TitleBar.IconSource>
       </TitleBar>
   
       <!-- App content -->
       <Frame x:Name="rootFrame" Grid.Row="1"/>
   </Grid>
   

3. Para guardar el archivo, presione CTRL + S, haga clic en el icono Guardar de la barra de herramientas o seleccione el menú Guardar>mainPage.xaml.

No te preocupes si no entiendes lo que hace todo este marcado XAML en este momento. A medida que compilas el resto de la interfaz de usuario de la aplicación, explicaremos los conceptos xaml con más detalle.

Nota:

En este marcado, verás dos maneras diferentes de establecer propiedades en XAML. La primera y la forma más corta es usar la sintaxis de atributo XAML, como esta: <object attribute="value">. Esto funciona bien para valores simples, como <MicaBackdrop Kind="Base"/>. Pero solo funciona para los valores en los que el analizador XAML sabe cómo convertir la cadena en el tipo de valor esperado.

Si el valor de la propiedad es más complejo o el analizador XAML no sabe cómo convertirlo, debes usar la sintaxis del elemento de propiedad para crear el objeto. Así:

<object ... >
    <object.property>
        value
    </object.property>
</object>

Por ejemplo, para establecer la Window.SystemBackdrop propiedad, debe usar la sintaxis del elemento de propiedad y crear explícitamente el MicaBackdrop elemento. Pero puede usar la sintaxis de atributo simple para establecer la MicaBackdrop.Kind propiedad .

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

En MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>y <TitleBar.IconSource> contienen valores complejos que deben establecerse con sintaxis de elemento de propiedad.

Obtenga más información en los documentos:

• guía XAML de sintaxis

Si ejecutas la aplicación ahora, verás el elemento XAML TitleBar que agregaste, pero estará debajo de la barra de título del sistema, que sigue mostrando.

Debe escribir un poco de código para terminar de reemplazar la barra de título del sistema.

1. Abierto MainWindow.xaml.cs. Puedes abrir el código subyacente para MainWindow.xaml (o cualquier archivo XAML) de tres maneras:

   • Si el MainWindow.xaml archivo está abierto y es el documento activo que se está editando, presione F7.
   • Si el MainWindow.xaml archivo está abierto y es el documento activo que se está editando, haga clic con el botón derecho en el editor de texto y seleccione Ver código.
   • Use el Explorador de soluciones para expandir la MainWindow.xaml entrada y revelar el MainWindow.xaml.cs archivo. Haz doble clic en el archivo para abrirlo.

2. En el constructor para MainWindow, agregue este código después de la llamada a InitializeComponent:

   public MainWindow()
   {
       this.InitializeComponent();
   
       // ↓ Add this. ↓
       // Hide the default system title bar.
       ExtendsContentIntoTitleBar = true;
       // Replace system title bar with the WinUI TitleBar.
       SetTitleBar(AppTitleBar);
       // ↑ Add this. ↑
   }
   

   La propiedad ExtendsContentIntoTitleBar oculta la barra de título del sistema predeterminada y extiende el XAML de la aplicación a esa área. A continuación, la llamada a SetTitleBar indica al sistema que trate el elemento XAML que especificó (AppTitleBar) como la barra de título de la aplicación.

3. Compile y ejecute el proyecto presionando F5, haciendo clic en el botón Depurar "Inicio" de la barra de herramientas o seleccionando el menú Ejecutar>depuración de inicio.

Cuando ejecutes la aplicación ahora, verás una ventana vacía con un fondo de mica y la barra de título XAML que se reemplaza a la barra de título del sistema.

Continuar con el paso 2: Agregar una página de nota