Udostępnij za pośrednictwem


Dodawanie widoku i modelu dla wszystkich notatek

Ta część samouczka dodaje nową stronę do aplikacji— widok, który wyświetla wszystkie utworzone wcześniej notatki.

Wiele notatek i nawigacji

Obecnie w widoku notatek jest wyświetlana pojedyncza notatka. Aby wyświetlić wszystkie zapisane notatki, utwórz nowy widok i model: AllNotes.

  1. W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Views i wybierz pozycję Add>Nowy element...
  2. W oknie dialogowym Dodawanie nowego elementu wybierz pozycję WinUI na liście szablonów po lewej stronie okna. Następnie wybierz szablon Pusta strona (WinUI). Nadaj plikowi AllNotesPage.xaml nazwę i naciśnij przycisk Dodaj.
  3. W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder Models i wybierz pozycję Add>Class...
  4. Nadaj klasie AllNotes.cs nazwę i naciśnij przycisk Dodaj.

Wskazówka

Możesz pobrać lub wyświetlić kod tego samouczka z repozytorium GitHub. Aby zobaczyć kod w tym kroku, zobacz to zatwierdzenie: all notes view and model.

Kod modelu AllNotes

Nowy model danych reprezentuje dane wymagane do wyświetlenia wielu notatek. W tym miejscu uzyskasz wszystkie notatki z pamięci lokalnej aplikacji i utworzysz kolekcję obiektów typu Note, które zostaną wyświetlone w AllNotesPage.

  1. W okienku Eksplorator rozwiązań otwórz plik Models\AllNotes.cs.

  2. Zastąp kod w AllNotes.cs pliku następującym kodem:

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

Poprzedni kod deklaruje kolekcję elementów Note o nazwie Notes i używa metody LoadNotes do ładowania notatek z lokalnej storage aplikacji.

Uwaga / Notatka

Metoda LoadNotes używa async void zamiast async Task , ponieważ jest wywoływana z konstruktora, którego nie może być async. Ten wzorzec fire-and-forget jest akceptowalny tutaj, ponieważ metoda jest procedurą inicjowania przypominającą zdarzenia.

Kolekcja Notes używa kolekcji ObservableCollection, która jest wyspecjalizowaną kolekcją, która dobrze współpracuje z powiązaniem danych. Gdy kontrolka zawierająca listę wielu elementów, takich jak Element ItemsView, jest powiązana z elementem ObservableCollection, obie współpracują ze sobą, aby automatycznie synchronizować listę elementów z kolekcją. Jeśli element zostanie dodany do kolekcji, kontrolka zostanie automatycznie zaktualizowana przy użyciu nowego elementu. Jeśli element zostanie dodany do listy, kolekcja zostanie zaktualizowana.

Dowiedz się więcej w dokumentacji:

Teraz, gdy model AllNotes jest gotowy do dostarczenia danych dla widoku, musisz utworzyć wystąpienie modelu w AllNotesPage, aby widok mógł uzyskać dostęp do modelu.

  1. W okienku Eksplorator rozwiązań otwórz plik Views\AllNotesPage.xaml.cs.

  2. AllNotesPage W klasie dodaj ten kod, aby utworzyć AllNotes model o nazwie notesModel:

    Uwaga / Notatka

    Aby odwołać się do klasy AllNotes, należy dodać using WinUINotes.Models; na górze pliku.

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

Zaprojektuj stronę WszystkieNotatki

Następnie należy zaprojektować widok dla obsługi modelu AllNotes.

  1. W okienku Eksplorator rozwiązań otwórz plik Views\AllNotesPage.xaml.

  2. Zastąp <Grid> ... </Grid> element następującym znacznikiem:

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

Poprzedni kod XAML wprowadza kilka nowych pojęć:

  • Kontrolka CommandBar zawiera kontrolkę AppBarButton. Ten przycisk ma element Label i Iconi ma wpływ na CommandBar element , który go zawiera. Na przykład, CommandBar ustawia pozycję etykiety jego przycisków na Right. Paski poleceń są zwykle wyświetlane w górnej części aplikacji wraz z tytułem strony.
  • Kontrolka ItemsView wyświetla kolekcję elementów, a w tym przypadku jest powiązana z właściwością modelu Notes . Sposób prezentowania elementów przez widok elementów jest ustawiany za pomocą ItemsView.Layout właściwości . W tym miejscu użyjesz elementu UniformGridLayout.

Teraz, po utworzeniu AllNotesPage, musisz zaktualizować MainWindow.xaml po raz ostatni, aby ładować AllNotesPage zamiast pojedynczego NotePage.

  1. W okienku Eksplorator rozwiązań otwórz plik MainWindow.xaml.

  2. Zaktualizuj element rootFrame, aby SourcePageType wskazywał na views.AllNotesPage, jak pokazano poniżej:

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

Jeśli teraz uruchomisz aplikację, zobaczysz, że utworzona wcześniej notatka zostanie załadowana do kontrolki ItemsView . Jednak jest on po prostu wyświetlany jako ciągowa reprezentacja obiektu. Element ItemsView nie wie, jak powinien być wyświetlany ten element. Poprawisz to w następnej sekcji.

Interfejs użytkownika aplikacji notatki z listą notatek z nazwą klasy Note zamiast zawartości notatki.

Dodawanie szablonu danych

Musisz określić element DataTemplate , aby określić sposób ItemsView wyświetlania elementu danych. Właściwość DataTemplate jest przypisywana do właściwości ItemTemplate obiektu ItemsView. Dla każdego elementu w kolekcji, ItemsView.ItemTemplate generuje zadeklarowany XAML.

  1. W okienku Eksplorator rozwiązań kliknij dwukrotnie wpis AllNotesPage.xaml, aby otworzyć go w edytorze XAML.

  2. Dodaj nowe mapowanie przestrzeni nazw w wierszu poniżej mapowania elementu local:

    xmlns:models="using:WinUINotes.Models"
    
  3. Dodaj element <Page.Resources> po otwierającym tagu <Page...>. To pobiera ResourceDictionary z właściwości Page elementu , aby można było dodać do niego zasoby XAML.

    <Page
        x:Class="WinUINotes.Views.AllNotesPage"
        ... >
    <!-- ↓ Add this. ↓ -->
    <Page.Resources>
    
    </Page.Resources>
    
  4. W elemencie <Page.Resources> dodaj DataTemplate, który opisuje sposób wyświetlania elementu Note.

    <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. W XAML dla ItemsView zmień Padding="16" na Margin="24" i przypisz ItemTemplate do szablonu danych, który właśnie utworzyłeś:

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

Jeśli używasz rozszerzenia znaczników x:Bind w elemencie DataTemplate, musisz określić x:DataType w DataTemplate. W takim przypadku jest to indywidualny Note (więc musisz dodać odwołanie do przestrzeni nazw XAML dla Models). Szablon notatki używa dwóch TextBlock kontrolek, które są powiązane z właściwościami notatki Text i Date. Element Grid jest używany do układu i do zapewnienia koloru tła. Element Border jest używany do tworzenia tła daty. (Element XAML Border może zawierać zarówno konspekt, jak i tło).

Po uruchomieniu aplikacji szablon danych jest stosowany do elementów Note i wygląda następująco, jeśli ustawienia personalizacji Windows > Kolory używają trybu światła:

Interfejs użytkownika aplikacji notesów z listą notatek z zawartością notatek i datą sformatowaną przez szablon danych.

Jeśli jednak ustawienia personalizacji Windows > Kolory używają trybu ciemnego, będzie wyglądać to następująco:

Interfejs użytkownika aplikacji notatki z ciemnym tłem, ale jasnoszary szablon notatki.

Nie jest to zamierzony wygląd aplikacji. Stało się tak, ponieważ w szablonie danych dla notatki są zakodowane na stałe wartości kolorów. Domyślnie elementy WinUI 3 dostosowują się do preferencji użytkownika dotyczącej ciemnego lub jasnego trybu kolorów. Podczas definiowania własnych elementów, takich jak szablon danych, należy zachować ostrożność i postępować w ten sam sposób.

Podczas definiowania zasobu w języku XAML ResourceDictionarynależy przypisać x:Key wartość w celu zidentyfikowania zasobu. Następnie można go x:Key użyć do pobrania zasobu w języku XAML przy użyciu rozszerzenia znaczników {StaticResource} lub {ThemeResource}.

  • Jest to element {StaticResource} taki sam, niezależnie od motywu koloru, więc używany jest do rzeczy takich jak Font lub Style ustawienia.
  • {ThemeResource} zmienia się w zależności od wybranego motywu kolorystycznego, więc jest używany dla Foreground, Background, i innych właściwości związanych z kolorami.

Interfejs WinUI zawiera wiele wbudowanych zasobów, których można użyć do tworzenia aplikacji zgodnie z wytycznymi dotyczącymi stylu Fluent, a także wytycznymi dotyczącymi ułatwień dostępu. Zastąpisz kolory zakodowane na stałe w szablonie danych wbudowanymi zasobami motywu oraz zastosujesz kilka innych zasobów, aby dopasować je do wytycznych Fluent Design.

  1. W dodanym wcześniej szablonie danych zaktualizuj sekcje wskazane tutaj, aby używać wbudowanych zasobów:

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

Teraz, gdy uruchomisz aplikację z ustawieniem jasnego koloru, będzie wyglądać następująco:

Interfejs użytkownika aplikacji notatki z jasnym tłem i jasnym szablonem notatek.

A po uruchomieniu aplikacji z ustawieniem Ciemny kolor będzie wyglądać następująco:

Interfejs użytkownika aplikacji notatki z ciemnym tłem i ciemnym szablonem notatek.

Dowiedz się więcej w dokumentacji:

Wskazówka

Aplikacja WinUI 3 Gallery to doskonały sposób na zapoznanie się z różnymi kontrolkami WinUI i wytycznymi dotyczącymi projektowania. Aby wyświetlić zasoby motywu używane w szablonie danych, otwórz aplikację WinUI 3 Gallery w obszarze Wskazówki dotyczące kolorów. W tym miejscu możesz zobaczyć, jak wyglądają zasoby, i skopiować potrzebne wartości bezpośrednio z aplikacji.

Możesz również otworzyć stronę Typografii i stronę Geometry , aby wyświetlić inne wbudowane zasoby używane w tym szablonie danych.

WinUI 3 Gallery Ikonę Aplikacja WinUI 3 Gallery zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy w GitHub.