Crear una página para una nota

Ahora creará una página que permite a un usuario editar una nota y, a continuación, escribirá el código para guardar o eliminar la nota.

En primer lugar, agrega la nueva página al proyecto:

1. En el panel Explorador de soluciones de Visual Studio, haga clic con el botón derecho en el proyecto >Agregar>nuevo elemento....

2. En el cuadro de diálogo Agregar nuevo elemento , seleccione WinUI en la lista de plantillas del lado izquierdo de la ventana. A continuación, seleccione la plantilla Página en blanco (WinUI 3). Asigne al archivo el nombre NotePage.xamly, a continuación, seleccione Agregar.

3. El NotePage.xaml archivo se abrirá en una nueva pestaña, mostrando todo el marcado XAML que representa la interfaz de usuario de la página. Reemplace el <Grid> ... </Grid> elemento de XAML por el marcado siguiente:

   <Grid Padding="16" RowSpacing="8">
       <Grid.RowDefinitions>
           <RowDefinition Height="*"/>
           <RowDefinition Height="Auto"/>
       </Grid.RowDefinitions>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="400"/>
           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
   
       <TextBox x:Name="NoteEditor"
            AcceptsReturn="True"
            TextWrapping="Wrap"
            PlaceholderText="Enter your note"
            Header="New note"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            Width="400"
            Grid.Column="1"/>
   
       <StackPanel Orientation="Horizontal"
               HorizontalAlignment="Right"
               Spacing="4"
               Grid.Row="1" Grid.Column="1">
           <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
           <Button Content="Delete"/>
       </StackPanel>
   </Grid>
   

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

   Si ejecuta la aplicación en este momento, no verá la página de notas que acaba de crear. Esto se debe a que todavía tiene que establecerlo como el contenido del Frame control en MainWindow.

5. Abra MainWindow.xaml y establezca NotePage como SourcePageType en , Framede la siguiente manera:

   <Frame x:Name="rootFrame" Grid.Row="1"
          SourcePageType="local:NotePage"/>
   

   Ahora, cuando ejecute la aplicación, Frame cargará una instancia de NotePage y la mostrará al usuario.

Vamos a desglosar las partes clave de los controles XAML situados en la página:

• Grid.RowDefinitions y Grid.ColumnDefinitions definen una cuadrícula con 2 filas y 3 columnas (colocadas debajo de la barra de título).

  • La fila inferior se ajusta automáticamente (Auto) a su contenido, los dos botones. La fila superior usa todo el espacio vertical restante (*).
  • La columna central es 400epx wide y es donde va el editor de notas. Las columnas de cualquier lado están vacías y dividen todo el espacio horizontal restante entre ellas (*).

  Nota:

  Debido a cómo funciona el sistema de escalado, al diseñar la aplicación XAML, estás diseñando en píxeles efectivos, no en píxeles físicos reales. Los píxeles efectivos (epx) son una unidad virtual de medida y se usan para expresar dimensiones de diseño y espaciado, independientemente de la densidad de la pantalla.

• <TextBox x:Name="NoteEditor" ... > ... </TextBox> es un control de entrada de texto (TextBox) configurado para la entrada de texto de varias líneas y se coloca en la celda central superior de Grid (Grid.Column="1"). Los índices de fila y columna se basan en 0 y, de forma predeterminada, los controles se colocan en la fila 0 y la columna 0 del elemento primario Grid. Por lo tanto, esto equivale a especificar la fila 0, columna 1.

• <StackPanel Orientation="Horizontal" ... > ... </StackPanel> define un control de diseño (StackPanel) que apila sus elementos secundarios verticalmente (valor predeterminado) o horizontalmente. Se coloca en la celda central inferior de (GridGrid.Row="1" Grid.Column="1").

  Nota:

  Grid.Row="1" Grid.Column="1" es un ejemplo de propiedades adjuntas XAML. Las propiedades adjuntas permiten que un objeto XAML establezca una propiedad que pertenezca a un objeto XAML diferente. A menudo, como en este caso, los elementos secundarios pueden usar propiedades adjuntas para informar a su elemento primario de cómo se van a presentar en la interfaz de usuario.

• Dos <Button> controles están dentro de <StackPanel> y organizados horizontalmente. Agregará el código para controlar los eventos Click de los botones en la sección siguiente.

Obtenga más información en los documentos:

• Diseños dinámicos con XAML
• Paneles de diseño
• espacios de nombres XAML y asignación de espacios de nombres

Cargar y guardar una nota

Abra el NotePage.xaml.cs archivo de código subyacente. Al agregar un nuevo archivo XAML, el código subyacente contiene una sola línea en el constructor, una llamada al método InitializeComponent:

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

El método InitializeComponent lee el marcado XAML e inicializa todos los objetos definidos por el marcado. Los objetos están conectados en sus relaciones de elementos primarios y secundarios, y los controladores de eventos definidos en el código se adjuntan a los eventos establecidos en el XAML.

Ahora va a agregar código al NotePage.xaml.cs archivo de código subyacente para controlar la carga y el guardado de notas.

1. Agregue las siguientes declaraciones de variable a la NotePage clase :

   public sealed partial class NotePage : Page
   {
       private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
       private StorageFile? noteFile = null;
       private string fileName = "note.txt";
   

   Cuando se guarda una nota, se guarda en el almacenamiento local de la aplicación como un archivo de texto.

   La clase StorageFolder se usa para acceder a la carpeta de datos local de la aplicación. Esta carpeta es específica de la aplicación, por lo que otras aplicaciones no pueden acceder a las notas guardadas aquí. Use la clase StorageFile para acceder al archivo de texto guardado en esta carpeta. El nombre del archivo se representa mediante la variable fileName. Por ahora, establezca fileName en "note.txt".

2. Cree un controlador de eventos para el evento Loaded de la página de notas.

   public NotePage()
   {
       this.InitializeComponent();
       // ↓ Add this. ↓
       Loaded += NotePage_Loaded;
   }
   
   // ↓ Add this event handler method. ↓
   private async void NotePage_Loaded(object sender, RoutedEventArgs e)
   {
       noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
       if (noteFile is not null)
       {
           NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
       }
   }
   

   En este método, llamará a TryGetItemAsync para recuperar el archivo de texto de la carpeta. Si el archivo no existe, devuelve null. Si el archivo existe, llame a ReadTextAsync para leer el texto del archivo en la NoteEditor propiedad Text del control. (Recuerde que NoteEditor es el TextBox control que creó en el archivo XAML. Se hace referencia aquí en el archivo de código subyacente mediante el x:Name que se le ha asignado).

   Importante

   Debe marcar este método con la async palabra clave porque las llamadas de acceso a archivos son asincrónicas. En resumen, si llama a un método que termina en ...Async (como TryGetItemAsync), puede agregar el operador await a la llamada. Esto evita que el código posterior se ejecute hasta que se complete la llamada esperada y mantenga la capacidad de respuesta de la interfaz de usuario. Cuando se usa await, el método desde el que se llama debe marcarse con la palabra clave async . Para obtener más información, consulte Llamada a API asincrónicas en C#.

Obtenga más información en los documentos:

• Acceso a archivos y carpetas con las API de WinRT
• Llamada a API asincrónicas en C#

Agregar controladores de eventos

A continuación, agregue los controladores de eventos Click para los botones Guardar y Eliminar . Agregar controladores de eventos es algo que hará a menudo al crear las aplicaciones, por lo que Visual Studio proporciona varias características para facilitarla.

1. En el archivo, coloque el NotePage.xaml cursor después del Content atributo en el control GuardarButton . Escriba Click=. En este momento, Visual Studio debe mostrar una interfaz de usuario de autocompletar que tenga este aspecto:

   

   • Presione la tecla de flecha abajo para seleccionar <Nuevo controlador> de eventos y, a continuación, presione Tab. Visual Studio completará el atributo con Click="Button_Click" y agregará un método de controlador de eventos denominado Button_Click en el NotePage.xaml.cs archivo de código subyacente.

   Ahora, debe cambiar el nombre del Button_Click método a algo más significativo. Lo hará en los pasos siguientes.

2. En NotePage.xaml.cs, busque el método que se agregó para usted:

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Sugerencia

   Para buscar código en la aplicación, haga clic en Buscar en la barra de título de Visual Studio y use la opción Búsqueda de código . Haga doble clic en el resultado de la búsqueda para abrir el código en el editor de código.

   

3. Coloque el cursor antes de "B" en Button y escriba Save. Espere un momento y el nombre del método se resaltará en verde.

4. Al mantener el puntero sobre el nombre del método, Visual Studio mostrará una información sobre herramientas con un icono de destornillador o bombilla. Haga clic en el botón de flecha abajo situado junto al icono y, a continuación, haga clic en Cambiar nombre de "Button_Click" a "SaveButton_Click".

   

   Visual Studio cambiará el nombre del método en todas partes de la aplicación, incluido en el archivo XAML donde lo agregó por primera vez a Button.

5. Repita estos pasos para el botón Eliminar y cambie el nombre del método a DeleteButton_Click.

Ahora que los controladores de eventos están conectados, puede agregar el código para guardar y eliminar el archivo de notas.

1. Agregue este código en el SaveButton_Click método para guardar el archivo. Tenga en cuenta que también debe actualizar la firma del método con la async palabra clave .

   private async void SaveButton_Click(object sender, RoutedEventArgs e)
   {
       if (noteFile is null)
       {
           noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
       }
       await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
   }
   

   En el SaveButton_Click método , primero se comprueba si noteFile se ha creado. Si es null, tendrá que crear un nuevo archivo en la carpeta de almacenamiento local con el nombre representado por la fileName variable y asignar el archivo a la noteFile variable. A continuación, escriba el texto en el TextBox control en el archivo representado por noteFile.

2. Agregue este código en el DeleteButton_Click método para eliminar el archivo. También debe actualizar la firma del método con la async palabra clave aquí.

   private async void DeleteButton_Click(object sender, RoutedEventArgs e)
   {
       if (noteFile is not null)
       {
           await noteFile.DeleteAsync();
           noteFile = null;
           NoteEditor.Text = string.Empty;
       }
   }
   

   En el DeleteButton_Click método , primero se comprueba si noteFile existe. Si lo hace, elimine el archivo representado por noteFile de la carpeta de almacenamiento local y establezca en noteFilenull . A continuación, restablezca el texto del TextBox control en una cadena vacía.

   Importante

   Después de eliminar el archivo de texto del sistema de archivos, es importante establecer en noteFilenull. Recuerde que noteFile es un StorageFile que proporciona acceso al archivo del sistema en la aplicación. Después de eliminar el archivo del sistema, noteFile sigue apuntando a dónde estaba el archivo del sistema, pero no sabe que ya no existe. Si intenta leer, escribir o eliminar el archivo del sistema ahora, obtendrá un error.

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

El código final del archivo de código subyacente debe tener este aspecto:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Probar la nota

Con este código en su lugar, puede probar la aplicación para asegurarse de que la nota guarda y se carga correctamente.

1. 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.
2. Escriba en el cuadro de entrada de texto y presione el botón Guardar .
3. Cierre la aplicación y, a continuación, reiníciela. La nota especificada debe cargarse desde el almacenamiento del dispositivo.
4. Presione el botón Eliminar .
5. Cierre la aplicación y reiníciela. Debe presentar una nueva nota en blanco.