Partager via

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 De page vide (WinUI). 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.

Conseil / Astuce

Vous pouvez télécharger ou afficher le code de ce didacticiel à partir du dépôt GitHub. Pour voir le code tel qu’il se trouve dans cette étape, consultez ce commit : vue et modèle de toutes les notes.

Coder le modèle AllNotes

Le nouveau modèle de données représente les données requises pour afficher plusieurs notes. Ici, vous récupérerez toutes les notes du stockage local de l’application et créerez 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 une 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 :

Maintenant que le modèle AllNotes est prêt à fournir des données pour la vue, vous devez créer une instance du modèle dans AllNotesPage afin 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 compte 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 Icon, et est influencé par l'CommandBar qui le contient. Par exemple, cet élément CommandBar définit la position de l'étiquette de ses boutons sur Right. 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’il charge AllNotesPage au lieu d’un NotePage individuel.

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

  2. Mettez à jour l’élément rootFrame de sorte que SourcePageType pointe 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.

Interface utilisateur de l’application notes avec la liste de notes montrant le nom de la classe Note au lieu du contenu de la note.

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 qui décrit comment afficher un Note item.

    <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 balisage x:Bind dans un DataTemplate, vous devez spécifier x:DataType 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 contrôles TextBlock, qui sont liés aux propriétés Text et Date de 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 :

Interface utilisateur de l’application notes avec la liste des notes montrant le contenu et la date de note mis en forme par un modèle de données.

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

Interface utilisateur de l’application notes avec un arrière-plan foncé mais un modèle de note gris clair.

Ce n’est pas l’apparence 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 {StaticResource} ou de l'extension de balisage {ThemeResource}.

  • Un {StaticResource} est le même quel que soit le thème de couleur, il est donc utilisé pour des éléments tels que Font ou Style des paramètres.
  • Un {ThemeResource} change en fonction du thème de couleur sélectionné, et il est utilisé pour Foreground, Background, et 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 :

Interface utilisateur de l’application notes avec un modèle d’arrière-plan clair et de note légère.

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

Interface utilisateur de l’application notes avec un arrière-plan foncé et un modèle de note sombre.

En savoir plus dans la documentation :

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

Conseil / Astuce

L’application WinUI Gallery est un excellent moyen d’en savoir plus sur les différents contrôles WinUI et instructions de conception. Pour afficher les ressources de thème utilisées dans le modèle de données, accédez à la rubrique WinUI Gallery de l’application pour le guide des couleurs. À partir de là, vous pouvez voir à quoi ressemblent les ressources et copier les valeurs dont vous avez besoin directement à partir de l’application.

Vous pouvez également ouvrir la page Typographie et la page Geometry pour afficher d’autres ressources intégrées utilisées dans ce modèle de données.

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

Passer à l’étape 5 - Ajouter une navigation entre les pages

  • Last updated on