Lägga till en vy och modell för alla anteckningar

Den här delen av självstudien lägger till en ny sida i appen, en vy som visar alla anteckningar som skapats tidigare.

Flera anteckningar och navigering

För närvarande visar den anteckningen vyn en enda anteckning. Om du vill visa alla sparade anteckningar skapar du en ny vy och modell: AllNotes.

1. Högerklicka på mappen i Views och välj Lägg till>nytt objekt...
2. I dialogrutan Lägg till nytt objekt väljer du WinUI i malllistan till vänster i fönstret. Välj sedan mallen Tom sida (WinUI 3). Namnge filen AllNotesPage.xaml och tryck på Lägg till.
3. I fönstret Solution Explorer högerklickar du på mappen Models och väljer Lägg till>klass...
4. Ge klassen AllNotes.cs namnet och tryck på Lägg till.

Tips/Råd

Du kan ladda ned eller visa koden för den här självstudien från GitHub-lagringsplatsen. Om du vill se koden som den är i det här steget kan du läsa den här incheckningen: alla anteckningsvyer och modeller.

Koda AllNotes-modellen

Den nya datamodellen representerar de data som krävs för att visa flera anteckningar. Här får du alla anteckningar från appens lokala lagring och skapar en samling Note objekt som du ska visa i AllNotesPage.

1. Öppna filen Models\AllNotes.cs i fönstret Solution Explorer.

2. Ersätt koden i filen med den AllNotes.cs här koden:

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

Den tidigare koden deklarerar en samling Note objekt med namnet Notesoch använder LoadNotes metoden för att läsa in anteckningar från appens lokala lagring.

Samlingen Notes använder en ObservableCollection, som är en specialiserad samling som fungerar bra med databindning. När en kontroll som visar flera objekt, till exempel en ItemsView, är bunden till en ObservableCollection, fungerar de två tillsammans för att automatiskt hålla listan över objekt synkroniserade med samlingen. Om ett objekt läggs till i samlingen uppdateras kontrollen automatiskt med det nya objektet. Om ett objekt läggs till i listan uppdateras samlingen.

Läs mer i dokumenten:

• StorageFolder-klass, StorageFile-klass, IStorageItem.IsOfType-metod
• Åtkomst till filer och mappar med Windows App SDK och WinRT-API:er

Nu när AllNotes modellen är redo att tillhandahålla data för vyn måste du skapa en instans av modellen i AllNotesPage så att vyn kan komma åt modellen.

1. Öppna filen Views\AllNotesPage.xaml.cs i fönstret Solution Explorer.

2. AllNotesPage I klassen lägger du till den här koden för att skapa en AllNotes modell med namnet notesModel:

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

Utforma sidan AllNotes

Därefter måste du utforma vyn för att stödja AllNotes modellen.

1. Öppna filen Views\AllNotesPage.xaml i fönstret Solution Explorer.

2. Ersätt elementet <Grid> ... </Grid> med följande markering:

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

Den tidigare XAML introducerar några nya begrepp:

• Kontrollen Kommandorad innehåller en AppBarButton. Den här knappen har en Label och Icon, och påverkas av den CommandBar som innehåller den. Detta anger till exempel CommandBar etikettpositionen för knapparna till Right. Kommandostaplar visas vanligtvis överst i appen, tillsammans med sidrubriken.
• Kontrollen ItemsView visar en samling objekt och är i det här fallet bunden till modellens Notes egenskap. Hur objekt presenteras av objektvyn anges via ItemsView.Layout egenskapen . Här använder du en UniformGridLayout.

Nu när du har skapat AllNotesPagemåste du uppdatera MainWindow.xaml en sista gång så att den läses in AllNotesPage i stället för en enskild NotePage.

1. Öppna filen MainWindow.xaml i fönstret Solution Explorer.

2. Uppdatera elementet rootFrame så att SourcePageType punkterna till views.AllNotesPage, så här:

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

Om du kör appen nu ser du att anteckningen som du skapade tidigare läses in i ItemsView kontrollen. Det visas dock bara som strängrepresentationen av objektet. Vet ItemsView inte hur det här objektet ska visas. Du korrigerar detta i nästa avsnitt.

Lägga till en datamall

Du måste ange ett DataTemplate för att se ItemsView hur dataobjektet ska visas. DataTemplate tilldelas egenskapen ItemsTemplate för ItemsView. För varje objekt i samlingen genererar ItemsView.ItemTemplate den deklarerade XAML.

1. I fönstret Solution Explorer dubbelklickar du på posten för att öppna den AllNotesPage.xaml i XAML-redigeraren.

2. Lägg till den här nya namnområdesmappningen på raden under mappningen för local:

   xmlns:models="using:WinUINotes.Models"
   

3. Lägg till ett <Page.Resources> element efter den inledande <Page...> taggen. Då hämtas ResourceDictionary från Pageegenskapen Resurser så att du kan lägga till XAML-resurser i den.

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

4. I elementet <Page.Resources> lägger du till DataTemplate som beskriver hur du visar ett Note objekt.

   <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. I XAML för ItemsViewtilldelar du ItemTemplate egenskapen till den datamall som du nyss skapade:

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

6. Skapa och kör appen.

När du använder markeringstillägget x:Bind i en DataTemplatemåste du ange x:DataType på DataTemplate. I det här fallet är det en individ Note (så du måste lägga till en XAML-namnområdesreferens för Models). Mallen för anteckningen använder två TextBlock kontroller som är bundna till anteckningens Text och Date egenskaperna. Grid-elementet används för layout och för att ge en bakgrundsfärg. Ett kantlinjeelement används för datumets bakgrund. (XAML-elementet Border kan ge både en disposition och bakgrund.)

När du kör appen tillämpas datamallen på dina Note objekt och ser ut så här om inställningarna för Windows-anpassningsfärger > använder ljusläget:

Men om inställningarna för Windows-anpassningsfärger > använder mörkt läge ser det ut så här:

Det här är inte det avsedda utseendet för appen. Det hände eftersom det finns hårdkodade färgvärden i datamallen för anteckningen. Som standard anpassas WinUI-elementen efter användarens inställningar för mörk eller ljus färg. När du definierar dina egna element, till exempel en datamall, måste du vara noga med att göra samma sak.

När du definierar en resurs i en XAML ResourceDictionarymåste du tilldela ett x:Key värde för att identifiera resursen. Sedan kan du använda den för att x:Key hämta resursen i XAML med hjälp av markeringstillägget {StaticResource} eller {ThemeResource} markeringstillägget.

• A {StaticResource} är detsamma oavsett färgtema, så det används för saker som Font eller Style inställningar.
• En {ThemeResource} ändring baserat på det valda färgtemat, så det används för Foreground, Backgroundoch andra färgrelaterade egenskaper.

WinUI innehåller en mängd olika inbyggda resurser som du kan använda för att få din app att följa riktlinjerna för Fluent-stil samt riktlinjer för hjälpmedel. Du ersätter de hårdkodade färgerna i datamallen med inbyggda temaresurser och använder några andra resurser för att matcha riktlinjerna för Fluent Design.

1. I datamallen som du lade till tidigare uppdaterar du de avsnitt som anges här för att använda inbyggda resurser:

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

Nu när du kör appen med en ljus färginställning ser det ut så här:

Och när du kör appen med en mörk färginställning ser den ut så här:

Läs mer i dokumenten:

• Objektcontainrar och mallar
• ResourceDictionary- och XAML-resursreferenser

Tips/Råd

Appen WinUI 3 Gallery är ett bra sätt att lära sig om olika WinUI-kontroller och designriktlinjer. Om du vill se de temaresurser som används i datamallen öppnar WinUI 3 Gallery du appen i vägledningen Färg. Därifrån kan du se hur resurserna ser ut och kopiera de värden du behöver direkt från appen.

Du kan också öppna sidan Typografi och Geometri för att se andra inbyggda resurser som används i den här datamallen.

Appen WinUI 3 Gallery innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

Fortsätt till steg 5 – Lägg till navigering mellan sidor