Partager via

Créer une page pour une note

Vous allez maintenant créer une page qui permet à un utilisateur de modifier une note, puis vous allez écrire le code pour enregistrer ou supprimer la note.

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 cette page de validation : page remarque - initiale.

Ajoutez d’abord la nouvelle page au projet :

  1. Dans le volet Explorateur de solutions de Visual Studio, cliquez avec le bouton droit sur le projet >Ajouter>un 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 NotePage.xaml, puis sélectionnez Ajouter.

  3. Le NotePage.xaml fichier s’ouvre dans un nouvel onglet, affichant tout le balisage XAML qui représente l’interface utilisateur de la page. Remplacez l’élément <Grid> ... </Grid> dans le code XAML par le balisage suivant :

    <Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

  4. Enregistrez le fichier en appuyant sur Ctrl + S, en cliquant sur l’icône Enregistrer dans la barre d’outils ou en sélectionnant le menule >NotePage.xaml .

    Si vous exécutez l’application en ce moment, vous ne verrez pas la page de note que vous venez de créer. C’est parce que vous devez toujours le définir comme contenu du Frame contrôle dans MainWindow.

  5. Ouvrez et définissez MainWindow.xamlNotePage en tant que SourcePageType sur le Frame, comme suit :

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>

    À présent, lorsque vous exécutez l’application, elle Frame charge une instance et NotePage l’affiche à l’utilisateur.

Important

Les mappages d’espace de noms XAML (xmlns) sont l’équivalent XAML de l’instruction C#using. local: est un préfixe mappé pour vous dans les pages XAML de votre projet d’application (xmlns:local="using:WinUINotes"). Il est mappé pour faire référence à l’espace de noms créé pour contenir l’attribut et le x:Class code de tous les fichiers XAML, y compris App.xaml. Tant que vous définissez les classes personnalisées que vous souhaitez utiliser en XAML dans ce même espace de noms, vous pouvez utiliser le local: préfixe pour faire référence à vos types personnalisés en XAML.

Nous allons décomposer les composantes clés des contrôles XAML placés sur la page :

Nouvelle interface utilisateur de la page de notes avec la grille mise en surbrillance par Visual Studio.

  • Grid.RowDefinitions et Grid.ColumnDefinitions définissent une grille avec 2 lignes et 3 colonnes (placées sous la barre de titre).

    • La ligne inférieure est automatiquement (Auto) dimensionnée pour s’adapter à son contenu, les deux boutons. La ligne supérieure utilise l’espace vertical restant (*).
    • La colonne centrale est 400large epx et correspond à l’emplacement où se trouve l’éditeur de notes. Les colonnes de chaque côté sont vides et fractionnées tout l’espace horizontal restant entre eux (*).

    Note

    En raison du fonctionnement du système de mise à l’échelle, lorsque vous concevez votre application XAML, vous concevez en pixels effectifs, et non en pixels physiques réels. Les pixels effectifs (epx) sont une unité virtuelle de mesure et sont utilisés pour exprimer les dimensions de disposition et l’espacement, indépendamment de la densité de l’écran.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox> est un contrôle d’entrée de texte (TextBox) configuré pour l’entrée de texte à plusieurs lignes et est placé dans la cellule centrale supérieure du Grid (Grid.Column="1"). Les index de ligne et de colonne sont basés sur 0 et, par défaut, les contrôles sont placés dans la ligne 0 et la colonne 0 du parent Grid. Il s’agit donc de l’équivalent de la spécification de la ligne 0, colonne 1.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> définit un contrôle de disposition (StackPanel) qui empile ses enfants verticalement (par défaut) ou horizontalement. Elle est placée dans la cellule centrale inférieure du Grid (Grid.Row="1" Grid.Column="1").

    Note

    Grid.Row="1" Grid.Column="1" est un exemple de propriétés jointes XAML. Les propriétés jointes permettent à un objet XAML de définir une propriété qui appartient à un autre objet XAML. Souvent, comme dans ce cas, les éléments enfants peuvent utiliser des propriétés jointes pour informer leur élément parent de la façon dont ils doivent être présentés dans l’interface utilisateur.

  • Deux <Button> contrôles se trouvent à l’intérieur et <StackPanel> disposés horizontalement. Vous allez ajouter le code pour gérer les événements Click des boutons dans la section suivante.

En savoir plus dans la documentation :

Charger et enregistrer une note

Ouvrez le NotePage.xaml.cs fichier code-behind. Quand vous ajoutez un nouveau fichier XAML, le code-behind contient une seule ligne dans le constructeur, un appel à la méthode InitializeComponent :

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

La méthode InitializeComponent lit le balisage XAML et initialise tous les objets définis par le balisage. Les objets sont connectés dans leurs relations parent-enfant et les gestionnaires d’événements définis dans le code sont attachés aux événements définis dans le XAML.

Vous allez maintenant ajouter du code au fichier code-behind pour gérer le NotePage.xaml.cs chargement et l’enregistrement des notes.

  1. Ajoutez les déclarations de variables suivantes à la NotePage classe :

    public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";

    Lorsqu’une note est enregistrée, elle est enregistrée dans le stockage local de l’application en tant que fichier texte.

    Vous utilisez la classe StorageFolder pour accéder au dossier de données locales de l’application. Ce dossier est spécifique à votre application. Les notes enregistrées ici ne sont donc pas accessibles par d’autres applications. Vous utilisez la classe StorageFile pour accéder au fichier texte enregistré dans ce dossier. Le nom du fichier est représenté par la variable fileName. Pour l’instant, définissez fileName sur «note.txt».

  2. Créez un gestionnaire d’événements pour l’événement Loaded de la page de notes.

    public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
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);
    }
}

    Dans cette méthode, vous appelez TryGetItemAsync pour récupérer le fichier texte du dossier. Si le fichier n’existe pas, il retourne null. Si le fichier existe, appelez ReadTextAsync pour lire le texte du fichier dans la NoteEditor propriété Text du contrôle. (N’oubliez pas que NoteEditor le TextBox contrôle que vous avez créé dans le fichier XAML. Vous le référencez ici dans votre fichier code-behind à l’aide de celui-ci x:Name .)

    Important

    Vous devez marquer cette méthode avec le async mot clé, car les appels d’accès aux fichiers sont asynchrones. En bref, si vous appelez une méthode qui se termine ...Async par (comme TryGetItemAsync), vous pouvez ajouter l’opérateur await à l’appel. Cela empêche l’exécution du code suivant jusqu’à ce que l’appel attendu se termine et conserve la réactivité de votre interface utilisateur. Lorsque vous utilisez await, la méthode à partir de laquelle vous appelez doit être marquée avec le mot clé asynchrone . Pour plus d’informations, consultez Appeler des API asynchrones en C#.

En savoir plus dans la documentation :

Ajouter des gestionnaires d’événements

Ensuite, ajoutez les gestionnaires d’événements Click pour les boutons Enregistrer et Supprimer . L’ajout de gestionnaires d’événements est quelque chose que vous effectuerez souvent lors de la création de vos applications. Visual Studio fournit donc plusieurs fonctionnalités pour faciliter la création de vos applications.

  1. Dans le NotePage.xaml fichier, placez votre curseur après l’attribut Content dans le contrôle EnregistrerButton . Tapez Click=. À ce stade, Visual Studio doit afficher une interface utilisateur de saisie semi-automatique qui ressemble à ceci :

    Capture d’écran de l’interface utilisateur complète automatique du nouveau gestionnaire d’événements Visual Studio dans l’éditeur XAML

    • Appuyez sur la flèche vers le bas pour sélectionner <Nouveau gestionnaire> d’événements, puis appuyez sur Tab. Visual Studio termine l’attribut avec Click="Button_Click" et ajoute une méthode de gestionnaire d’événements nommée Button_Click dans le NotePage.xaml.cs fichier code-behind.

    À présent, vous devez renommer la Button_Click méthode en quelque chose de plus significatif. Pour ce faire, procédez comme suit.

  2. Dans NotePage.xaml.cs, recherchez la méthode qui a été ajoutée pour vous :

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Conseil / Astuce

    Pour localiser du code dans votre application, cliquez sur Rechercher dans la barre de titre de Visual Studio et utilisez l’option Recherche de code. Double-cliquez sur le résultat de recherche pour ouvrir le code dans l’éditeur de code.

    Fonctionnalité de recherche dans Visual Studio

  3. Placez votre curseur avant le « B » dans Button et tapez Save. Attendez un instant, et le nom de la méthode sera mis en surbrillance en vert.

  4. Lorsque vous pointez sur le nom de la méthode, Visual Studio affiche une info-bulle avec un tournevis ou une icône d’ampoule. Cliquez sur le bouton flèche vers le bas en regard de l’icône, puis cliquez sur Renommer « Button_Click » en « SaveButton_Click ».

    La méthode Visual Studio renomme l’interface utilisateur contextuelle.

    Visual Studio renomme la méthode partout dans votre application, notamment dans le fichier XAML où vous l’avez ajoutée pour la Buttonpremière fois.

  5. Répétez ces étapes pour le bouton Supprimer et renommez la méthode en DeleteButton_Click.

Maintenant que les gestionnaires d’événements sont branchés, vous pouvez ajouter le code pour enregistrer et supprimer le fichier de notes.

  1. Ajoutez ce code dans la SaveButton_Click méthode pour enregistrer le fichier. Notez que vous devez également mettre à jour la signature de méthode avec le async mot clé.

    private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}

    Dans la SaveButton_Click méthode, vous vérifiez d’abord si noteFile vous avez été créé. Si c’est nullle cas, vous devez créer un fichier dans le dossier de stockage local avec le nom représenté par la fileName variable et affecter le fichier à la noteFile variable. Ensuite, vous écrivez le texte dans le TextBox contrôle dans le fichier représenté par noteFile.

  2. Ajoutez ce code dans la DeleteButton_Click méthode pour supprimer le fichier. Vous devez également mettre à jour la signature de méthode avec le async mot clé ici.

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}

    Dans la méthode, vous vérifiez d’abord DeleteButton_Click s’il noteFile existe. Si c’est le cas, supprimez le fichier représenté par noteFile le dossier de stockage local et définissez sur noteFilenull. Ensuite, réinitialisez le texte dans le TextBox contrôle sur une chaîne vide.

    Important

    Une fois le fichier texte supprimé du système de fichiers, il est important de définir noteFilenullla valeur . N’oubliez pas qu’il noteFile s’agit d’un StorageFile qui fournit l’accès au fichier système dans votre application. Une fois le fichier système supprimé, noteFile pointe toujours vers l’emplacement du fichier système, mais ne sait pas qu’il n’existe plus. Si vous essayez de lire, d’écrire ou de supprimer le fichier système maintenant, vous obtenez une erreur.

  3. Enregistrez le fichier en appuyant sur Ctrl + S, en cliquant sur l’icône Enregistrer dans la barre d’outils ou en sélectionnant le menule >NotePage.xaml.cs .

Le code final du fichier code-behind doit ressembler à ceci :

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            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);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Tester la note

Avec ce code en place, vous pouvez tester l’application pour vous assurer que la note enregistre et se charge correctement.

  1. Générez et exécutezle projet en appuyant sur F5, en cliquant sur le bouton Déboguer « Démarrer » dans la barre d’outils ou en sélectionnant le menu Démarrer >le débogage.
  2. Tapez dans la zone d’entrée de texte et appuyez sur le bouton Enregistrer .
  3. Fermez l’application, puis redémarrez-la. La note que vous avez entrée doit être chargée depuis le stockage de l’appareil.
  4. Appuyez sur le bouton Supprimer .
  5. Fermez l’application, redémarrez-la. Vous devez être présenté avec une nouvelle note vide.

Important

Une fois que vous avez confirmé que l’enregistrement et la suppression d’une note fonctionnent correctement, créez et enregistrez une nouvelle note. Vous souhaiterez avoir une note enregistrée pour tester l’application dans les étapes ultérieures.

Passer à l’étape 3 : ajouter une vue et un modèle pour la note

  • Last updated on