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 >Új elem hozzáadása...
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 3) sablont. Nevezze el a fájlt AllNotesPage.xaml , és nyomja le a Hozzáadás billentyűt.
3. A Megoldáskezelő panelen kattintson a jobb gombbal a Models mappára, és válassza >osztály hozzáadása...
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 ezt a véglegesítést: az összes jegyzetnézetet és modellt.

Az AllNotes-modell kódolása

Az új adatmodell a több jegyzet megjelenítéséhez szükséges adatokat jelöli. Itt lekérheti az alkalmazás helyi tárolójából származó összes jegyzetet, és létrehoz egy objektumgyűjteményt Note , amelyet a AllNotesPagealkalmazásban 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ál egy elnevezett NoteelemgyűjteménytNotes, és ezzel a LoadNotes módszerrel tölti be a jegyzeteket az alkalmazás helyi tárolójából.

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
• Fájlok és mappák elérése Windows App SDK-val é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 AllNotesPage egy példányát, hogy a nézet hozzáférhessen a modellhez.

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

2. Az osztályban adja hozzá ezt a AllNotesPage kódot egy AllNotesnotesModel nevű modell létrehozásához:

   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 modell támogatásához AllNotes .

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

2. Cserélje le az <Grid> ... </Grid> elemet a következő korrektúrára:

   <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 Icon, és az azt tartalmazó gombot is befolyásolja CommandBar . Ez CommandBar például a gombjai címkepozícióját állítja be Right. 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 MainWindow.xaml kell, hogy az egyéni AllNotesPagehelyett betöltseNotePage.

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

2. Frissítse az rootFrame elemet úgy, hogy a SourcePageType pontok a következőhöz hasonlóak:views.AllNotesPage

   <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. Nem ItemsView tudja, hogyan jelenjen meg ez az elem. 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. Ez DataTemplate a tulajdonság a .. ItemsTemplate tulajdonságához ItemsViewvan 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 bejegyzésre, AllNotesPage.xaml és nyissa meg az XAML-szerkesztőben.

2. Adja hozzá ezt az új névtérleképezést a következő leképezés alatti sorhoz local:

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

Ha a korrektúrakiterjesztést használja egy adott fájlban, meg kell adnia a következőt: . > 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 az elemekre Note lesz alkalmazva, és így néz ki, ha a Windows személyre szabási > színei a Világos módot használják:

Ha azonban a Windows személyre szabási > színei 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-elemek alkalmazkodnak a felhasználó sötét vagy világos színbeállításához. Amikor saját elemeket definiál, például adatsablont, körültekintően kell eljárnia.

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 lekérheti x:Key az erőforrást az XAML-ben a korrektúrakiterjesztés vagy {StaticResource} a {ThemeResource} korrektúrakiterjesztés használatával.

• Az A {StaticResource} színtémától függetlenül ugyanaz, ezért hasonlókhoz vagy Font beállításokhoz Style használják.
• A {ThemeResource} kiválasztott színtémán alapuló módosításokat, így a rendszer a színekkel Foregroundkapcsolatos egyéb tulajdonságokhoz Backgroundhasználja.

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 3 vezérlőinek, funkcióinak és funkcióinak többségére. Az alkalmazás lekérése a Microsoft Store-ból vagy a forráskód lekérése a GitHubon

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