Partager via

Naviguer entre les pages

Cette partie du didacticiel ajoute le dernier élément à l’application, la navigation entre la page de notes et la page de notes individuelle.

Avant d’écrire du code pour gérer la navigation dans l’application, décrivons le comportement de navigation attendu.

Dans AllNotesPage, il existe la collection de notes existantes et un bouton Nouvelle note .

  • Cliquer sur une note existante doit accéder à la page de notes et charger la note qui a été cliquée.
  • Si vous cliquez sur le bouton Nouvelle note , accédez à la page de notes et chargez une note vide et non enregistrée.

Dans la page de note, vous allez ajouter un bouton Précédent , et il existe des boutons Enregistrer et Supprimer .

  • Cliquez sur le bouton Précédent pour revenir à la page toutes les notes, en ignorant les modifications apportées à la note.
  • Cliquer sur le bouton Supprimer doit supprimer la note, puis revenir en arrière.

Nouvelle note

Tout d’abord, vous allez gérer la navigation pour une nouvelle 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 validation : navigation - nouvelle note.

  1. Dans AllNotesPage.xaml, recherchez la AppBarButton nouvelle note.

  2. Ajoutez un gestionnaire d’événements Click et renommez-le .NewNoteButton_Click (Consultez Ajouter des gestionnaires d’événements à l’étape de la page de note si vous avez besoin d’un rappel pour ce faire.)

    <AppBarButton Icon="Add" Label="New note"
              Click="NewNoteButton_Click"/>

  3. Dans la NewNoteButton_Click méthode (dans AllNotesPage.xaml.cs), ajoutez ce code :

    private void NewNoteButton_Click(object sender, RoutedEventArgs e)
{
    // ↓ Add this. ↓
    Frame.Navigate(typeof(NotePage));
}

Chaque page a une propriété Frame qui fournit une référence à l’instance Frame à laquelle appartient Page (le cas échéant). C’est là Frame que vous appelez la méthode Navigate. La Navigate méthode prend le type de la page vers laquelle vous souhaitez accéder. Vous obtenez cela Type en C# à l’aide de l’opérateur typeof .

Si vous exécutez l’application maintenant, vous pouvez cliquer sur le bouton Nouvelle note pour accéder à la page de notes et taper dans l’éditeur de notes. Toutefois, si vous essayez d’enregistrer la note, rien ne se produira. Cela est dû au fait qu’une instance du Note modèle n’a pas encore été créée dans la page de note. Tu vas le faire maintenant.

  1. Ouvrez NotePage.xaml.cs.

  2. Ajoutez du code pour remplacer la méthode OnNavigatedTo de la page.

    public NotePage()
{
    this.InitializeComponent();
}
//  ↓ Add this. ↓
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    noteModel = new Note();
}

À présent, lorsque vous accédez à NotePage, une nouvelle instance du Note modèle est créée.

Notes existantes

Vous allez maintenant ajouter la navigation pour les notes existantes. Actuellement, lorsque vous cliquez sur la note dans le ItemsView, la note est sélectionnée, mais rien ne se produit. Le comportement par défaut de la plupart des contrôles de collection est une sélection unique, ce qui signifie qu’un élément est sélectionné à la fois. Vous allez mettre à jour afin ItemsView que, au lieu de le sélectionner, vous pouvez cliquer sur un élément comme un bouton.

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 validation : navigation - application finale.

  1. Ouvrez AllNotesPage.xaml.

  2. Mettez à jour le code XAML pour l’option ItemsViewSelectionMode = None et IsItemInvokedEnabled = True.

  3. Ajoutez un gestionnaire pour l’événement ItemInvoked .

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

  4. Dans AllNotesPage.xaml.cs, recherchez la ItemsView_ItemInvoked méthode. (Si Visual Studio ne l’a pas créé pour vous, ce qui peut se produire si vous copiez et collez le code, ajoutez-le à l’étape suivante.)

  5. Dans la méthode, ajoutez du ItemsView_ItemInvoked code pour accéder à NotePage. Cette fois, vous allez utiliser une surcharge de la méthode Navigate qui vous permet de passer un objet à l’autre page. Passez l’appel Note en tant que deuxième paramètre de navigation.

    private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
{
    Frame.Navigate(typeof(NotePage), args.InvokedItem);
}

  6. Ouvrez NotePage.xaml.cs.

  7. Mettez à jour le remplacement de la OnNavigatedTo méthode pour gérer celui Note qui est passé par l’appel à Navigate.

    protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    //  ↓ Update this. ↓
    if (e.Parameter is Note note)
    {
        noteModel = note;
    }
    else
    {
        noteModel = new Note();
    }
   // ↑ Update this. ↑
}

    Dans ce code, vous vérifiez d’abord si le paramètre passé est un Note objet. Si c’est le cas, vous l’affectez en tant que Note modèle pour la page. S’il s’agit null ou non d’un Note, créez-en un Note comme avant.

Navigation arrière

Enfin, vous devez mettre à jour l’application afin de pouvoir revenir d’une note individuelle à la page de toutes les notes.

Le contrôle TitleBar WinUI inclut un bouton Précédent qui répond à toutes les instructions Fluent Design pour le placement et l’apparence. Vous utiliserez ce bouton intégré pour la navigation arrière.

  1. Ouvrez MainWindow.xaml.

  2. Mettez à jour le code XAML pour l’élément TitleBarIsBackButtonVisible = True et IsBackButtonEnabled lié à la propriété Frame.CanGoBack .

  3. Ajoutez un gestionnaire pour l’événement BackRequested . Votre code XAML doit ressembler à ceci :

    <TitleBar x:Name="AppTitleBar"
          Title="WinUI Notes"
          IsBackButtonVisible="True"
          IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
          BackRequested="AppTitleBar_BackRequested">

    Ici, la propriété IsBackButtonVisible est définie sur true. Le bouton Précédent s’affiche dans le coin supérieur gauche de la fenêtre de l’application.

    Ensuite, la propriété IsBackButtonEnabled est liée à la propriété Frame.CanGoBack . Par conséquent, le bouton Précédent est activé uniquement si le cadre peut revenir en arrière.

    Enfin, le gestionnaire d’événements BackRequested est ajouté. C’est là que vous placez le code pour revenir en arrière.

  4. Dans MainWindow.xaml.cs, ajoutez ce code à la AppTitleBar_BackRequested méthode :

    private void AppTitleBar_BackRequested(TitleBar sender, object args)
{
    // ↓ Add this. ↓
    if (rootFrame.CanGoBack == true)
    {
        rootFrame.GoBack();
    }
    // ↑ Add this. ↑
}

    La Frame classe effectue le suivi de la navigation dans son BackStack. Vous pouvez donc revenir aux pages précédentes simplement en appelant la méthode GoBack . Il est recommandé de toujours vérifier la propriété CanGoBack avant d’appeler GoBack.

Ensuite, vous devez mettre à jour le code pour NotePage revenir en arrière une fois la note supprimée.

  1. Ouvrez NotePage.xaml.cs.

  2. Mettez à jour la méthode du DeleteButton_Click gestionnaire d’événements avec un appel à la Frame.CanGoBack méthode après la suppression de la note :

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteModel is not null)
    {
        await noteModel.DeleteAsync();
    }
    // ↓ Add this. ↓
    if (Frame.CanGoBack == true)
    {
        Frame.GoBack();
    }
    // ↑ Add this. ↑
}

Conseil / Astuce

Vous avez peut-être remarqué que dans NotePage, vous appelez Frame.GoBack, pendant que vous MainWindow avez appelé rootFrame.GoBack. Cela est dû au fait que la classe Page a une propriété Frame qui obtient celle Frame qui héberge le Page, le cas échéant. Dans ce cas, il obtient une référence à rootFrame.

Vous pouvez maintenant exécuter votre application. Essayez d’ajouter de nouvelles notes, de naviguer d’une note à l’autre et de supprimer des notes.

En savoir plus dans la documentation :

Étapes suivantes

Félicitations! Vous avez terminé le didacticiel Créer une application WinUI !

Les liens suivants fournissent plus d’informations sur la création d’applications avec WinUI et le Kit de développement logiciel (SDK) d’application Windows :

  • Last updated on