Merge pull request #5883 from qiutongMS/fix/tutorial-continuity

Fix: WinUI Notes tutorial continuity and accuracy

Author: jwmsft

hub/apps/tutorials/winui-notes/all-notes.md

@@ -89,6 +89,9 @@ The new data model represents the data required to display multiple notes. Here,
 
 The previous code declares a collection of `Note` items, named `Notes`, and uses the `LoadNotes` method to load notes from the app's local storage.
 
+> [!NOTE]
+> The `LoadNotes` method uses `async void` instead of `async Task` because it's called from the constructor, which cannot be `async`. This fire-and-forget pattern is acceptable here since the method is an event-like initialization routine.
+
 The `Notes` collection uses an [ObservableCollection](/dotnet/api/system.collections.objectmodel.observablecollection-1), which is a specialized collection that works well with data binding. When a control that lists multiple items, such as an [ItemsView](../../design/controls/itemsview.md), is bound to an `ObservableCollection`, the two work together to automatically keep the list of items in sync with the collection. If an item is added to the collection, the control is automatically updated with the new item. If an item is added to the list, the collection is updated.
 
  :::image type="icon" source="media/doc-icon-sm.png" border="false"::: Learn more in the docs:
@@ -101,6 +104,9 @@ Now that the `AllNotes` model is ready to provide data for the view, you need to
 1. In the **Solution Explorer** pane, open the **Views\AllNotesPage.xaml.cs** file.
 1. In the `AllNotesPage` class, add this code to create an `AllNotes` model named _notesModel_:
 
+    > [!NOTE]
+    > You'll need to add `using WinUINotes.Models;` at the top of the file to reference the `AllNotes` class.
+
     ```csharp
     public sealed partial class AllNotesPage : Page
     {
@@ -170,7 +176,7 @@ If you run the app now, you'll see that the note you created previously is loade
 
 ### Add a data template
 
-You need to specify a [DataTemplate](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.datatemplate) to tell the `ItemsView` how your data item should be shown. The `DataTemplate` is assigned to the [ItemsTemplate](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.itemsview.itemtemplate) property of the `ItemsView`. For each item in the collection, the `ItemsView.ItemTemplate` generates the declared XAML.
+You need to specify a [DataTemplate](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.datatemplate) to tell the `ItemsView` how your data item should be shown. The `DataTemplate` is assigned to the [ItemTemplate](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.itemsview.itemtemplate) property of the `ItemsView`. For each item in the collection, the `ItemsView.ItemTemplate` generates the declared XAML.
 
 1. In the **Solution Explorer** pane, double-click on the **AllNotesPage.xaml** entry to open it in the XAML editor.
 1. Add this new namespace mapping on the line below the mapping for `local`:
@@ -219,7 +225,7 @@ You need to specify a [DataTemplate](/windows/windows-app-sdk/api/winrt/microsof
     </Page.Resources>
     ```
 
-1. In the XAML for `ItemsView`, assign the `ItemTemplate` property to the data template you just created:
+1. In the XAML for `ItemsView`, change `Padding="16"` to `Margin="24"` and assign the `ItemTemplate` property to the data template you just created:
 
     ```xaml
     <ItemsView ItemsSource="{x:Bind notesModel.Notes}"

hub/apps/tutorials/winui-notes/navigation.md

@@ -24,7 +24,7 @@ On the note page, you'll add a _back_ button, and there are **Save** and **Delet
 
 ## New note
 
-First, you'll handle navigation for an new note.
+First, you'll handle navigation for a new note.
 
 > [!TIP]
 > You can download or view the code for this tutorial from the [GitHub repo](https://github.com/MicrosoftDocs/windows-topic-specific-samples/tree/winui-3/tutorials/winui-notes). To see the code as it is in this step, see this commit: [navigation - new note](https://github.com/MicrosoftDocs/windows-topic-specific-samples/tree/25c23e5976c6b791355b109c7a7a0430ab16a3f9/WinUINotes).

hub/apps/tutorials/winui-notes/note.md

@@ -287,7 +287,7 @@ namespace WinUINotes
 
 With this code in place, you can test the app to make sure the note saves and loads correctly.
 
-1. Build and run the project by pressing <kbd>F5</kbd>, clicking the Debug "Start" button in the tool bar, or by selecting the menu **Run** > **Start Debugging**.
+1. Build and run the project by pressing <kbd>F5</kbd>, clicking the Debug "Start" button in the tool bar, or by selecting the menu **Debug** > **Start Debugging**.
 1. Type into the text entry box and press the **Save** button.
 1. Close the app, then restart it. The note you entered should be loaded from the device's storage.
 1. Press the **Delete** button.

hub/apps/tutorials/winui-notes/project.md

@@ -153,7 +153,7 @@ You need to write a bit of code to finish replacing the system title bar.
 
     The [ExtendsContentIntoTitleBar](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window.extendscontentintotitlebar) property hides the default system title bar and extends your app XAML into that area. The call to [SetTitleBar](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.window.settitlebar) then tells the system to treat the XAML element you specified (`AppTitleBar`) as the title bar for the app.
 
-1. Build and run the project by pressing <kbd>F5</kbd>, clicking the Debug "Start" button in the tool bar, or by selecting the menu **Run** > **Start Debugging**.
+1. Build and run the project by pressing <kbd>F5</kbd>, clicking the Debug "Start" button in the tool bar, or by selecting the menu **Debug** > **Start Debugging**.
 
 When you run the app now, you'll see an empty window with a mica background and the XAML title bar that's replaced the system title bar.