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 algunas configuraciones del proyecto. Cuando Visual Studio crea un project winUI 3, se generan varias carpetas y archivos de código importantes. Estos se pueden ver en el panel Solution Explorer 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. Cada archivo sirve para un propósito diferente, que se describe a continuación:

• Carpeta de Activos

  Esta carpeta contiene el logotipo, las imágenes y otros recursos multimedia de la aplicación. Se inicia rellena con archivos de plantilla 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 paquete le permite configurar la información del editor, logotipos, arquitecturas de procesador y otros detalles que determinan cómo aparece su aplicación en la 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 archivo .xaml, y un archivo de código subyacente correspondiente que es un elemento secundario de él en el Solution Explorer.

• 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 tu proyecto, se llama al método InitializeComponent para analizar el archivo .xaml y generar el código que se une con el 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, Directiva x:Class

Actualizar MainWindow

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

• La parte del área de 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á el material Mica como fondo de la ventana. Mica es un material opaco y dinámico que incorpora temas y fondos de pantalla de 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. Añadirás las páginas en un paso siguiente.

1. Haga doble clic en MainWindow.xaml en Solution Explorer 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.

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

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

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 Solution Explorer para expandir la entrada MainWindow.xaml, revelando el archivo /MainWindow.xaml.cs. 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. Compila y ejecuta el proyecto presionando F5, haciendo clic en el botón Depurar "Inicio" de la barra de herramientas o seleccionando el menú Ejecutar>Iniciar Depuración.

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.