Compartir a través de

Agregar una vista y un modelo para todas las notas

Esta parte del tutorial agrega una nueva página a la aplicación, una vista que muestra todas las notas creadas anteriormente.

Varias notas y navegación

Actualmente, la vista de nota muestra una sola nota. Para mostrar todas las notas guardadas, cree una nueva vista y modelo: AllNotes.

  1. En el panel Explorador de soluciones, haz clic con el botón derecho en la carpeta Views y selecciona 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 un nombre al archivo AllNotesPage.xaml y presione Agregar.
  3. En el Explorador de soluciones, haz clic con el botón derecho en la carpeta Models y selecciona Agregar>Clase...
  4. Asigne un nombre a la clase AllNotes.cs y presione Agregar.

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: todas las notas vista y modelo.

Codificar el modelo de AllNotes

El nuevo modelo de datos representa los datos necesarios para mostrar varias notas. Aquí obtendrá todas las notas del almacenamiento local de la aplicación y creará una colección de Note objetos que se mostrarán en .AllNotesPage

  1. En el panel Explorador de soluciones, abra el archivo Models\AllNotes.cs .

  2. Reemplace el código del AllNotes.cs archivo por este código:

    using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Windows.Storage;

namespace WinUINotes.Models
{
    public class AllNotes
    {
        public ObservableCollection<Note> Notes { get; set; } = 
                                    new ObservableCollection<Note>();

        public AllNotes()
        {
            LoadNotes();
        }

        public async void LoadNotes()
        {
            Notes.Clear();
            // Get the folder where the notes are stored.
            StorageFolder storageFolder = 
                          ApplicationData.Current.LocalFolder;
            await GetFilesInFolderAsync(storageFolder);
        }

        private async Task GetFilesInFolderAsync(StorageFolder folder)
        {
            // Each StorageItem can be either a folder or a file.
            IReadOnlyList<IStorageItem> storageItems = 
                                        await folder.GetItemsAsync();
            foreach (IStorageItem item in storageItems)
            {
                if (item.IsOfType(StorageItemTypes.Folder))
                {
                    // Recursively get items from subfolders.
                    await GetFilesInFolderAsync((StorageFolder)item);
                }
                else if (item.IsOfType(StorageItemTypes.File))
                {
                    StorageFile file = (StorageFile)item ;
                    Note note = new Note()
                    {
                        Filename = file.Name,
                        Text = await FileIO.ReadTextAsync(file),
                        Date = file.DateCreated.DateTime
                    };
                    Notes.Add(note);
                }
            }
        }
    }
}

El código anterior declara una colección de Note elementos, denominado Notes, y usa el LoadNotes método para cargar notas del almacenamiento local de la aplicación.

La Notes colección usa observableCollection, que es una colección especializada que funciona bien con el enlace de datos. Cuando un control que enumera varios elementos, como itemsView, está enlazado a , ObservableCollectionlos dos funcionan juntos para mantener automáticamente la lista de elementos sincronizados con la colección. Si se agrega un elemento a la colección, el control se actualiza automáticamente con el nuevo elemento. Si se agrega un elemento a la lista, la colección se actualiza.

Obtenga más información en los documentos:

Ahora que el AllNotes modelo está listo para proporcionar datos para la vista, debe crear una instancia del modelo para AllNotesPage que la vista pueda acceder al modelo.

  1. En el panel Explorador de soluciones, abra el archivo Views\AllNotesPage.xaml.cs .

  2. En la AllNotesPage clase , agregue este código para crear un AllNotes modelo denominado notesModel:

    public sealed partial class AllNotesPage : Page
{
    // ↓ Add this. ↓
    private AllNotes notesModel = new AllNotes();
    // ↑ Add this. ↑

    public AllNotesPage()
    {
        this.InitializeComponent();
    }
}

Diseñar la página AllNotes

A continuación, debe diseñar la vista para admitir el AllNotes modelo.

  1. En el panel Explorador de soluciones, abra el archivo Views\AllNotesPage.xaml .

  2. Reemplace el <Grid> ... </Grid> elemento por el marcado siguiente:

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton Icon="Add" Label="New note"/>
        <CommandBar.Content>
            <TextBlock Text="Quick notes" Margin="16,8" 
                   Style="{ThemeResource SubtitleTextBlockStyle}"/>
        </CommandBar.Content>
    </CommandBar>

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}" 
           Grid.Row="1" Padding="16" >
        <ItemsView.Layout>
            <UniformGridLayout MinItemWidth="200"
                           MinColumnSpacing="12"
                           MinRowSpacing="12"
                           ItemsJustification="Start"/>
        </ItemsView.Layout>
    </ItemsView>
</Grid>

El XAML anterior presenta algunos conceptos nuevos:

  • El control CommandBar contiene un AppBarButton. Este botón tiene un Label y Icon, y está influenciado por el CommandBar objeto que lo contiene. Por ejemplo, establece CommandBar la posición de etiqueta de sus botones en Right. Normalmente, las barras de comandos se muestran en la parte superior de la aplicación, junto con el título de la página.
  • El control ItemsView muestra una colección de elementos y, en este caso, está enlazado a la propiedad del Notes modelo. La forma en que se presentan los elementos de la vista de elementos se establece a través de la ItemsView.Layout propiedad . Aquí se usa uniformGridLayout.

Ahora que ha creado AllNotesPage, debe actualizar MainWindow.xaml una última vez para que se cargue AllNotesPage en lugar de una individual NotePage.

  1. En el panel Explorador de soluciones, abra el archivo MainWindow.xaml .

  2. Actualice el rootFrame elemento para que SourcePageType apunte a views.AllNotesPage, de la siguiente manera:

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="views:AllNotesPage"/>

Si ejecuta la aplicación ahora, verá que la nota que creó anteriormente se carga en el ItemsView control . Sin embargo, se muestra como la representación de cadena del objeto. No ItemsView sabe cómo se debe mostrar este elemento. Lo corregirá en la sección siguiente.

La interfaz de usuario de la aplicación de notas con la lista de notas que muestra el nombre de la clase Note en lugar del contenido de la nota.

Adición de una plantilla de datos

Debe especificar una clase DataTemplate para indicar cómo se debe mostrar el ItemsView elemento de datos. DataTemplate se asigna a la propiedad ItemsTemplate de .ItemsView Para cada elemento de la colección, ItemsView.ItemTemplate genera el XAML declarado.

  1. En el panel Explorador de soluciones, haga doble clic en la AllNotesPage.xaml entrada para abrirla en el editor XAML.

  2. Agregue esta nueva asignación de espacio de nombres en la línea debajo de la asignación para local:

    xmlns:models="using:WinUINotes.Models"

  3. Agregue un <Page.Resources> elemento después de la etiqueta de apertura <Page...> . Esto obtiene ResourceDictionary de la Pagepropiedad Resources de para poder agregar recursos XAML a él.

    <Page
    x:Class="WinUINotes.Views.AllNotesPage"
    ... >
<!-- ↓ Add this. ↓ -->
<Page.Resources>

</Page.Resources>

  4. Dentro del <Page.Resources> elemento , agregue que DataTemplate describe cómo mostrar un Note elemento.

    <Page.Resources>
    <!-- ↓ Add this. ↓ -->
    <DataTemplate x:Key="NoteItemTemplate" 
                  x:DataType="models:Note">
        <ItemContainer>
            <Grid Background="LightGray">
                <Grid.RowDefinitions>
                    <RowDefinition Height="120"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Text="{x:Bind Text}" Margin="12,8"
                           TextWrapping="Wrap"
                           TextTrimming="WordEllipsis"/>
                <Border Grid.Row="1" Padding="8,6,0,6"
                        Background="Gray">
                    <TextBlock Text="{x:Bind Date}"
                               Foreground="White"/>
                </Border>
            </Grid>
        </ItemContainer>
    </DataTemplate>
    <!-- ↑ Add this. ↑ -->
</Page.Resources>

  5. En xaml para ItemsView, asigne la ItemTemplate propiedad a la plantilla de datos que acabas de crear:

    <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
           Grid.Row="1" Margin="24"
           <!-- ↓ Add this. ↓ -->
           ItemTemplate="{StaticResource NoteItemTemplate}">

  6. Compile y ejecute la aplicación.

Cuando se usa la x:Bind extensión de marcado en , DataTemplatedebe especificar en x:DataType .DataTemplate En este caso, es un individuo Note (por lo que tienes que agregar una referencia de espacio de nombres XAML para Models). La plantilla de la nota usa dos TextBlock controles, que están enlazados a las propiedades y Text de Date la nota. El elemento Grid se usa para el diseño y para proporcionar un color de fondo. Un elemento Border se usa para el fondo de la fecha. (El elemento XAML Border puede proporcionar un esquema y un fondo).

Al ejecutar la aplicación, la plantilla de datos se aplica a los Note elementos y tiene este aspecto si la configuración colores de personalización > de Windows usa el modo Claro:

La interfaz de usuario de la aplicación de notas con la lista de notas que muestra el contenido de la nota y la fecha con formato de una plantilla de datos.

Sin embargo, si la configuración colores de personalización > de Windows usa el modo Oscuro, tendrá este aspecto:

La interfaz de usuario de la aplicación de notas con un fondo oscuro pero una plantilla de nota gris claro.

No es la búsqueda prevista de la aplicación. Se produjo porque hay valores de color codificados de forma rígida en la plantilla de datos de la nota. De forma predeterminada, los elementos WinUI se adaptan a la preferencia de color oscuro o claro del usuario. Al definir sus propios elementos, como una plantilla de datos, debe tener cuidado de hacer lo mismo.

Al definir un recurso en un XAML ResourceDictionary, debe asignar un x:Key valor para identificar el recurso. A continuación, puedes usarlo x:Key para recuperar el recurso en XAML mediante la extensión de marcado o {StaticResource} la {ThemeResource} extensión de marcado.

  • Un {StaticResource} es el mismo independientemente del tema de color, por lo que se usa para cosas como Font o Style configuración.
  • Cambia {ThemeResource} en función del tema de color seleccionado, por lo que se usa para Foreground, Backgroundy otras propiedades relacionadas con el color.

WinUI incluye una variedad de recursos integrados que puedes usar para hacer que tu aplicación siga las instrucciones de estilo fluent, así como las directrices de accesibilidad. Reemplazará los colores codificados de forma rígida en la plantilla de datos por recursos de tema integrados y aplicará algunos otros recursos para que coincidan con las directrices de Fluent Design.

  1. En la plantilla de datos que agregó anteriormente, actualice las secciones indicadas aquí para usar recursos integrados:

    <DataTemplate x:Key="NoteItemTemplate" 
              x:DataType="models:Note">

<!-- ↓ Update this. ↓ -->
    <ItemContainer CornerRadius="{StaticResource OverlayCornerRadius}">
        <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
              BorderThickness="1" 
              BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
              CornerRadius="{StaticResource OverlayCornerRadius}">
<!-- ↑ Update this. ↑ -->

            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="{x:Bind Text}" Margin="12,8"
                       TextWrapping="Wrap"
                       TextTrimming="WordEllipsis"/>

<!-- ↓ Update this. ↓ -->
            <Border Grid.Row="1" Padding="8,6,0,6"
                    Background="{ThemeResource SubtleFillColorSecondaryBrush}">
                <TextBlock Text="{x:Bind Date}"
                    Style="{StaticResource CaptionTextBlockStyle}"
                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
<!-- ↑ Update this. ↑ -->

            </Border>
        </Grid>
    </ItemContainer>
</DataTemplate>

Ahora, al ejecutar la aplicación con una configuración color claro, tendrá este aspecto:

La interfaz de usuario de la aplicación de notas con un fondo claro y una plantilla de nota clara.

Y al ejecutar la aplicación con una configuración de color oscuro, tendrá este aspecto:

La interfaz de usuario de la aplicación de notas con un fondo oscuro y una plantilla de nota oscura.

Obtenga más información en los documentos:

Sugerencia

La WinUI 3 Gallery aplicación es una excelente manera de obtener información sobre diferentes controles y directrices de diseño de WinUI. Para ver los recursos de tema usados en la plantilla de datos, abra la WinUI 3 Gallery aplicación en la guía de color. Desde allí, puede ver el aspecto de los recursos y copiar los valores que necesita directamente desde la aplicación.

También puede abrir la página Tipografía y la página Geometry para ver otros recursos integrados usados en esta plantilla de datos.

La WinUI 3 Gallery aplicación incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtén la aplicación desde la Microsoft Store o consigue el código fuente en GitHub

Continuar con el paso 5: Agregar navegación entre páginas

  • Last updated on