Přidání zobrazení a modelu pro všechny poznámky

Tato část kurzu přidá do aplikace novou stránku, zobrazení, které zobrazuje všechny dříve vytvořené poznámky.

Více poznámek a navigace

Zobrazení poznámek v současné době zobrazuje jednu poznámku. Pokud chcete zobrazit všechny uložené poznámky, vytvořte nové zobrazení a model: AllNotes.

1. V podokně Průzkumník řešení klikněte pravým tlačítkem na Views složku a vyberte Přidat>novou položku...
2. V dialogovém okně Přidat novou položku vyberte WinUI v seznamu šablon na levé straně okna. Dále vyberte šablonu Prázdná stránka (WinUI 3 ). Pojmenujte soubor AllNotesPage.xaml a stiskněte Přidat.
3. V podokně Průzkumník řešení klikněte pravým tlačítkem na Models složku a vyberte Přidat> třídu...
4. Pojmenujte třídu AllNotes.cs a stiskněte Přidat.

Návod

Kód pro účely tohoto kurzu si můžete stáhnout nebo zobrazit z úložiště GitHub. Pokud chcete vidět kód, jak je v tomto kroku, podívejte se na toto potvrzení: zobrazení všech poznámek a model.

Kódování modelu AllNotes

Nový datový model představuje data potřebná k zobrazení více poznámek. Tady získáte všechny poznámky z místního úložiště aplikace a vytvoříte kolekci Note objektů, které se zobrazí v souboru AllNotesPage.

1. V podokně Průzkumník řešení otevřete soubor Models\AllNotes.cs .

2. Nahraďte kód v AllNotes.cs souboru tímto kódem:

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

Předchozí kód deklaruje kolekci Note položek s názvem Notesa používá metodu LoadNotes k načtení poznámek z místního úložiště aplikace.

Kolekce Notes používá ObservableCollection, což je specializovaná kolekce, která dobře funguje s datovou vazbou. Pokud je ovládací prvek, který obsahuje více položek, jako je Například ItemsView, je vázán na , ObservableCollectiontyto dva spolupracují a automaticky udržují seznam položek synchronizovaných s kolekcí. Pokud je položka přidána do kolekce, ovládací prvek se automaticky aktualizuje o novou položku. Pokud je položka přidána do seznamu, kolekce se aktualizuje.

Další informace najdete v dokumentaci:

• StorageFolder – třída, Třída StorageFile, IStorageItem.IsOfType – metoda
• Přístup k souborům a složkám pomocí sady Windows App SDK a rozhraní API WinRT

Teď, když AllNotes je model připravený k poskytnutí dat pro zobrazení, je potřeba vytvořit instanci modelu, AllNotesPage aby bylo možné k modelu získat přístup.

1. V podokně Průzkumník řešení otevřete soubor Views\AllNotesPage.xaml.cs .

2. AllNotesPage Do třídy přidejte tento kód pro vytvoření AllNotes modelu s názvem notesModel:

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

Návrh stránky AllNotes

Dále je potřeba navrhnout zobrazení tak, aby podporovalo AllNotes model.

1. V podokně Průzkumník řešení otevřete soubor Views\ (Zobrazení).AllNotesPage.xaml

2. <Grid> ... </Grid> Nahraďte prvek následujícím kódem:

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

Předchozí XAML představuje několik nových konceptů:

• Ovládací prvek CommandBar obsahuje AppBarButton. Toto tlačítko má Label a Iconje ovlivněno CommandBar tím, co obsahuje. Například nastaví CommandBar umístění popisku jeho tlačítek na Right. Panely příkazů se obvykle zobrazují v horní části aplikace spolu s názvem stránky.
• Ovládací prvek ItemsView zobrazí kolekci položek a v tomto případě je vázán na vlastnost modeluNotes. Způsob, jakým jsou položky prezentovány zobrazením položek je nastavena ItemsView.Layout prostřednictvím vlastnosti. Tady použijete UniformGridLayout.

Teď, když jste vytvořili AllNotesPage, je třeba MainWindow.xaml aktualizovat jednou naposledy tak, aby se načítá AllNotesPage místo jednotlivce NotePage.

1. V podokně Průzkumník řešení otevřete soubor MainWindow.xaml .

2. rootFrame Aktualizujte prvek tak, aby SourcePageType odkazy na views.AllNotesPage:

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

Pokud teď aplikaci spustíte, uvidíte, že se do ovládacího prvku načte ItemsView poznámka, kterou jste vytvořili dříve. Zobrazuje se ale jako řetězcová reprezentace objektu. Neví ItemsView , jak by se měla tato položka zobrazit. Opravíte to v další části.

Přidání šablony dat

Potřebujete zadat DataTemplate , abyste mohli zjistit ItemsView , jak se má položka dat zobrazit. Je DataTemplate přiřazen k ItemsTemplate vlastnost ItemsView. Pro každou položku v kolekci vygeneruje ItemsView.ItemTemplate deklarovaný XAML.

1. V podokně Průzkumník řešení poklikejte na AllNotesPage.xaml položku a otevřete ji v editoru XAML.

2. Přidejte toto nové mapování oboru názvů na řádek pod mapováním pro local:

   xmlns:models="using:WinUINotes.Models"
   

3. Přidejte prvek za levou <Page.Resources><Page...> značku. Tím získá ResourceDictionary z Pagevlastnosti Prostředky ', abyste do ní mohli přidat prostředky XAML.

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

4. Uvnitř elementu <Page.Resources>DataTemplate přidejte popis, jak zobrazit Note položku.

   <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. V kódu XAML pro ItemsViewpřiřaďte ItemTemplate vlastnost šabloně dat, kterou jste právě vytvořili:

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

6. Zkompilujte a spusťte aplikaci.

Při použití x:Bind rozšíření značek v , DataTemplatemusíte zadat x:DataType na .DataTemplate V tomto případě je to jednotlivec Note (takže musíte přidat odkaz na obor názvů XAML pro Models). Šablona poznámky používá dva TextBlock ovládací prvky, které jsou svázané s poznámkami Text a Date vlastnostmi. Element Grid se používá k rozložení a k poskytnutí barvy pozadí. Prvek Ohraničení se používá pro pozadí data. (Element XAML Border může poskytnout osnovu i pozadí.)

Když spustíte aplikaci, použije se u položek Note šablona dat a bude vypadat takto, pokud nastavení barev přizpůsobení > systému Windows používá režim Light:

Pokud ale nastavení barev přizpůsobení > Windows používá tmavý režim, bude vypadat takto:

Toto není zamýšlený vzhled aplikace. Stalo se to, protože v šabloně dat pro poznámku jsou pevně zakódované barevné hodnoty. Ve výchozím nastavení se prvky WinUI přizpůsobí předvolbě tmavé nebo světlé barvy uživatele. Když definujete vlastní prvky, jako je šablona dat, musíte být opatrní, abyste to udělali stejně.

Když definujete prostředek v XAML ResourceDictionary, musíte přiřadit x:Key hodnotu k identifikaci prostředku. Pak ho můžete použít x:Key k načtení prostředku v XAML pomocí {StaticResource} rozšíření značek nebo {ThemeResource} rozšíření značek.

• A {StaticResource} je stejný bez ohledu na barevný motiv, takže se používá pro věci, jako Font je nebo Style nastavení.
• Změní {ThemeResource} se na základě vybraného barevného motivu, takže se používá pro ForegroundBackground, a další vlastnosti související s barvou.

WinUI obsahuje celou řadu předdefinovaných prostředků, které můžete použít k tomu, aby vaše aplikace dodržovala pokyny pro styl Fluent a také pokyny pro usnadnění přístupu. Pevně zakódované barvy v šabloně dat nahradíte předdefinovanými prostředky motivu a použijete několik dalších prostředků, aby odpovídaly pokynům k návrhu Fluent.

1. V šabloně dat, kterou jste přidali dříve, aktualizujte oddíly uvedené tady, aby používaly předdefinované prostředky:

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

Když teď spustíte aplikaci s nastavením světlé barvy, bude vypadat takto:

A když spustíte aplikaci s nastavením Tmavé barvy, bude vypadat takto:

Další informace najdete v dokumentaci:

• kontejnery položek a šablony
• Odkazy na prostředky ResourceDictionary a na prostředky XAML

Návod

Aplikace WinUI 3 Gallery je skvělý způsob, jak se seznámit s různými ovládacími prvky WinUI a pokyny pro návrh. Pokud chcete zobrazit prostředky motivu používané v šabloně dat, otevřete WinUI 3 Gallery aplikaci v doprovodných materiálech k barvě. Odtud můžete zjistit, jak prostředky vypadají, a zkopírovat hodnoty, které potřebujete, přímo z aplikace.

Můžete také otevřít stránku Typografie a geometrii a zobrazit další předdefinované prostředky použité v této šabloně dat.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, funkcí a funkcí WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

Pokračujte krokem 5 – přidání navigace mezi stránkami