Condividi tramite

Aggiungere una visualizzazione e un modello per tutte le note

Questa parte dell'esercitazione aggiunge una nuova pagina all'app, una visualizzazione che visualizza tutte le note create in precedenza.

Più note e navigazione

Attualmente la visualizzazione note visualizza una singola nota. Per visualizzare tutte le note salvate, creare una nuova visualizzazione e un nuovo modello: AllNotes.

  1. Nel riquadro Esplora soluzioni fare clic con il pulsante destro del mouse sulla Views cartella e scegliere Aggiungi>nuovo elemento...
  2. Nella finestra di dialogo Aggiungi nuovo elemento selezionare WinUI nell'elenco dei modelli sul lato sinistro della finestra. Selezionare quindi il modello Pagina vuota (WinUI 3). Assegnare al file il nome AllNotesPage.xaml e premere Aggiungi.
  3. Nel riquadro Esplora soluzioni fare clic con il pulsante destro del mouse sulla Models cartella e scegliere Aggiungi>classe...
  4. Denominare la classe AllNotes.cs e premere Aggiungi.

Suggerimento

È possibile scaricare o visualizzare il codice per questa esercitazione dal repository GitHub. Per visualizzare il codice così com'è in questo passaggio, vedere questo commit: tutte le visualizzazioni note e il modello.

Codificare il modello AllNotes

Il nuovo modello di dati rappresenta i dati necessari per visualizzare più note. Qui si otterranno tutte le note dalla risorsa di archiviazione locale dell'app e si creerà una raccolta di Note oggetti che verranno visualizzati in AllNotesPage.

  1. Nel riquadro Esplora soluzioni aprire il file Models\AllNotes.cs .

  2. Sostituire il codice nel AllNotes.cs file con questo codice:

    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);
                }
            }
        }
    }
}

Il codice precedente dichiara una raccolta di Note elementi, denominati Notese usa il LoadNotes metodo per caricare note dalla risorsa di archiviazione locale dell'app.

La Notes raccolta usa observableCollection, che è una raccolta specializzata che funziona bene con il data binding. Quando un controllo che elenca più elementi, ad esempio ItemsView, è associato a un ObservableCollection, i due interagiscono per mantenere automaticamente sincronizzato l'elenco di elementi con la raccolta. Se un elemento viene aggiunto alla raccolta, il controllo viene aggiornato automaticamente con il nuovo elemento. Se un elemento viene aggiunto all'elenco, la raccolta viene aggiornata.

Per altre informazioni, vedere la documentazione:

Ora che il AllNotes modello è pronto per fornire i dati per la visualizzazione, è necessario creare un'istanza del modello in AllNotesPage in modo che la vista possa accedere al modello.

  1. Nel riquadro Esplora soluzioni aprire il file Views\AllNotesPage.xaml.cs .

  2. AllNotesPage Nella classe aggiungere questo codice per creare un AllNotes modello denominato notesModel:

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

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

Progettare la pagina AllNotes

Successivamente, è necessario progettare la visualizzazione per supportare il AllNotes modello.

  1. Nel riquadro Esplora soluzioni aprire il file Views\AllNotesPage.xaml .

  2. Sostituire l'elemento <Grid> ... </Grid> con il markup seguente:

    <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>

Il codice XAML precedente introduce alcuni nuovi concetti:

  • Il controllo CommandBar contiene un controllo AppBarButton. Questo pulsante ha un Label e Icone viene influenzato dall'oggetto CommandBar che lo contiene. Ad esempio, imposta CommandBar la posizione dell'etichetta dei relativi pulsanti su Right. Le barre dei comandi vengono in genere visualizzate nella parte superiore dell'app, insieme al titolo della pagina.
  • Il controllo ItemsView visualizza una raccolta di elementi e, in questo caso, è associato alla proprietà del Notes modello. Il modo in cui gli elementi vengono presentati dalla visualizzazione elementi viene impostata tramite la ItemsView.Layout proprietà . In questo caso si usa uniformGridLayout.

Ora che è stato creato AllNotesPage, è necessario aggiornare MainWindow.xaml un'ultima volta in modo che venga caricato AllNotesPage invece di un singolo NotePageoggetto .

  1. Nel riquadro Esplora soluzioni aprire il file MainWindow.xaml .

  2. Aggiornare l'elemento rootFrame in modo che punti SourcePageType a views.AllNotesPage, come illustrato di seguito:

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

Se si esegue ora l'app, si noterà che la nota creata in precedenza viene caricata nel ItemsView controllo . Tuttavia, viene visualizzata solo come rappresentazione di stringa dell'oggetto. ItemsView Non sa come deve essere visualizzato questo elemento. Questo problema verrà corretto nella sezione successiva.

Interfaccia utente dell'app note con l'elenco note che mostra il nome della classe Note anziché il contenuto della nota.

Aggiungere un modello di dati

È necessario specificare un DataTemplate per indicare come deve essere visualizzato l'elemento ItemsView di dati. L'oggetto DataTemplate viene assegnato alla proprietà ItemsTemplate dell'oggetto ItemsView. Per ogni elemento della raccolta, genera ItemsView.ItemTemplate il codice XAML dichiarato.

  1. Nel riquadro Esplora soluzioni fare doppio clic sulla AllNotesPage.xaml voce per aprirla nell'editor XAML.

  2. Aggiungere questo nuovo mapping dello spazio dei nomi nella riga sotto il mapping per local:

    xmlns:models="using:WinUINotes.Models"

  3. Aggiungere un <Page.Resources> elemento dopo il tag di apertura <Page...> . In questo modo, il ResourceDictionary viene ottenuto dalla Pageproprietà Resources (Risorse ) in modo da poter aggiungere risorse XAML.

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

</Page.Resources>

  4. All'interno dell'elemento aggiungere l'oggetto <Page.Resources>DataTemplate che descrive come visualizzare 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. Nel codice XAML per ItemsViewassegnare la ItemTemplate proprietà al modello di dati appena creato:

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

  6. Compilare ed eseguire l'app.

Quando si usa l'estensione x:Bind di markup in un DataTemplateoggetto , è necessario specificare in x:DataTypeDataTemplate. In questo caso, si tratta di un individuo Note (quindi è necessario aggiungere un riferimento allo spazio dei nomi XAML per Models). Il modello per la nota usa due TextBlock controlli, associati alle proprietà e Text della Date nota. L'elemento Grid viene usato per il layout e per fornire un colore di sfondo. Un elemento Border viene utilizzato per lo sfondo della data. L'elemento XAML Border può fornire sia una struttura che uno sfondo.

Quando si esegue l'app, il modello di dati viene applicato agli elementi e ha un aspetto simile al Note seguente se le impostazioni Colori personalizzazione > di Windows usano la modalità Chiaro:

Interfaccia utente dell'app note con l'elenco note che mostra il contenuto della nota e la data formattati da un modello di dati.

Tuttavia, se le impostazioni Colori personalizzazione > di Windows usano la modalità scura, sarà simile alla seguente:

Interfaccia utente dell'app note con uno sfondo scuro ma un modello di nota grigio chiaro.

Questo non è l'aspetto previsto per l'app. Si è verificato perché sono presenti valori di colore hardcoded nel modello di dati per la nota. Per impostazione predefinita, gli elementi WinUI si adattano alla preferenza colore Scuro o Chiaro dell'utente. Quando si definiscono elementi personalizzati, ad esempio un modello di dati, è necessario prestare attenzione a eseguire le stesse operazioni.

Quando definisci una risorsa in un codice XAML ResourceDictionary, devi assegnare un x:Key valore per identificare la risorsa. Puoi quindi usarlo x:Key per recuperare la risorsa in XAML usando l'estensione di markup o {StaticResource} l'estensione {ThemeResource} di markup.

  • Un {StaticResource} è lo stesso indipendentemente dal tema dei colori, quindi viene usato per elementi come Font o Style impostazioni.
  • Una {ThemeResource} modifica basata sul tema colori selezionato, quindi viene usata per Foreground, Backgrounde altre proprietà correlate al colore.

WinUI include un'ampia gamma di risorse predefinite che puoi usare per fare in modo che la tua app segua le linee guida per lo stile Fluent, nonché le linee guida per l'accessibilità. Si sostituiranno i colori hardcoded nel modello di dati con risorse tema predefinite e si applicheranno alcune altre risorse in base alle linee guida di Fluent Design.

  1. Nel modello di dati aggiunto in precedenza aggiornare le sezioni indicate qui per usare le risorse predefinite:

    <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>

Ora quando esegui l'app con un'impostazione Colore chiaro, sarà simile alla seguente:

Interfaccia utente dell'app note con uno sfondo chiaro e un modello di nota chiaro.

Quando si esegue l'app con un'impostazione Colore scuro, l'aspetto sarà simile al seguente:

Interfaccia utente dell'app note con uno sfondo scuro e un modello di nota scuro.

Per altre informazioni, vedere la documentazione:

Suggerimento

L'app WinUI 3 Gallery è un ottimo modo per apprendere diversi controlli WinUI e linee guida di progettazione. Per visualizzare le risorse del tema usate nel modello di dati, aprire l'app WinUI 3 Gallery in Indicazioni sul colore. Da qui è possibile visualizzare l'aspetto delle risorse e copiare i valori necessari direttamente dall'app.

È anche possibile aprire la pagina Tipografia e la pagina Geometry per visualizzare altre risorse predefinite usate in questo modello di dati.

L'app WinUI 3 Gallery include esempi interattivi della maggior parte dei controlli, delle funzionalità e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

Continuare con il passaggio 5 - Aggiungere lo spostamento tra le pagine

  • Last updated on