WinUI Notes part 2 - navigation and data binding

This tutorial demonstrates how to use navigation and data binding in a WinUI 3 app using XAML and C#.

In this tutorial, you learn how to:

This tutorial improves on the WinUI Notes sample app from the Create your first WinUI 3 app tutorial. If you've completed that tutorial, you can continue working with the same code. Or, you can download the completed code for that tutorial from the GitHub repo and use it as a starting point for this tutorial.

In either case, you should be familiar with concepts presented and the code created in the Create your first WinUI 3 app tutorial.

Background

In order to keep things simple and introduce some foundational concepts, the Create your first WinUI 3 app tutorial focused on simplicity over efficiency. So while the app works, there are some things that can be improved.

The key issue has to do with navigating between pages in the app. By default, Page instances are not saved when navigating, so each time you navigate to a Page, a new instance is created. In the WinUI Notes app, the notesModel object is created in the AllNotesPage constructor, and is populated by reading all the notes from the file system.

public sealed partial class AllNotesPage : Page
{
    private AllNotes notesModel = new AllNotes();
    ...
}

Each time you navigate from NotePage back to AllNotesPage, the notesModel is recreated and all the notes are re-read from the file system. This inefficiency typically isn't noticeable in a small sample app without much data, but it would be unacceptable in, for example, a photos app that was reading thousands of large images from the file system.

To fix this issue, this tutorial will cover these steps:

• First, ensure that the Page instance is cached so that on navigation it's re-used and not re-created.
• Update the Note class so that bound properties are notified when there are any changes to the note text.
• Ensure that the notesModel is properly updated with saved or deleted notes, since it's not being re-created with each navigation.