Nézet és modell hozzáadása az összes jegyzethez

Az oktatóanyag ezen része egy új lapot ad hozzá az alkalmazáshoz, egy nézetet, amely megjeleníti a korábban létrehozott összes jegyzetet.

Több jegyzet és navigáció

Jelenleg a jegyzet nézet egyetlen megjegyzést jelenít meg. Az összes mentett jegyzet megjelenítéséhez hozzon létre egy új nézetet és modellt: AllNotes.

1. A Megoldáskezelő panelen kattintson a jobb gombbal a Views mappára, és válassza a Add>New Item...
2. Az Új elem hozzáadása párbeszédpanelen válassza a WinUI lehetőséget az ablak bal oldalán található sablonlistában. Ezután válassza ki az Üres lap (WinUI) sablont. Nevezze el a fájlt AllNotesPage.xaml , és nyomja le a Hozzáadás billentyűt.
3. A Megoldáskezelő ablaktáblán kattintson a jobb gombbal a Models mappára, és válassza a Add>Class...
4. Nevezze el az osztályt AllNotes.cs , és nyomja le a Hozzáadás billentyűt.

Jótanács

Az oktatóanyag kódját a GitHub adattárból töltheti le vagy tekintheti meg. A jelen lépésben szereplő kód megtekintéséhez tekintse meg a következő commitot: all notes view and model.

Az AllNotes-modell kódolása

Az új adatmodell a több jegyzet megjelenítéséhez szükséges adatokat jelöli. Itt megkapja az alkalmazás helyi tárolójában lévő összes jegyzetet, és létrehozhat egy gyűjteményt Note objektumokból, amelyeket a AllNotesPage fog megjeleníteni.

1. A Megoldáskezelő panelen nyissa meg a Models\AllNotes.cs fájlt.

2. Cserélje le a AllNotes.cs fájlban lévő kódot a következő kódra:

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

Az előző kód deklarálja a Note nevű Notes elemek gyűjteményét, és a LoadNotes metódussal tölti be az alkalmazás helyi storage jegyzeteit.

Megjegyzés:

A LoadNotes metódus async void-t használ async Task helyett, mert a konstruktortól hívják, ami nem lehet async. Ez a "fire-and-forget" minta itt elfogadható, mivel a módszer eseményjellegű inicializálási rutin.

A Notes gyűjtemény egy ObservableCollectiont használ, amely egy speciális gyűjtemény, amely jól működik az adatkötéssel. Ha egy vezérlőelem, amely több elemet, például egy ItemsView-t tartalmaz, egyhez ObservableCollectionvan kötve, a kettő együttműködve automatikusan szinkronizálja az elemek listáját a gyűjteményrel. Ha hozzáad egy elemet a gyűjteményhez, a vezérlő automatikusan frissül az új elemgel. Ha hozzáad egy elemet a listához, a gyűjtemény frissül.

További információ a dokumentumokban:

• StorageFolder osztály, StorageFile osztály, IStorageItem.IsOfType metódus
• Hozzáférés a fájlokhoz és mappákhoz a Windows App SDK és WinRT API-kkal

Most, hogy a AllNotes modell készen áll a nézet adatainak megadására, létre kell hoznia a modell egy példányát AllNotesPage-ben, hogy a nézet hozzáférhessen a modellhez.

1. A Megoldáskezelő panelen nyissa meg a Views\AllNotesPage.xaml.cs fájlt.

2. Az AllNotesPage osztályban helyezzen el egy AllNotesnotesModel nevű modell létrehozásához szükséges kódot:

   Megjegyzés:

   A fájl tetején hozzá kell adnia a using WinUINotes.Models;-t, hogy hivatkozzon a AllNotes osztályra.

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

Az AllNotes lap tervezése

Ezután meg kell terveznie a nézetet a AllNotes modell támogatásához.

1. A Megoldáskezelő panelen nyissa meg a Views\AllNotesPage.xaml fájlt.

2. Cserélje le az <Grid> ... </Grid> elemet a következő jelölőnyelvi elemre:

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

Az előző XAML néhány új fogalmat vezet be:

• A Parancssáv vezérlőelem egy AppBarButtont tartalmaz. Ez a gomb rendelkezik egy Label és egy Icon, és hatással van rá az CommandBar, amely tartalmazza. Például ez CommandBar a gombjai címkéinek pozícióját Right állítja be. A parancssávok általában az alkalmazás tetején, az oldal címével együtt jelennek meg.
• Az ItemsView vezérlő egy elemgyűjteményt jelenít meg, amely ebben az esetben a modell tulajdonságához Notes van kötve. Az elemek megjelenítési módja az elemek nézetében a ItemsView.Layout tulajdonságon keresztül van beállítva. Itt egy UniformGridLayoutot használ.

Most, hogy létrehoztaAllNotesPage, egy utolsó alkalommal frissítenie kellMainWindow.xaml, hogy AllNotesPage-t töltsön be az egyéni NotePage helyett.

1. A Megoldáskezelő panelen nyissa meg a MainWindow.xaml fájlt.

2. Frissítse az rootFrame elemet úgy, hogy a SourcePageType a views.AllNotesPage-re mutasson, így:

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

Ha most futtatja az alkalmazást, látni fogja, hogy a korábban létrehozott jegyzet betöltődik a ItemsView vezérlőbe. Ez azonban csak az objektum sztring-ábrázolásaként jelenik meg. ItemsView nem tudja, hogyan kellene megjeleníteni ezt az elemet. Ezt a következő szakaszban fogja kijavítani.

Adatsablon hozzáadása

Meg kell adnia egy DataTemplate-et , hogy meg tudja mondani, ItemsView hogyan jelenjen meg az adatelem. A DataTemplate a ItemsView tulajdonságához van hozzárendelve. A gyűjtemény minden eleméhez a ItemsView.ItemTemplate létrehozza a deklarált XAML-t.

1. A Megoldáskezelő panelen kattintson duplán a AllNotesPage.xaml bejegyzésre az XAML-szerkesztőben való megnyitásához.

2. Adja hozzá ezt az új névtértérképét az alábbi sorhoz a local-hoz tartozó térképezés után:

   xmlns:models="using:WinUINotes.Models"
   

3. Adjon hozzá egy <Page.Resources> elemet a nyitó <Page...> címke után. Ez lekéri a ResourceDictionaryt az PageErőforrások tulajdonságból, így XAML-erőforrásokat adhat hozzá.

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

4. Az elemen <Page.Resources> belül adja hozzá az DataTemplate elem megjelenítésének Note módját leíró szöveget.

   <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. Az XAML-ben módosítsa a ItemsView-t úgy, hogy a Padding="16"-t lecseréli Margin="24"-re, és rendelje hozzá a ItemTemplate tulajdonságot az imént létrehozott adatsablonhoz.

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

6. Hozza létre és futtassa az alkalmazást.

Amikor a x:Bind jelölési kiterjesztést használ egy DataTemplate, meg kell adnia a x:DataType-t a DataTemplate-n. Ebben az esetben ez egy egyéni Note (ezért hozzá kell adnia egy XAML-névtérhivatkozást a következőhöz Models: ). A jegyzet sablonja két TextBlock vezérlőt használ, amelyek a jegyzet Text tulajdonságaihoz és Date tulajdonságaihoz vannak kötve. A Rács elem az elrendezéshez és a háttérszín megadásához használatos. A dátum hátteréhez szegélyelemet használunk. (Az XAML Border elem vázlatot és hátteret is biztosít.)

Az alkalmazás futtatásakor az adatsablon a Note elemekre lesz alkalmazva, és így néz ki, ha a Windows Személyre szabási > Színek beállításai a Világos módot használják:

Ha azonban a Windows Személyre szabási > Színek beállításai a Sötét módot használják, az a következőképpen fog kinézni:

Nem ez az alkalmazás rendeltetése. Ez azért történt, mert a jegyzet adatsablonjában rögzített színértékek találhatók. Alapértelmezés szerint a WinUI 3 elem alkalmazkodik a felhasználó sötét vagy világos színbeállításához. Ha saját elemeket definiál, például adatsablont, akkor óvatosnak kell lennie, hogy ugyanazokat tegye meg.

Ha egy XAML-ben ResourceDictionarydefiniál egy erőforrást, hozzá kell rendelnie egy x:Key értéket az erőforrás azonosításához. Ezt követően az XAML-ben x:Key vagy {StaticResource} jelöléskiterjesztés használatával lekérheti az erőforrást.

• A {StaticResource} független a színsémától, ezért olyan dolgokra használják, mint a Font vagy a Style beállítások.
• A {ThemeResource} megváltozik a kiválasztott színtéma alapján, így ezt használják Foreground, Background és egyéb színekkel kapcsolatos tulajdonságokhoz.

A WinUI számos beépített erőforrást tartalmaz, amelyekkel az alkalmazás a Fluent stílusra vonatkozó irányelveket és akadálymentességi irányelveket követve használható. Az adatsablonban lévő kemény kódolt színeket beépített témaerőforrásokra cseréli, és néhány más erőforrást is alkalmaz a Fluent tervezési irányelveinek megfelelően.

1. A korábban hozzáadott adatsablonban frissítse az itt megjelölt szakaszokat a beépített erőforrások használatához:

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

Most, amikor világos színbeállítással futtatja az alkalmazást, az a következőképpen fog kinézni:

Ha sötét színbeállítással futtatja az alkalmazást, az a következőképpen fog kinézni:

További információ a dokumentumokban:

• Elemtárolók és -sablonok
• Erőforrás-szótár és XAML erőforráshivatkozások

Jótanács

Az WinUI 3 Gallery alkalmazás nagyszerű lehetőséget ad a WinUI különböző vezérlőinek és tervezési irányelveinek megismerésére. Az adatsablonban használt témaerőforrások megtekintéséhez nyissa meg az WinUI 3 Gallery alkalmazást a Szín útmutatóban. Innen láthatja, hogyan néznek ki az erőforrások, és közvetlenül az alkalmazásból másolhatja a szükséges értékeket.

A Tipográfia lap és a Geometria lap megnyitásával megtekintheti az adatsablonban használt egyéb beépített erőforrásokat is.

Az WinUI 3 Gallery alkalmazás interaktív példákat tartalmaz a WinUI-vezérlőkre és -funkciókra. Kérje le az alkalmazást a Microsoft Store vagy keresse meg a forráskódot GitHub.

Tovább az 5. lépésre – Navigáció hozzáadása oldalak között