Přidání zobrazení a modelu ke všem poznámkám

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ě Solution Explorer klikněte pravým tlačítkem na složku Views a vyberte Přidat>Nová položka...
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 ). Pojmenujte soubor AllNotesPage.xaml a stiskněte Přidat.
3. V podokně Solution Explorer klikněte pravým tlačítkem na složku Models a vyberte Add>Class...
4. Pojmenujte třídu AllNotes.cs a stiskněte Přidat.

Návod

Kód pro tento kurz 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 tento commit: zobrazení a model všech poznámek.

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 storage aplikace a vytvoříte kolekci objektů Note, které se zobrazí v AllNotesPage.

1. V podokně Solution Explorer 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 položek Note s názvem Notes a používá metodu LoadNotes k načtení poznámek z místního storage 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 ItemsView, vázán na ObservableCollection, tyto dva spolupracují a automaticky udržují seznam položek v synchronizaci 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:

• třída StorageFolder, třída StorageFile, metoda IStorageItem.IsOfType
• Access soubory a složky pomocí rozhraní API Windows App SDK a WinRT

Teď, když je model AllNotes připravený k poskytnutí dat pro zobrazení, musíte vytvořit instanci modelu v AllNotesPage, aby mělo zobrazení přístup k modelu.

1. V podokně Solution Explorer 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ě Solution Explorer otevřete soubor Views\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 Icon, a je ovlivněno CommandBar, které ho obsahuje. Například tento CommandBar nastaví umístění popisku svých 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 zobrazení položek je nastaven prostřednictvím vlastnosti ItemsView.Layout. Tady použijete UniformGridLayout.

Teď, když jste vytvořili AllNotesPage, je třeba MainWindow.xaml aktualizovat naposledy tak, aby načítal AllNotesPage místo jednotlivého NotePage.

1. V podokně Solution Explorer otevřete soubor MainWindow.xaml.

2. Aktualizujte prvek rootFrame tak, aby SourcePageType směřovalo na views.AllNotesPage, takto:

   <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í se, jak by se měla tato položka na ItemsView 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. DataTemplate je přiřazen k vlastnosti ItemsTemplate od ItemsView. Pro každou položku v kolekci vygeneruje ItemsView.ItemTemplate deklarovaný XAML.

1. V podokně Solution Explorer poklikejte na položku AllNotesPage.xaml 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 <Page.Resources> za otevírací značku <Page...>. Tím získá ResourceDictionary z vlastnosti Page, což umožňuje přidat do něj 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í rozšíření značek x:Bind v DataTemplate, musíte zadat x:DataType na DataTemplate. V tomto případě je to jednotlivá komponenta 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 vlastnostmi Text a Date poznámky. 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 3 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 postupovali stejně.

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

• {StaticResource} je stejný bez ohledu na barevný motiv, takže je používán pro věci jako Font nebo Style nastavení.
• Měnič {ThemeResource} se mění na základě vybraného barevného motivu, takže se používá pro Foreground, Background 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 a přejděte na pokyny pro barvy. 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 ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

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