Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions hub/apps/tutorials/winui-notes/all-notes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
{
Expand Down Expand Up @@ -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`:
Expand Down Expand Up @@ -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}"
Expand Down
2 changes: 1 addition & 1 deletion hub/apps/tutorials/winui-notes/navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down
2 changes: 1 addition & 1 deletion hub/apps/tutorials/winui-notes/note.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion hub/apps/tutorials/winui-notes/project.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down