Ajouter une vue et un modèle pour toutes les notes

Cette partie du didacticiel ajoute une nouvelle page à l’application, une vue qui affiche toutes les notes précédemment créées.

Plusieurs notes et navigation

Actuellement, la vue note affiche une seule note. Pour afficher toutes vos notes enregistrées, créez une vue et un modèle : AllNotes.

1. Dans le volet Explorateur de solutions, cliquez avec le bouton droit sur le dossier Views, puis sélectionnez Ajouter>Nouvel élément...
2. Dans la boîte de dialogue Ajouter un nouvel élément , sélectionnez WinUI dans la liste des modèles sur le côté gauche de la fenêtre. Ensuite, sélectionnez le modèle Page vide (WinUI 3). Nommez le fichier AllNotesPage.xaml et appuyez sur Ajouter.
3. Dans le volet Explorateur de solutions, cliquez avec le bouton droit sur le dossier Models, puis sélectionnez Ajouter>Classe...
4. Nommez la classe AllNotes.cs et appuyez sur Ajouter.

Coder le modèle AllNotes

Le nouveau modèle de données représente les données requises pour afficher plusieurs notes. Ici, vous obtenez toutes les notes du stockage local de l’application et créez une collection d’objets Note que vous allez afficher dans le AllNotesPage.

1. Dans le volet Explorateur de solutions , ouvrez le fichier Models\AllNotes.cs .

2. Remplacez le code dans le AllNotes.cs fichier par ce code :

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

Le code précédent déclare une collection d’éléments Note , nommé Noteset utilise la LoadNotes méthode pour charger des notes à partir du stockage local de l’application.

La Notes collection utilise un ObservableCollection, qui est une collection spécialisée qui fonctionne bien avec la liaison de données. Lorsqu’un contrôle qui répertorie plusieurs éléments, tels qu’un ItemsView, est lié à un ObservableCollectioncontrôle , les deux fonctionnent ensemble pour conserver automatiquement la liste des éléments synchronisés avec la collection. Si un élément est ajouté à la collection, le contrôle est automatiquement mis à jour avec le nouvel élément. Si un élément est ajouté à la liste, la collection est mise à jour.

En savoir plus dans la documentation :

• Classe StorageFolder, classe StorageFile, méthode IStorageItem.IsOfType
• Accéder aux fichiers et dossiers avec le SDK d’applications Windows et les API WinRT

Maintenant que le AllNotes modèle est prêt à fournir des données pour la vue, vous devez créer une instance du modèle afin AllNotesPage que la vue puisse accéder au modèle.

1. Dans le volet Explorateur de solutions , ouvrez le fichier Views\AllNotesPage.xaml.cs .

2. Dans la AllNotesPage classe, ajoutez ce code pour créer un AllNotes modèle nommé notesModel :

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

Concevoir la page AllNotes

Ensuite, vous devez concevoir la vue pour prendre en charge le AllNotes modèle.

1. Dans le volet Explorateur de solutions , ouvrez le fichier Views\AllNotesPage.xaml .

2. Remplacez l’élément <Grid> ... </Grid> par le balisage suivant :

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

Le XAML précédent introduit quelques nouveaux concepts :

• Le contrôle CommandBar contient un AppBarButton. Ce bouton a un Label et Iconest influencé par celui CommandBar qui le contient. Par exemple, cela CommandBar définit la position de l’étiquette de ses boutons Rightsur . Les barres de commandes sont généralement affichées en haut de l’application, ainsi que le titre de la page.
• Le contrôle ItemsView affiche une collection d’éléments et, dans ce cas, est lié à la propriété du Notes modèle. La façon dont les éléments sont présentés par la vue Éléments est définie via la ItemsView.Layout propriété. Ici, vous utilisez un UniformGridLayout.

Maintenant que vous avez crééAllNotesPage, vous devez mettre à jour MainWindow.xaml une dernière fois afin qu’elle se charge AllNotesPage au lieu d’une personne.NotePage

1. Dans le volet Explorateur de solutions , ouvrez le fichier MainWindow.xaml .

2. Mettez à jour l’élément rootFrame de sorte que les SourcePageType points vers views.AllNotesPage, comme suit :

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

Si vous exécutez l’application maintenant, vous verrez que la note que vous avez créée précédemment est chargée dans le ItemsView contrôle. Toutefois, il s’agit simplement de la représentation sous forme de chaîne de l’objet. L’élément ItemsView ne sait pas comment cet élément doit être affiché. Vous allez corriger cela dans la section suivante.

Ajouter un modèle de données

Vous devez spécifier un DataTemplate pour indiquer la ItemsView façon dont votre élément de données doit être affiché. L’objet DataTemplate est affecté à la propriété ItemsTemplate de l’objet ItemsView. Pour chaque élément de la collection, le ItemsView.ItemTemplate génère le XAML déclaré.

1. Dans le volet Explorateur de solutions , double-cliquez sur l’entrée AllNotesPage.xaml pour l’ouvrir dans l’éditeur XAML.

2. Ajoutez ce nouveau mappage d’espace de noms sur la ligne située sous le mappage pour local:

   xmlns:models="using:WinUINotes.Models"
   

3. Ajoutez un <Page.Resources> élément après la balise d’ouverture <Page...> . Cette opération obtient resourceDictionary à partir de la Pagepropriété Resources afin que vous puissiez y ajouter des ressources XAML.

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

4. À l’intérieur de l’élément <Page.Resources> , ajoutez le DataTemplate code qui décrit comment afficher un Note élément.

   <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. Dans le code XAML pour ItemsView, affectez la ItemTemplate propriété au modèle de données que vous venez de créer :

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

6. Générez et exécutez l’application.

Lorsque vous utilisez l’extension de x:Bind balisage dans un DataTemplate, vous devez spécifier la x:DataType valeur sur le DataTemplate. Dans ce cas, il s’agit d’un individu Note (vous devez donc ajouter une référence d’espace de noms XAML pour Models). Le modèle de la note utilise deux TextBlock contrôles, qui sont liés aux propriétés et Text aux propriétés de Date la note. L’élément Grid est utilisé pour la disposition et pour fournir une couleur d’arrière-plan. Un élément Border est utilisé pour l’arrière-plan de la date. (L’élément XAML Border peut fournir un plan et un arrière-plan.)

Lorsque vous exécutez l’application, le modèle de données est appliqué à vos Note éléments et ressemble à ceci si vos paramètres Couleurs de personnalisation > Windows utilisent le mode Clair :

Toutefois, si vos paramètres Couleurs de personnalisation > Windows utilisent le mode Sombre, il se présente comme suit :

Il ne s’agit pas de la recherche prévue de l’application. Cela s’est produit parce qu’il existe des valeurs de couleur codées en dur dans le modèle de données de la note. Par défaut, les éléments WinUI s’adaptent à la préférence de couleur foncée ou claire de l’utilisateur. Lorsque vous définissez vos propres éléments, comme un modèle de données, vous devez faire de même.

Lorsque vous définissez une ressource dans un code XAML ResourceDictionary, vous devez attribuer une x:Key valeur pour identifier la ressource. Ensuite, vous pouvez l’utiliser x:Key pour récupérer la ressource en XAML à l’aide de l’extension de balisage ou {StaticResource} de l’extension {ThemeResource} de balisage.

• Un {StaticResource} est le même quel que soit le thème de couleur. Il est donc utilisé pour des éléments tels Font que ou Style des paramètres.
• Une {ThemeResource} modification basée sur le thème de couleur sélectionné, de sorte qu’elle est utilisée pour Foreground, Backgroundet d’autres propriétés liées aux couleurs.

WinUI inclut une variété de ressources intégrées que vous pouvez utiliser pour que votre application suive les instructions de style Fluent, ainsi que les instructions d’accessibilité. Vous allez remplacer les couleurs codées en dur dans le modèle de données par des ressources de thème intégrées et appliquer quelques autres ressources pour correspondre aux instructions Fluent Design.

1. Dans le modèle de données que vous avez ajouté précédemment, mettez à jour les sections indiquées ici pour utiliser des ressources intégrées :

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

Maintenant, lorsque vous exécutez l’application avec un paramètre de couleur clair, elle se présente comme suit :

Et lorsque vous exécutez l’application avec un paramètre de couleur foncée, elle se présente comme suit :

En savoir plus dans la documentation :

• Conteneurs et modèles d'éléments
• Références de ressources de ResourceDictionary et XAML

L’application WinUI 3 Gallery inclut des exemples interactifs de la plupart des contrôles, fonctionnalités et fonctionnalités WinUI 3. Obtenir l’application à partir du Microsoft Store ou obtenir le code source sur GitHub