Ajouter un affichage et un modèle pour la note

Cette partie du didacticiel présente les concepts des vues et des modèles de données.

Dans les étapes précédentes du didacticiel, vous avez ajouté une nouvelle page au projet qui permet à l’utilisateur d’enregistrer, de modifier ou de supprimer une seule note. Toutefois, étant donné que l’application doit gérer plusieurs notes, vous devez ajouter une autre page qui affiche toutes les notes (appelez-la AllNotesPage). Cette page permet à l’utilisateur de choisir une note à ouvrir dans la page de l’éditeur afin qu’il puisse afficher, modifier ou supprimer celui-ci. Il doit également permettre à l’utilisateur de créer une note.

Pour ce faire, AllNotesPage vous devez disposer d’une collection de notes et d’un moyen d’afficher la collection. C’est là que l’application rencontre des problèmes, car les données de note sont étroitement liées au NotePage fichier. Dans AllNotesPage, vous souhaitez simplement afficher toutes les notes d’une liste ou d’une autre vue de collection, avec des informations sur chaque note, comme la date de création et un aperçu du texte. Avec le texte de note étroitement lié au TextBox contrôle, il n’existe aucun moyen de le faire.

Avant d’ajouter une page pour afficher toutes les notes, nous allons apporter des modifications pour séparer les données de note de la présentation de note.

Vues et modèles

En règle générale, une application WinUI a au moins une couche d’affichage et une couche de données.

La couche d’affichage définit l’interface utilisateur à l’aide du balisage XAML. Le balisage inclut des expressions de liaison de données (telles que x :Bind) qui définissent la connexion entre des composants d’interface utilisateur spécifiques et des membres de données. Les fichiers code-behind sont parfois utilisés dans le cadre de la couche d’affichage pour contenir du code supplémentaire nécessaire pour personnaliser ou manipuler l’interface utilisateur, ou pour extraire des données à partir d’arguments de gestionnaire d’événements avant d’appeler une méthode qui effectue le travail sur les données.

La couche de données ou le modèle définit les types qui représentent les données de votre application et la logique associée. Cette couche est indépendante de la couche d’affichage et vous pouvez créer plusieurs vues qui interagissent avec les données.

Actuellement, il NotePage représente une vue des données (le texte de la note). Toutefois, une fois que les données sont lues dans l’application à partir du fichier système, elles existent uniquement dans la Text propriété de l’élément TextBoxNotePage. Elle n’est pas représentée dans l’application d’une manière qui vous permet de présenter les données de différentes manières ou dans différents endroits ; autrement dit, l’application n’a pas de couche de données. Vous allez restructurer le projet maintenant pour créer la couche de données.

Séparer la vue et le modèle

Refactorisez le code existant pour séparer le modèle de la vue. Les prochaines étapes vont organiser le code afin que les vues et les modèles soient définis séparément les uns des autres.

1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le WinUINotes projet, puis sélectionnez Ajouter>un nouveau dossier. Nommez le dossier Models.

2. Cliquez à nouveau avec le bouton droit sur le WinUINotes projet, puis sélectionnez Ajouter>un nouveau dossier. Nommez le dossier Views.

3. Recherchez l’élément NotePage.xaml et faites-le glisser vers le Views dossier. Le NotePage.xaml.cs fichier doit être déplacé avec lui.

   Note

   Quand vous déplacez un fichier, Visual Studio vous avertit généralement que l’opération de déplacement peut prendre beaucoup de temps. Cela ne devrait pas être un problème ici ; appuyez sur OK si vous voyez cet avertissement.

   Visual Studio peut également vous demander si vous voulez ajuster l’espace de noms du fichier déplacé. Sélectionnez Non. Vous allez modifier l’espace de noms dans les étapes suivantes.

Mettre à jour l’espace de noms des vues

Maintenant que la vue a été déplacée vers le Views dossier, vous devez mettre à jour les espaces de noms pour qu’ils correspondent. L’espace de noms pour les fichiers XAML et code-behind des pages est défini sur WinUINotes. Ceci doit être changé en WinUINotes.Views.

1. Dans le volet Explorateur de solutions , développez NotePage.xaml pour afficher le fichier code-behind.

2. Double-cliquez sur l’élément NotePage.xaml.cs pour ouvrir l’éditeur de code s’il n’est pas déjà ouvert. Remplacez l’espace de noms par WinUINotes.Views :

   namespace WinUINotes.Views
   

3. Double-cliquez sur l’élément NotePage.xaml pour ouvrir l’éditeur XAML s’il n’est pas déjà ouvert. L’ancien espace de noms est référencé via l’attribut x:Class, qui définit de quel type de classe est le code-behind pour le XAML. Cette entrée n’est pas seulement l’espace de noms : c’est l’espace de noms avec le type. Remplacez la valeur x:Class par WinUINotes.Views.NotePage :

   x:Class="WinUINotes.Views.NotePage"
   

Correction de la référence d’espace de noms dans MainWindow

À l’étape précédente, vous avez créé la page de notes et mis à jour MainWindow.xaml pour y accéder. N’oubliez pas qu’il a été mappé avec le mappage d’espace local: de noms. Il est courant de mapper le nom local à l’espace de noms racine de votre projet et le modèle de projet Visual Studio le fait déjà pour vous (xmlns:local="using:WinUINotes"). Maintenant que la page a été déplacée vers un nouvel espace de noms, le mappage de type dans le code XAML n’est plus valide.

Heureusement, vous pouvez ajouter vos propres mappages d’espaces de noms en fonction des besoins. Pour ce faire, vous devez accéder aux éléments dans différents dossiers que vous créez dans votre projet. Ce nouvel espace de noms XAML est mappé à l’espace de noms de WinUINotes.Views, donc nommez-le views. La déclaration doit ressembler à l’attribut suivant : xmlns:views="using:WinUINotes.Views".

1. Dans le volet Explorateur de solutions , double-cliquez sur l’entrée MainWindow.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:views="using:WinUINotes.Views"
   

3. L’espace local de noms XAML a été utilisé pour définir la Frame.SourcePageType propriété, donc remplacez-la par views là. Votre code XAML doit maintenant ressembler à ceci :

   <Window
       x:Class="WinUINotes.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:WinUINotes"
       xmlns:views="using:WinUINotes.Views"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       Title="WinUI Notes">
   
       <!-- ... Unchanged XAML not shown. -->
   
           <Frame x:Name="rootFrame" Grid.Row="1"
                  SourcePageType="views:NotePage"/>
   
       <!-- ... Unchanged XAML not shown. -->
   
   </Window>
   

4. Générez et exécutez l’application. L’application doit s’exécuter sans erreur du compilateur, et tout doit toujours fonctionner comme avant.

Définir le modèle

Actuellement, le modèle (les données) est incorporé dans la vue note. Vous allez créer une classe pour représenter les données d’une page de notes :

1. Dans le volet Explorateur de solutions, cliquez avec le bouton droit sur le dossier Models, puis sélectionnez Ajouter>Classe....

2. Nommez la classe Note.cs et appuyez sur Ajouter. Le Note.cs fichier s’ouvre dans l’éditeur de code.

3. Remplacez le code dans le Note.cs fichier par ce code, ce qui rend la classe public et ajoute des propriétés et des méthodes pour la gestion d’une note :

   using System;
   using System.Threading.Tasks;
   using Windows.Storage;
   
   namespace WinUINotes.Models
   {
       public class Note
       {
           private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
           public string Filename { get; set; } = string.Empty;
           public string Text { get; set; } = string.Empty;
           public DateTime Date { get; set; } = DateTime.Now;
   
           public Note()
           {
               Filename = "notes" + DateTime.Now.ToBinary().ToString() + ".txt";
           }
   
           public async Task SaveAsync()
           {
               // Save the note to a file.
               StorageFile noteFile = (StorageFile)await storageFolder.TryGetItemAsync(Filename);
               if (noteFile is null)
               {
                   noteFile = await storageFolder.CreateFileAsync(Filename, CreationCollisionOption.ReplaceExisting);
               }
               await FileIO.WriteTextAsync(noteFile, Text);
           }
   
           public async Task DeleteAsync()
           {
               // Delete the note from the file system.
               StorageFile noteFile = (StorageFile)await storageFolder.TryGetItemAsync(Filename);
               if (noteFile is not null)
               {
                   await noteFile.DeleteAsync();
               }
           }
       }
   }
   

4. Enregistrez le fichier.

Vous remarquerez que ce code est très similaire au code dans NotePage.xaml.cs, avec quelques modifications et ajouts.

Filename et Text ont été modifiés en public propriétés, et une nouvelle Date propriété a été ajoutée.

Le code permettant d’enregistrer et de supprimer les fichiers a été placé dans public des méthodes. Il est principalement identique au code que vous avez utilisé dans les gestionnaires d’événements de bouton Click dans NotePage, mais du code supplémentaire pour mettre à jour l’affichage une fois le fichier supprimé a été supprimé. Il n’est pas nécessaire ici, car vous utiliserez la liaison de données pour conserver le modèle et la vue synchronisées.

Ces signatures de méthode asynchrone retournent Task au lieu de void. La Task classe représente une opération asynchrone unique qui ne retourne pas de valeur. Sauf si la signature de méthode nécessite void, comme c’est le cas pour les Click gestionnaires d’événements, async les méthodes doivent retourner un Task.

Vous ne conservez plus de référence à la StorageFile note. Vous essayez simplement d’obtenir le fichier lorsque vous en avez besoin pour enregistrer ou supprimer.

Dans NotePage, vous avez utilisé un espace réservé pour le nom de fichier : note.txt. Maintenant que l’application prend en charge plusieurs notes, les noms de fichiers pour les notes enregistrées doivent être différents et uniques. Pour ce faire, définissez la Filename propriété dans le constructeur. Vous pouvez utiliser la méthode DateTime.ToBinary pour créer une partie du nom de fichier en fonction de l’heure actuelle et rendre les noms de fichiers uniques. Le nom de fichier généré ressemble à ceci : notes-8584626598945870392.txt.

Mettre à jour la page de note

Vous pouvez maintenant mettre à jour la NotePage vue pour utiliser le modèle de données et supprimer le Note code qui a été déplacé vers le Note modèle.

1. Ouvrez le fichier Views\NotePage.xaml.cs s’il n’est pas déjà ouvert dans l’éditeur.

2. Après la dernière using instruction en haut de la page, ajoutez une nouvelle using instruction pour donner à votre code l’accès aux classes du dossier et de l’espace Models de noms.

   using WinUINotes.Models;
   

3. Supprimez ces lignes de la classe :

   private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
   private StorageFile? noteFile = null;
   private string fileName = "note.txt";
   

4. Au lieu de cela, ajoutez un Note objet nommé noteModel à leur place. Cela représente les données de note qui NotePage fournissent une vue d’ensemble.

   private Note? noteModel;
   

5. Vous n’avez plus besoin du NotePage_Loaded gestionnaire d’événements. Vous ne lirez pas directement du texte à partir du fichier texte dans la zone de texte. Au lieu de cela, le texte de la note sera lu dans des Note objets. Vous allez ajouter le code pour cela lorsque vous ajoutez le AllNotesPage code dans une étape ultérieure. Supprimez ces lignes.

   Loaded += NotePage_Loaded;
   
   ...
   
   private async void NotePage_Loaded(object sender, RoutedEventArgs e)
   {
       noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
       if (noteFile is not null)
       {
         NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
       }
   }
   

6. Remplacez le code dans la SaveButton_Click méthode par ceci :

   if (noteModel is not null)
   {
       await noteModel.SaveAsync();
   }
   

7. Remplacez le code dans la DeleteButton_Click méthode par ceci :

   if (noteModel is not null)
   {
       await noteModel.DeleteAsync();
   }
   

Vous pouvez maintenant mettre à jour le fichier XAML pour utiliser le Note modèle. Auparavant, vous lisez le texte directement à partir du fichier texte dans la TextBox.Text propriété du fichier code-behind. À présent, vous utilisez la liaison de données pour la Text propriété.

1. Ouvrez le fichier Views\NotePage.xaml s’il n’est pas déjà ouvert dans l’éditeur.

2. Ajoutez un Text attribut au TextBox contrôle. Liez-le à la Text propriété de noteModel: Text="{x:Bind noteModel.Text, Mode=TwoWay}".

3. Mettez à jour la Header liaison à la Date propriété de noteModel: Header="{x:Bind noteModel.Date.ToString()}".

   <TextBox x:Name="NoteEditor"
            <!-- ↓ Add this line. ↓ -->
            Text="{x:Bind noteModel.Text, Mode=TwoWay}"
            AcceptsReturn="True"
            TextWrapping="Wrap"
            PlaceholderText="Enter your note"
            <!-- ↓ Update this line. ↓ -->
            Header="{x:Bind noteModel.Date.ToString()}"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            Width="400"
            Grid.Column="1"/>
   

La liaison de données est un moyen pour l’interface utilisateur de votre application d’afficher des données, et éventuellement de rester synchronisée avec ces données. Le Mode=TwoWay paramètre sur la liaison signifie que les propriétés et TextBox.Text les noteModel.Text propriétés sont automatiquement synchronisées. Lorsque le texte est mis à jour dans le TextBox, les modifications sont reflétées dans la Text propriété du noteModel, et si noteModel.Text elle est modifiée, les mises à jour sont reflétées dans le TextBox.

La Header propriété utilise la valeur par défaut ModeOneTime , car la noteModel.Date propriété ne change pas une fois le fichier créé. Ce code illustre également une fonctionnalité puissante de x:Bind de fonction, qui vous permet d’utiliser une fonction comme ToString une étape dans le chemin de liaison.

La liaison de données prend en charge la séparation de vos données et de votre interface utilisateur, ce qui entraîne un modèle conceptuel plus simple, ainsi qu’une meilleure lisibilité, la testabilité et la maintenance de votre application.

Dans WinUI, il existe deux types de liaison parmi lesquels vous pouvez choisir :

• L’extension de {x:Bind} balisage est traitée au moment de la compilation. Certains de ses avantages sont des performances améliorées et la validation au moment de la compilation de vos expressions de liaison. Il est recommandé pour la liaison dans les applications WinUI.
• L’extension de {Binding} balisage est traitée au moment de l’exécution et utilise l’inspection d’objet runtime à usage général.

En savoir plus dans la documentation :

• Liaison de données dans les applications Windows
• {x :Bind}, {Binding}

Liaison de données et MVVM

Model-View-ViewModel (MVVM) est un modèle de conception architecturale d’interface utilisateur pour découpler l’interface utilisateur et le code non-interface utilisateur populaire avec les développeurs .NET. Vous verrez probablement et entendez-le comme vous en apprendrez davantage sur la création d’applications WinUI. La séparation des vues et des modèles, comme vous l’avez fait ici, est la première étape vers une implémentation complète de MVVM de l’application, mais c’est aussi loin que vous allez dans ce tutoriel.

Pour en savoir plus sur MVVM, consultez les ressources suivantes :

• Liaison de données Windows et MVVM
• Présentation du kit de ressources MVVM
• Blocs de construction MVVM pour le développement WinUI et WPF sur YouTube.