Minor design tweaks WinUINotes tutorial (#5307)

* Updating images and XAML

* Update intro.md

* Update intro.md

Author: niels9001

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

@@ -129,17 +129,17 @@ Next, you need to design the view to support the `AllNotes` model.
         <CommandBar DefaultLabelPosition="Right">
             <AppBarButton Icon="Add" Label="New note"/>
             <CommandBar.Content>
-                <TextBlock Text="Quick notes" Margin="12,8" 
+                <TextBlock Text="Quick notes" Margin="16,8" 
                        Style="{ThemeResource SubtitleTextBlockStyle}"/>
             </CommandBar.Content>
         </CommandBar>
 
         <ItemsView ItemsSource="{x:Bind notesModel.Notes}" 
-               Grid.Row="1" Margin="24" >
+               Grid.Row="1" Padding="16" >
             <ItemsView.Layout>
                 <UniformGridLayout MinItemWidth="200"
-                               MinColumnSpacing="20"
-                               MinRowSpacing="20"
+                               MinColumnSpacing="12"
+                               MinRowSpacing="12"
                                ItemsJustification="Start"/>
             </ItemsView.Layout>
         </ItemsView>
@@ -201,10 +201,10 @@ You need to specify a [DataTemplate](/windows/windows-app-sdk/api/winrt/microsof
                         <RowDefinition Height="120"/>
                         <RowDefinition Height="Auto"/>
                     </Grid.RowDefinitions>
-                    <TextBlock Text="{x:Bind Text}" Margin="4"
+                    <TextBlock Text="{x:Bind Text}" Margin="12,8"
                                TextWrapping="Wrap"
                                TextTrimming="WordEllipsis"/>
-                    <Border Grid.Row="1" Padding="4,6,0,6"
+                    <Border Grid.Row="1" Padding="8,6,0,6"
                             Background="Gray">
                         <TextBlock Text="{x:Bind Date}"
                                    Foreground="White"/>
@@ -264,13 +264,13 @@ WinUI includes a variety of built-in resources that you can use to make your app
                     <RowDefinition Height="120"/>
                     <RowDefinition Height="Auto"/>
                 </Grid.RowDefinitions>
-                <TextBlock Text="{x:Bind Text}" Margin="4"
+                <TextBlock Text="{x:Bind Text}" Margin="12,8"
                            TextWrapping="Wrap"
                            TextTrimming="WordEllipsis"/>
 
     <!-- ↓ Update this. ↓ -->
-                <Border Grid.Row="1" Padding="4,6,0,6"
-                        Background="{ThemeResource ControlAltFillColorSecondaryBrush}">
+                <Border Grid.Row="1" Padding="8,6,0,6"
+                        Background="{ThemeResource SubtleFillColorSecondaryBrush}">
                     <TextBlock Text="{x:Bind Date}"
                         Style="{StaticResource CaptionTextBlockStyle}"
                         Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>

hub/apps/tutorials/winui-notes/includes/intro.md

@@ -5,7 +5,7 @@ ms.date: 03/26/2025
 ms.topic: include
 ---
 
-This tutorial series demonstrates how to create a WinUI 3 app using XAML and C#. The app you'll create is a note app, where the user can create, save, and load multiple notes.
+This tutorial series demonstrates how to create a WinUI 3 app using XAML and C#. The app you'll create is a note app, where the user can create, save, and load multiple notes. 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).
 
 In this tutorial, you learn how to:
 
@@ -18,7 +18,7 @@ In this tutorial, you learn how to:
 > - Use navigation to move to and from pages in the app.
 > - Use resources like documentation and sample apps to create your own app.
 
-You'll use Visual Studio 2022 to create an app that you can use to enter a note and save it to local app storage. The app will have two pages:
+You'll use Visual Studio 2022 to create an app that you can use to enter a note and save it to local app storage. You can find the source code for this app here. The app will have two pages:
 
 - `NotePage` - a page for editing a single note.
 - `AllNotesPage` - a page to show all the saved notes.
@@ -27,11 +27,11 @@ The final application is shown below:
 
 _AllNotesPage_
 
-:::image type="content" source="../media/intro/final-all-notes.png" alt-text="Final screenshot of the notes app, showing three save notes.":::
+:::image type="content" border="false" source="../media/intro/final-all-notes.png" alt-text="Final screenshot of the notes app, showing three save notes.":::
 
 _NotePage_
 
-:::image type="content" source="../media/intro/final-note.png" alt-text="Final screenshot of the notes app, showing a new blank note.":::
+:::image type="content" border="false" source="../media/intro/final-note.png" alt-text="Final screenshot of the notes app, showing a new blank note.":::
 
 ## Create the Visual Studio project
 

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

@@ -42,7 +42,7 @@ First, add the new page to the project:
                 HorizontalAlignment="Right"
                 Spacing="4"
                 Grid.Row="1" Grid.Column="1">
-            <Button Content="Save"/>
+            <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
             <Button Content="Delete"/>
         </StackPanel>
     </Grid>