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 Views folder i wybierz polecenie Dodaj>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 3). Nadaj plikowi AllNotesPage.xaml nazwę i naciśnij przycisk Dodaj.
3. W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder i wybierz polecenie Modelsklasę>...
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: widok notatek i model.

Kod modelu AllNotes

Nowy model danych reprezentuje dane wymagane do wyświetlenia wielu notatek. W tym miejscu uzyskasz wszystkie notatki z magazynu lokalnego aplikacji i utworzysz kolekcję Note obiektów, które będą wyświetlane w pliku 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ę Note elementów o nazwie Notesi używa LoadNotes metody do ładowania notatek z magazynu lokalnego aplikacji.

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:

• StorageFolder, klasaStorageFile, metoda IStorageItem.IsOfType
• Uzyskiwanie dostępu do plików i folderów za pomocą zestawu SDK aplikacji systemu Windows i interfejsów API WinRT

Teraz, gdy AllNotes model jest gotowy do udostępnienia danych dla widoku, musisz utworzyć wystąpienie modelu w AllNotesPage taki sposób, 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:

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

Projektowanie strony Wszystkienotes

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

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 powoduje to CommandBar ustawienie pozycji etykiety 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 AllNotesPageelementu , musisz zaktualizować MainWindow.xaml ją po raz ostatni, aby ładować AllNotesPage zamiast pojedynczego NotePageelementu .

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

2. Zaktualizuj element w rootFrame taki sposób, aby SourcePageType punkt był views.AllNotesPagenastępujący:

   <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 reprezentacja ciągu obiektu. Element ItemsView nie wie, jak powinien być wyświetlany ten element. Poprawisz to w następnej sekcji.

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 ItemsTemplate obiektu ItemsView. Dla każdego elementu w kolekcji ItemsView.ItemTemplate element generuje zadeklarowany kod XAML.

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

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

   xmlns:models="using:WinUINotes.Models"
   

3. <Page.Resources> Dodaj element po tagu otwierania<Page...>. Spowoduje to pobranie właściwości ResourceDictionary z Pagewłaściwości Resources w celu dodania do niej zasobów XAML.

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

4. W elemencie <Page.Resources> dodaj opisujący DataTemplate sposób wyświetlania Note elementu.

   <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 języku XAML for ItemsViewprzypisz ItemTemplate właściwość do właśnie utworzonego szablonu danych:

   <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 x:Bind rozszerzenia znaczników w elemecie DataTemplate, musisz określić wartość x:DataType w pliku DataTemplate. W takim przypadku jest to osoba ( Note więc musisz dodać odwołanie do przestrzeni nazw XAML dla elementu Models). Szablon notatki używa dwóch TextBlock kontrolek, które są powiązane z właściwościami i Text notatekDate. Element Grid jest używany do układu i do zapewnienia koloru tła. Element obramowania jest używany dla 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 Kolory personalizacji > systemu Windows używają trybu światła:

Jeśli jednak ustawienia Kolory personalizacji > systemu Windows korzystają z trybu ciemny, będzie wyglądać następująco:

Nie jest to zamierzony wygląd aplikacji. Stało się tak, ponieważ w szablonie danych są zakodowane trwale wartości kolorów. Domyślnie elementy WinUI dostosowują się do preferencji Ciemny lub Jasny kolor użytkownika. Podczas definiowania własnych elementów, takich jak szablon danych, należy zachować ostrożność, aby to samo zrobić.

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 {StaticResource} rozszerzenia znaczników lub {ThemeResource} rozszerzenia znaczników.

• Element jest {StaticResource} taki sam, niezależnie od motywu kolorów, więc jest używany do obsługi takich elementów jak Font lub Style ustawień.
• Zmiany {ThemeResource} na podstawie wybranego motywu kolorów, więc są one używane dla Foreground, Backgroundi 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ąp trwale zakodowane kolory w szablonie danych wbudowanymi zasobami motywu i 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 po uruchomieniu aplikacji z ustawieniem Kolor jasny będzie wyglądać następująco:

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

Dowiedz się więcej w dokumentacji:

• kontenery i szablony elementów
• odwołania do zasobów ResourceDictionary i XAML

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.

Aplikacja WinUI 3 Gallery zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Przejdź do kroku 5 — Dodawanie nawigacji między stronami