Effectuer la navigation dans une Xamarin.Forms application

Article
07/13/2023

Dans ce guide de démarrage rapide, vous allez apprendre à :

Ajoutez des pages supplémentaires à une Xamarin.Forms application Shell.
Naviguer entre des pages
Utiliser la liaison de données pour synchroniser les données entre les éléments d’interface utilisateur et leur source de données

Ce guide de démarrage rapide explique comment transformer une application Shell multiplateforme Xamarin.Forms , capable de stocker une seule note, en une application capable de stocker plusieurs notes. L’application finale est indiquée ci-dessous :

Prérequis

Vous devez suivre correctement le précédent guide de démarrage rapide avant de tenter de suivre ce guide de démarrage rapide. Vous pouvez également télécharger l’exemple du précédent guide de démarrage rapide, et l’utiliser comme point de départ pour ce guide de démarrage rapide.

Mettre à jour l’application avec Visual Studio

Lancez Visual Studio. Dans la fenêtre de démarrage, cliquez dans la liste des derniers projets/solutions sur la solution Notes, ou cliquez sur Ouvrir un projet ou une solution, puis dans la boîte de dialogue Ouvrir une solution/un projet, sélectionnez le fichier solution du projet Notes :
Dans Explorateur de solutions, cliquez avec le bouton droit sur le projet Notes, puis sélectionnez Ajouter un > nouveau dossier :
Dans l’Explorateur de solutions, nommez le nouveau dossier Modèles :
Dans Explorateur de solutions, sélectionnez le dossier Models, cliquez avec le bouton droit, puis sélectionnez Ajouter une > classe... :
Dans la boîte de dialogue Ajouter un nouvel élément , sélectionnez Classe d’éléments > Visual C#, nommez le nouveau fichier Remarque, puis cliquez sur le bouton Ajouter :

Cela permet d’ajouter une classe nommée Note au dossier Modèles du projet Notes.
Dans Note.cs, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :
```
using System;

namespace Notes.Models
{
    public class Note
    {
        public string Filename { get; set; }
        public string Text { get; set; }
        public DateTime Date { get; set; }
    }
}
```
Cette classe définit un modèle Note, qui stocke les données relatives à chaque note de l’application.

Enregistrez les modifications apportées à Note.cs en appuyant sur Ctrl+S.
Dans Explorateur de solutions, dans le projet Notes, sélectionnez le dossier Vues, cliquez avec le bouton droit, puis sélectionnez Ajouter un > nouvel élément.... Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Visual C# Items >Xamarin.Forms> Content Page, nommez le nouveau fichier NoteEntryPage, puis cliquez sur le bouton Ajouter :

Cette opération ajoute une nouvelle page nommée NoteEntryPage au dossier Views du projet. Cette page sera utilisée pour la saisie de note.
Dans NoteEntryPage.xaml, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :
```
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NoteEntryPage"
             Title="Note Entry">
    
    <StackLayout Margin="20">
        <Editor Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />
        
        <Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui se compose d’un Editor pour l’entrée de texte et de deux Button objets qui indiquent à l’application d’enregistrer ou de supprimer un fichier. Les deux instances de Button sont disposées horizontalement dans Grid, alors que Editor et Grid sont disposés verticalement dans StackLayout. De plus, Editor utilise la liaison de données pour établir une liaison à la propriété Text du modèle Note. Pour plus d’informations sur la liaison de données, consultez Liaison de données dans le Xamarin.Forms guide de démarrage rapide Approfondi.

Enregistrez les modifications apportées à NoteEntryPage.xaml en appuyant sur Ctrl+S.

Dans NoteEntryPage.xaml.cs, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :

using System;
using System.IO;
using Notes.Models;
using Xamarin.Forms;

namespace Notes.Views
{
    [QueryProperty(nameof(ItemId), nameof(ItemId))]
    public partial class NoteEntryPage : ContentPage
    {
        public string ItemId
        {
            set
            {
                LoadNote(value);
            }
        }

        public NoteEntryPage()
        {
            InitializeComponent();

            // Set the BindingContext of the page to a new Note.
            BindingContext = new Note();
        }

        void LoadNote(string filename)
        {
            try
            {
                // Retrieve the note and set it as the BindingContext of the page.
                Note note = new Note
                {
                    Filename = filename,
                    Text = File.ReadAllText(filename),
                    Date = File.GetCreationTime(filename)
                };
                BindingContext = note;
            }
            catch (Exception)
            {
                Console.WriteLine("Failed to load note.");
            }
        }

        async void OnSaveButtonClicked(object sender, EventArgs e)
        {
            var note = (Note)BindingContext;

            if (string.IsNullOrWhiteSpace(note.Filename))
            {
                // Save the file.
                var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                File.WriteAllText(filename, note.Text);
            }
            else
            {
                // Update the file.
                File.WriteAllText(note.Filename, note.Text);
            }

            // Navigate backwards
            await Shell.Current.GoToAsync("..");
        }

        async void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            var note = (Note)BindingContext;

            // Delete the file.
            if (File.Exists(note.Filename))
            {
                File.Delete(note.Filename);
            }

            // Navigate backwards
            await Shell.Current.GoToAsync("..");
        }
    }
}

Ce code stocke une instance de Note, qui représente une seule note dans le BindingContext de la page. La classe est décorée d’un QueryPropertyAttribute qui permet de transmettre des données à la page, pendant la navigation, via des paramètres de requête. Le premier argument de spécifie QueryPropertyAttribute le nom de la propriété qui recevra les données, le deuxième argument spécifiant l’ID du paramètre de requête. Par conséquent, le QueryParameterAttribute dans le code ci-dessus spécifie que la ItemId propriété recevra les données passées dans le ItemId paramètre de requête à partir de l’URI spécifié dans un GoToAsync appel de méthode. La ItemId propriété appelle ensuite la LoadNote méthode pour créer un Note objet à partir du fichier sur l’appareil et définit le BindingContext de la page sur l’objet Note .

Lorsque l’utilisateur appuie sur EnregistrerButton , le OnSaveButtonClicked gestionnaire d’événements est exécuté, ce qui enregistre le contenu du Editor dans un nouveau fichier avec un nom de fichier généré de manière aléatoire, ou dans un fichier existant si une note est mise à jour. Dans les deux cas, le fichier est stocké dans le dossier de données d’application local de l’application. La méthode revient ensuite à la page précédente. Lorsque vous appuyez sur SupprimerButton , le OnDeleteButtonClicked gestionnaire d’événements est exécuté, ce qui supprime le fichier, à condition qu’il existe, et revient à la page précédente. Pour plus d’informations sur la navigation, consultez Navigation dans le Xamarin.Forms guide de démarrage rapide de l’interpréteur de commandes Deep Dive.

Enregistrez les modifications apportées à NoteEntryPage.xaml.cs en appuyant sur Ctrl+S.

Avertissement

L’application ne sera pas actuellement généré en raison d’erreurs qui seront corrigées dans les étapes suivantes.

Dans Explorateur de solutions, dans le projet Notes, ouvrez NotesPage.xaml dans le dossier Views.

Dans NotesPage.xaml, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NotesPage"
             Title="Notes">
    <!-- Add an item to the toolbar -->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add"
                     Clicked="OnAddClicked" />
    </ContentPage.ToolbarItems>

    <!-- Display notes in a list -->
    <CollectionView x:Name="collectionView"
                    Margin="20"
                    SelectionMode="Single"
                    SelectionChanged="OnSelectionChanged">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical"
                               ItemSpacing="10" />
        </CollectionView.ItemsLayout>
        <!-- Define the appearance of each item in the list -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Text}"
                           FontSize="Medium"/>
                    <Label Text="{Binding Date}"
                           TextColor="Silver"
                           FontSize="Small" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

Ce code définit de manière déclarative l’interface utilisateur de la page, qui comprend CollectionView et ToolbarItem. utilise la CollectionView liaison de données pour afficher toutes les notes récupérées par l’application. La sélection d’une note permet d’accéder à l’emplacement NoteEntryPage où la note peut être modifiée. Vous pouvez également créer une note en appuyant sur ToolbarItem. Pour plus d’informations sur la liaison de données, consultez Liaison de données dans le Xamarin.Forms guide de démarrage rapide Approfondi.

Enregistrez les modifications apportées à NotesPage.xaml en appuyant sur Ctrl+S.

Dans Explorateur de solutions, dans le projet Notes, développez NotesPage.xaml dans le dossier Views et ouvrez NotesPage.xaml.cs.

Dans NotesPage.xaml.cs, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Notes.Models;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class NotesPage : ContentPage
    {
        public NotesPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            var notes = new List<Note>();

            // Create a Note object from each file.
            var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
            foreach (var filename in files)
            {
                notes.Add(new Note
                {
                    Filename = filename,
                    Text = File.ReadAllText(filename),
                    Date = File.GetCreationTime(filename)
                });
            }

            // Set the data source for the CollectionView to a
            // sorted collection of notes.
            collectionView.ItemsSource = notes
                .OrderBy(d => d.Date)
                .ToList();
        }

        async void OnAddClicked(object sender, EventArgs e)
        {
            // Navigate to the NoteEntryPage, without passing any data.
            await Shell.Current.GoToAsync(nameof(NoteEntryPage));
        }

        async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.CurrentSelection != null)
            {
                // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                Note note = (Note)e.CurrentSelection.FirstOrDefault();
                await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
            }
        }
    }
}

Ce code définit les fonctionnalités de NotesPage. Quand la page s’affiche, la méthode OnAppearing s’exécute, ce qui permet de remplir CollectionView avec les notes récupérées à partir du dossier de données d’application local. Quand vous appuyez sur ToolbarItem, le gestionnaire d’événements OnAddClicked s’exécute. Cette méthode accède à .NoteEntryPage Quand un élément de CollectionView est sélectionné, le gestionnaire d’événements OnSelectionChanged s’exécute. Cette méthode accède à , NoteEntryPageà condition qu’un élément dans le CollectionView soit sélectionné, en passant la Filename propriété du sélectionné Note en tant que paramètre de requête à la page. Pour plus d’informations sur la navigation, consultez Navigation dans le Xamarin.Forms guide de démarrage rapide Deep Dive.

Enregistrez les modifications apportées à NotesPage.xaml.cs en appuyant sur Ctrl+S.

Avertissement

L’application ne sera pas actuellement généré en raison d’erreurs qui seront corrigées dans les étapes suivantes.

Dans Explorateur de solutions, dans le projet Notes, développez AppShell.xaml et ouvrez AppShell.xaml.cs. Remplacez ensuite le code existant par le code suivant :
```
using Notes.Views;
using Xamarin.Forms;

namespace Notes
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
        }
    }
}
```
Ce code inscrit un itinéraire pour le NoteEntryPage, qui n’est pas représenté dans la hiérarchie visuelle Shell (AppShell.xaml). Vous pouvez ensuite accéder à cette page à l’aide de la navigation basée sur l’URI, avec la GoToAsync méthode .

Enregistrez les modifications apportées à AppShell.xaml.cs en appuyant sur Ctrl+S.
Dans Explorateur de solutions, dans le projet Notes, développez App.xaml et ouvrez App.xaml.cs. Remplacez ensuite le code existant par le code suivant :
```
using System;
using System.IO;
using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {
        public static string FolderPath { get; private set; }

        public App()
        {
            InitializeComponent();
            FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
            MainPage = new AppShell();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}
```
Ce code ajoute une déclaration d’espace de noms pour l’espace de noms System.IO ainsi qu’une déclaration pour une propriété FolderPath statique de type string. La propriété FolderPath permet de stocker le chemin sur l’appareil où les données de notes doivent être stockées. En outre, le code initialise la FolderPath propriété dans le App constructeur et initialise la MainPage propriété dans l’objet sous-classé Shell .

Enregistrez les modifications apportées à App.xaml.cs en appuyant sur Ctrl+S.
Générez et exécutez le projet sur chaque plateforme. Pour plus d’informations, consultez Génération du guide de démarrage rapide.

Dans la page Notes, appuyez sur le bouton Ajouter pour accéder à NoteEntryPage et entrer une note. Une fois que vous avez enregistré la note, l’application revient à NotesPage.

Entrez plusieurs notes, de longueur variable, pour observer le comportement de l’application. Fermez l’application et relancez-la pour vous assurer que les notes que vous avez entrées ont été enregistrées sur l’appareil.

Mettre à jour l’application avec Visual Studio pour Mac

Lancez Visual Studio pour Mac. Dans la fenêtre de démarrage, cliquez sur Ouvrir, puis dans la boîte de dialogue, sélectionnez le fichier solution du projet Notes :
Dans le panneau Solutions, cliquez avec le bouton droit sur le projet Notes , puis sélectionnez Ajouter un > nouveau dossier :
Dans la boîte de dialogue Nouveau dossier , nommez le nouveau dossier Modèles :
Dans le panneau Solutions, sélectionnez le dossier Modèles , cliquez avec le bouton droit, puis sélectionnez Ajouter une > nouvelle classe... :
Dans la boîte de dialogue Nouveau fichier, sélectionnez Classe vide générale>, nommez le nouveau fichier Remarque, puis cliquez sur le bouton Nouveau :

Cela permet d’ajouter une classe nommée Note au dossier Modèles du projet Notes.
Dans Note.cs, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :
```
using System;

namespace Notes.Models
{
    public class Note
    {
        public string Filename { get; set; }
        public string Text { get; set; }
        public DateTime Date { get; set; }
    }
}
```
Cette classe définit un modèle Note, qui stocke les données relatives à chaque note de l’application.

Enregistrez les modifications apportées à Note.cs en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).
Dans le panneau Solutions, sélectionnez le projet Notes , cliquez avec le bouton droit, puis sélectionnez Ajouter un > nouveau fichier.... Dans la boîte de dialogue Nouveau fichier , sélectionnez Forms > Forms ContentPage XAML, nommez le nouveau fichier NoteEntryPage, puis cliquez sur le bouton Nouveau :

Cette opération ajoute une nouvelle page nommée NoteEntryPage au dossier Views du projet. Cette page sera utilisée pour la saisie de note.
Dans NoteEntryPage.xaml, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :
```
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NoteEntryPage"
             Title="Note Entry">
    
    <StackLayout Margin="20">
        <Editor Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />
        
        <Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>
```
Ce code définit de manière déclarative l’interface utilisateur de la page, qui se compose d’un Editor pour l’entrée de texte et de deux Button objets qui indiquent à l’application d’enregistrer ou de supprimer un fichier. Les deux instances de Button sont disposées horizontalement dans Grid, alors que Editor et Grid sont disposés verticalement dans StackLayout. De plus, Editor utilise la liaison de données pour établir une liaison à la propriété Text du modèle Note. Pour plus d’informations sur la liaison de données, consultez Liaison de données dans le Xamarin.Forms guide de démarrage rapide Approfondi.

Enregistrez les modifications apportées à NoteEntryPage.xaml en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).

Dans NoteEntryPage.xaml.cs, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :

using System;
using System.IO;
using Notes.Models;
using Xamarin.Forms;

namespace Notes.Views
{
    [QueryProperty(nameof(ItemId), nameof(ItemId))]
    public partial class NoteEntryPage : ContentPage
    {
        public string ItemId
        {
            set
            {
                LoadNote(value);
            }
        }

        public NoteEntryPage()
        {
            InitializeComponent();

            // Set the BindingContext of the page to a new Note.
            BindingContext = new Note();
        }

        void LoadNote(string filename)
        {
            try
            {
                // Retrieve the note and set it as the BindingContext of the page.
                Note note = new Note
                {
                    Filename = filename,
                    Text = File.ReadAllText(filename),
                    Date = File.GetCreationTime(filename)
                };
                BindingContext = note;
            }
            catch (Exception)
            {
                Console.WriteLine("Failed to load note.");
            }
        }

        async void OnSaveButtonClicked(object sender, EventArgs e)
        {
            var note = (Note)BindingContext;

            if (string.IsNullOrWhiteSpace(note.Filename))
            {
                // Save the file.
                var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                File.WriteAllText(filename, note.Text);
            }
            else
            {
                // Update the file.
                File.WriteAllText(note.Filename, note.Text);
            }

            // Navigate backwards
            await Shell.Current.GoToAsync("..");
        }

        async void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            var note = (Note)BindingContext;

            // Delete the file.
            if (File.Exists(note.Filename))
            {
                File.Delete(note.Filename);
            }

            // Navigate backwards
            await Shell.Current.GoToAsync("..");
        }
    }
}

Enregistrez les modifications apportées à NoteEntryPage.xaml.cs en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).

Avertissement

L’application ne sera pas actuellement généré en raison d’erreurs qui seront corrigées dans les étapes suivantes.

Dans le panneau Solutions, dans le projet Notes , ouvrez NotesPage.xaml dans le dossier Vues .

Dans NotesPage.xaml, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NotesPage"
             Title="Notes">
    <!-- Add an item to the toolbar -->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add"
                     Clicked="OnAddClicked" />
    </ContentPage.ToolbarItems>

    <!-- Display notes in a list -->
    <CollectionView x:Name="collectionView"
                    Margin="20"
                    SelectionMode="Single"
                    SelectionChanged="OnSelectionChanged">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical"
                               ItemSpacing="10" />
        </CollectionView.ItemsLayout>
        <!-- Define the appearance of each item in the list -->
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Label Text="{Binding Text}"
                           FontSize="Medium"/>
                    <Label Text="{Binding Date}"
                           TextColor="Silver"
                           FontSize="Small" />
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

Enregistrez les modifications apportées à NotesPage.xaml en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).

Dans le panneau Solutions, dans le projet Notes , développez NotesPage.xaml dans le dossier Views et ouvrez NotesPage.xaml.cs.

Dans NotesPage.xaml.cs, supprimez l’ensemble du code du modèle, puis remplacez-le par le code suivant :

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Notes.Models;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class NotesPage : ContentPage
    {
        public NotesPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();

            var notes = new List<Note>();

            // Create a Note object from each file.
            var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
            foreach (var filename in files)
            {
                notes.Add(new Note
                {
                    Filename = filename,
                    Text = File.ReadAllText(filename),
                    Date = File.GetCreationTime(filename)
                });
            }

            // Set the data source for the CollectionView to a
            // sorted collection of notes.
            collectionView.ItemsSource = notes
                .OrderBy(d => d.Date)
                .ToList();
        }

        async void OnAddClicked(object sender, EventArgs e)
        {
            // Navigate to the NoteEntryPage, without passing any data.
            await Shell.Current.GoToAsync(nameof(NoteEntryPage));
        }

        async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.CurrentSelection != null)
            {
                // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                Note note = (Note)e.CurrentSelection.FirstOrDefault();
                await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
            }
        }
    }
}

Enregistrez les modifications apportées à NotesPage.xaml.cs en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).

Avertissement

L’application ne sera pas actuellement généré en raison d’erreurs qui seront corrigées dans les étapes suivantes.

Dans le panneau Solutions, dans le projet Notes , développez AppShell.xaml et ouvrez AppShell.xaml.cs. Remplacez ensuite le code existant par le code suivant :
```
using Notes.Views;
using Xamarin.Forms;

namespace Notes
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
        }
    }
}
```
Ce code inscrit un itinéraire pour le NoteEntryPage, qui n’est pas représenté dans la hiérarchie visuelle shell. Vous pouvez ensuite accéder à cette page à l’aide de la navigation basée sur l’URI, avec la GoToAsync méthode .

Enregistrez les modifications apportées à AppShell.xaml.cs en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).
Dans le panneau Solutions, dans le projet Notes , développez App.xaml et ouvrez App.xaml.cs. Remplacez ensuite le code existant par le code suivant :
```
using System;
using System.IO;
using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {
        public static string FolderPath { get; private set; }

        public App()
        {
            InitializeComponent();
            FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
            MainPage = new AppShell();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}
```
Ce code ajoute une déclaration d’espace de noms pour l’espace de noms System.IO ainsi qu’une déclaration pour une propriété FolderPath statique de type string. La propriété FolderPath permet de stocker le chemin sur l’appareil où les données de notes doivent être stockées. En outre, le code initialise la FolderPath propriété dans le App constructeur et initialise la MainPage propriété dans l’objet sous-classé Shell .

Enregistrez les modifications apportées à App.xaml.cs en choisissant Fichier > Enregistrer (ou en appuyant sur ⌘ + S).
Générez et exécutez le projet sur chaque plateforme. Pour plus d’informations, consultez Génération du guide de démarrage rapide.

Dans la page Notes, appuyez sur le bouton Ajouter pour accéder à NoteEntryPage et entrer une note. Une fois que vous avez enregistré la note, l’application revient à NotesPage.

Entrez plusieurs notes, de longueur variable, pour observer le comportement de l’application. Fermez l’application et relancez-la pour vous assurer que les notes que vous avez entrées ont été enregistrées sur l’appareil.

Étapes suivantes

Dans ce démarrage rapide, vous avez appris comment :

Ajoutez des pages supplémentaires à une Xamarin.Forms application Shell.
Naviguer entre des pages
Utiliser la liaison de données pour synchroniser les données entre les éléments d’interface utilisateur et leur source de données

Passez au guide de démarrage rapide suivant pour modifier l’application afin qu’elle stocke ses données dans une base de données SQLite.NET locale.

Prérequis

Mettre à jour l’application avec Visual Studio

Mettre à jour l’application avec Visual Studio pour Mac

Étapes suivantes

Liens connexes

Ressources supplémentaires