Skip to content

Commit b248b4d

Browse files
Qiutong ShenCopilot
andcommitted
Fix: Tutorial continuity and accuracy improvements
- Fix 'ItemsTemplate' -> 'ItemTemplate' property name (all-notes.md) - Fix 'Run > Start Debugging' -> 'Debug > Start Debugging' menu path (note.md, project.md) - Fix 'an new' -> 'a new' grammar (navigation.md) - Add missing 'using WinUINotes.Models;' instruction (all-notes.md) - Add note explaining async void pattern in LoadNotes (all-notes.md) - Make Padding to Margin change explicit in tutorial step (all-notes.md) Co-authored-by: Copilot <[email protected]>
1 parent 429d5e7 commit b248b4d

4 files changed

Lines changed: 11 additions & 5 deletions

File tree

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ The new data model represents the data required to display multiple notes. Here,
8989

9090
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.
9191

92+
> [!NOTE]
93+
> 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.
94+
9295
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.
9396

9497
:::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
101104
1. In the **Solution Explorer** pane, open the **Views\AllNotesPage.xaml.cs** file.
102105
1. In the `AllNotesPage` class, add this code to create an `AllNotes` model named _notesModel_:
103106

107+
> [!NOTE]
108+
> You'll need to add `using WinUINotes.Models;` at the top of the file to reference the `AllNotes` class.
109+
104110
```csharp
105111
public sealed partial class AllNotesPage : Page
106112
{
@@ -170,7 +176,7 @@ If you run the app now, you'll see that the note you created previously is loade
170176

171177
### Add a data template
172178

173-
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.
179+
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.
174180

175181
1. In the **Solution Explorer** pane, double-click on the **AllNotesPage.xaml** entry to open it in the XAML editor.
176182
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
219225
</Page.Resources>
220226
```
221227

222-
1. In the XAML for `ItemsView`, assign the `ItemTemplate` property to the data template you just created:
228+
1. In the XAML for `ItemsView`, change `Padding="16"` to `Margin="24"` and assign the `ItemTemplate` property to the data template you just created:
223229

224230
```xaml
225231
<ItemsView ItemsSource="{x:Bind notesModel.Notes}"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ On the note page, you'll add a _back_ button, and there are **Save** and **Delet
2424

2525
## New note
2626

27-
First, you'll handle navigation for an new note.
27+
First, you'll handle navigation for a new note.
2828

2929
> [!TIP]
3030
> 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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ namespace WinUINotes
287287

288288
With this code in place, you can test the app to make sure the note saves and loads correctly.
289289

290-
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**.
290+
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**.
291291
1. Type into the text entry box and press the **Save** button.
292292
1. Close the app, then restart it. The note you entered should be loaded from the device's storage.
293293
1. Press the **Delete** button.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ You need to write a bit of code to finish replacing the system title bar.
153153

154154
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.
155155

156-
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**.
156+
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**.
157157

158158
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.
159159

0 commit comments

Comments
 (0)