diff --git a/hub/apps/tutorials/winui-notes/all-notes.md b/hub/apps/tutorials/winui-notes/all-notes.md index 243bb7826b..02afc70b3a 100644 --- a/hub/apps/tutorials/winui-notes/all-notes.md +++ b/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 ``` -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 [!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). diff --git a/hub/apps/tutorials/winui-notes/note.md b/hub/apps/tutorials/winui-notes/note.md index baf5c9a3d8..7a712c64ce 100644 --- a/hub/apps/tutorials/winui-notes/note.md +++ b/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 F5, 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 F5, 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. diff --git a/hub/apps/tutorials/winui-notes/project.md b/hub/apps/tutorials/winui-notes/project.md index 797f8b72db..e4a6eda032 100644 --- a/hub/apps/tutorials/winui-notes/project.md +++ b/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 F5, 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 F5, 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.