From ed0d0c4f3b0352b5ce979b8d86d6a6fa136b2c2c Mon Sep 17 00:00:00 2001
From: eriklimakc <erik.lima@knowcode.app>
Date: Fri, 31 May 2024 13:03:22 +0100
Subject: [PATCH] docs: Updating navigation docs to match latest template

---
 doc/GettingStarted.md                         |  2 +-
 .../Authentication/HowTo-Authentication.md    |  2 +-
 .../Advanced/HowTo-AdvancedPageNavigation.md  | 16 +++-
 .../Advanced/HowTo-UseNavigationView.md       | 22 +++--
 .../Navigation/Advanced/HowTo-UseTabBar.md    | 23 +++--
 doc/Learn/Navigation/HowTo-DisplayItem.md     | 60 ++++++------
 .../Navigation/HowTo-DisplayMessageDialog.md  | 94 ++++++++++---------
 .../Navigation/HowTo-NavigateBetweenPages.md  | 34 ++++---
 doc/Learn/Navigation/HowTo-NavigateInCode.md  | 31 +++---
 doc/Learn/Navigation/HowTo-NavigateInXAML.md  | 41 ++++----
 doc/Learn/Navigation/HowTo-SelectValue.md     | 21 +++--
 11 files changed, 198 insertions(+), 148 deletions(-)

diff --git a/doc/GettingStarted.md b/doc/GettingStarted.md
index dc625ec69d..cb31721ac3 100644
--- a/doc/GettingStarted.md
+++ b/doc/GettingStarted.md
@@ -23,7 +23,7 @@ This tutorial will walk you through how to create an Uno application with Uno.Ex
 
     ![Visual Studio - Configure project name and location](./Learn/images/configure-new-unoplatform-app.png)
 
-* Choose a template preset to build your application
+* Choose the **Recommended** preset to build your application
 
     ![Visual Studio - Configure your new project](./Learn/images/intro.png)
 
diff --git a/doc/Learn/Authentication/HowTo-Authentication.md b/doc/Learn/Authentication/HowTo-Authentication.md
index 8341ee6862..1e25b84181 100644
--- a/doc/Learn/Authentication/HowTo-Authentication.md
+++ b/doc/Learn/Authentication/HowTo-Authentication.md
@@ -93,7 +93,7 @@ uid: Uno.Extensions.Authentication.HowToAuthentication
     }
     ```
 
-- Update the "Second" route in `App.xaml.host.cs` to specify that it depends on the "Main" route. This will make sure that even if the app navigates directly to the SecondPage, the MainPage will be added to the backstack.
+- Update the "Second" route in `App.xaml.cs` to specify that it depends on the "Main" route. This will make sure that even if the app navigates directly to the SecondPage, the MainPage will be added to the back stack.
 
     ```csharp
     routes
diff --git a/doc/Learn/Navigation/Advanced/HowTo-AdvancedPageNavigation.md b/doc/Learn/Navigation/Advanced/HowTo-AdvancedPageNavigation.md
index 017de782a2..16c48a61fb 100644
--- a/doc/Learn/Navigation/Advanced/HowTo-AdvancedPageNavigation.md
+++ b/doc/Learn/Navigation/Advanced/HowTo-AdvancedPageNavigation.md
@@ -7,6 +7,14 @@ When using navigation, you may not want to allow the current page to remain in t
 
 Using backward/forward navigation in your app requires a degree of extra consideration. Users always expect the back/forward button to take them to a page that is still relevant, yet logically related to the current page and direction. This page contains several concise tutorials about how to implement navigation techniques that address these more advanced problems.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
+## Step-by-steps
+
+> [!IMPORTANT]
+> This guide assumes you used the template wizard or `dotnet new unoapp` to create your solution. If not, it is recommended that you follow the [Creating an application with Uno.Extensions article](xref:Uno.Extensions.HowToGettingStarted) for creating an application from the template.
+
 ## Techniques
 
 ### Navigating to a Page and Clearing Back Stack
@@ -58,7 +66,7 @@ It is possible to navigate to a page and clear the back stack from code behind u
     ```csharp
     public async Task GoToSecondPage()
     {
-     await _navigator.NavigateViewModelAsync<SecondViewModel>(this, qualifier: Qualifiers.ClearBackStack);
+        await _navigator.NavigateViewModelAsync<SecondViewModel>(this, qualifier: Qualifiers.ClearBackStack);
     }
     ```
 
@@ -70,7 +78,7 @@ Another common scenario is to navigate to a page and then remove the current pag
 
 #### From XAML
 
-- Add a new `Page` to navigate to, `SamplePage.xaml`, in the UI (shared) project
+- Add a new `Page` to navigate to, `SamplePage.xaml`
 
 - In `SecondPage.xaml` add a `Button` with the following XAML, which does _not_ include a handler for the Click event
 
@@ -91,8 +99,8 @@ Another common scenario is to navigate to a page and then remove the current pag
 
 #### From code behind
 
-- Add a new `Page` to navigate to, `SamplePage.xaml`, in the UI (shared) project
-- In `SecondPage.xaml` add a `Button` with the following XAML, which includes a handler for the Click event  
+- Add a new `Page` to navigate to, `SamplePage.xaml`
+- In `SecondPage.xaml` add a `Button` with the following XAML, which includes a handler for the Click event
 
     ```xml
     <Button HorizontalAlignment="Center"
diff --git a/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md b/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md
index dc5b4afe7c..7c724ba360 100644
--- a/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md
+++ b/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md
@@ -5,6 +5,9 @@ uid: Uno.Extensions.Navigation.Advanced.NavigationView
 
 Choosing the right control for your navigation needs is important, and one common choice is `NavigationView`. This control adapts to different screen sizes and offers a uniform top-level navigation experience. `NavigationView` is a great option for adaptive, customizable, and mobile-friendly navigation. The Uno Platform extensions for navigation provide built-in support for using `NavigationView` and `NavigationViewItem` to switch between views. This tutorial will show you how to configure a `NavigationView` for use with the navigation extensions.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
 > [!IMPORTANT]
@@ -212,21 +215,24 @@ Choosing the right control for your navigation needs is important, and one commo
   private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
   {
       views.Register(
-          new ViewMap<ShellControl, ShellViewModel>(),
+          new ViewMap(ViewModel: typeof(ShellViewModel)),
           new ViewMap<ProductsPage, ProductsViewModel>(),
           new ViewMap<MainPage, MainViewModel>()
       );
 
       routes.Register(
           new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
-              Nested: new RouteMap[]
-              {
+              Nested:
+              [
                   new RouteMap("Main", View: views.FindByViewModel<MainViewModel>(),
-                  Nested: new RouteMap[]
-                  {
-                      new RouteMap("Products", View: views.FindByViewModel<ProductsViewModel>())
-                  })
-              }));
+                      Nested:
+                      [
+                          new RouteMap("Products", View: views.FindByViewModel<ProductsViewModel>())
+                      ]
+                  )
+              ]
+          )
+      );
   }
   ```
 
diff --git a/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md b/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md
index 0fc102d08b..f4c272c397 100644
--- a/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md
+++ b/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md
@@ -14,8 +14,14 @@ var builder = this.CreateBuilder(args)
     .Configure(host => host....);
 ```
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
+> [!IMPORTANT]
+> This guide assumes you used the template wizard or `dotnet new unoapp` to create your solution. If not, it is recommended that you follow the [Creating an application with Uno.Extensions article](xref:Uno.Extensions.HowToGettingStarted) for creating an application from the template.
+
 ### 1. Add necessary XAML namespaces
 
 * Update the `Page` element in `MainPage.xaml` to include XAML namespace mappings for Navigation and Uno Toolkit:
@@ -281,21 +287,24 @@ var builder = this.CreateBuilder(args)
     private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
     {
         views.Register(
-            new ViewMap<ShellControl, ShellViewModel>(),
+            new ViewMap(ViewModel: typeof(ShellViewModel)),
             new ViewMap<LoginPage, LoginViewModel>(),
             new ViewMap<MainPage, MainViewModel>()
         );
     
         routes.Register(
             new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
-                Nested: new RouteMap[]
-                {
+                Nested:
+                [
                     new RouteMap("Main", View: views.FindByViewModel<MainViewModel>(),
-                        Nested: new RouteMap[]
-                        { 
+                        Nested:
+                        [ 
                             new RouteMap("Login", View: views.FindByViewModel<LoginViewModel>())
-                        })
-                }));
+                        ]
+                    )
+                ]
+            )
+        );
     }
     ```
   
diff --git a/doc/Learn/Navigation/HowTo-DisplayItem.md b/doc/Learn/Navigation/HowTo-DisplayItem.md
index 770bc7283a..e85529fbcc 100644
--- a/doc/Learn/Navigation/HowTo-DisplayItem.md
+++ b/doc/Learn/Navigation/HowTo-DisplayItem.md
@@ -5,6 +5,9 @@ uid: Uno.Extensions.Navigation.HowToDisplayItem
 
 This topic walks through how to use Navigation to display the details of an item selected from a list. This demonstrates an important aspect of Navigation which is the ability to pass data as part of a navigation request.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
 > [!IMPORTANT]
@@ -20,10 +23,10 @@ Often it is necessary to pass a data item from one page to another. This scenari
     public record Widget(string Name, double Weight);
     ```
 
-- Change the `ViewMap` in `App.xaml.host.cs` that associates the `SecondPage` and `SecondViewModel`, to include a `DataMap` that references the `Widget` type.
+- Change the `ViewMap` in `App.xaml.cs` that associates the `SecondPage` and `SecondViewModel`, to be a `DataViewMap` object that allows you to specify the `Widget` type.
 
     ```csharp
-    new ViewMap<SecondPage, SecondViewModel>(Data: new DataMap<Widget>())
+    new DataViewMap<SecondPage, SecondViewModel, Widget>()
     ```
 
 ### 2. Pass data when navigating
@@ -33,9 +36,9 @@ Often it is necessary to pass a data item from one page to another. This scenari
     ```csharp
     public async Task GoToSecondPage()
     {
-     var widget = new Widget("CrazySpinner", 34.0);
+        var widget = new Widget("CrazySpinner", 34.0);
 
-     await _navigator.NavigateViewModelAsync<SecondViewModel>(this, data: widget);
+        await _navigator.NavigateViewModelAsync<SecondViewModel>(this, data: widget);
     }
     ```
 
@@ -67,7 +70,7 @@ Often it is necessary to pass a data item from one page to another. This scenari
 
 ### 4. Navigating with data
 
-- Because there's a mapping between the `Widget` and the `SecondViewModel` (in the `ViewMap` defined in `App.xaml.host.cs`), an alternative way to navigate is by calling the `NavigateDataAsync` and specifying the data object to pass in the navigation request. The type of the data object will be used to revolve which route to navigate to
+- Because there's a mapping between the `Widget` and the `SecondViewModel` (in the `ViewMap` defined in `App.xaml.cs`), an alternative way to navigate is by calling the `NavigateDataAsync` and specifying the data object to pass in the navigation request. The type of the data object will be used to resolve which route to navigate to.
 
     ```csharp
     await _navigator.NavigateDataAsync(this, data: widget);
@@ -80,11 +83,11 @@ A common application scenario is to present a list of items, for example present
 - Add a `Widgets` property to your `MainViewModel`
 
     ```csharp
-    public Widget[] Widgets { get; } = new[]
-    {
+    public Widget[] Widgets { get; } =
+    [
         new Widget("NormalSpinner", 5.0),
-        new Widget("HeavySpinner",50.0)
-    };
+        new Widget("HeavySpinner", 50.0)
+    ];
     ```
 
 - Update `MainPage.xaml` to replace the `Button` with a `ListView` which has the `ItemsSource` property data bound to the `Widgets` property. The `Navigation.Request` property defines the route that will be navigated to when an item in the `ListView` is selected.
@@ -126,11 +129,11 @@ If you have a `ListView` that has items of different types, the navigation route
 - Change the `Widgets` property in `MainViewModel` to include an array of different types of widgets.
 
     ```csharp
-    public Widget[] Widgets { get; } = new Widget[]
-    {
+    public Widget[] Widgets { get; } = 
+    [
         new BasicWidget("NormalSpinner", 5.0),
-        new AdvancedWidget("HeavySpinner",50.0)
-    };
+        new AdvancedWidget("HeavySpinner", 50.0)
+    ];
     ```
 
 - Clone the `SecondPage.xaml` and `SecondPage.xaml.cs` files, and rename the files to `ThirdPage.xaml` and `ThirdPage.xaml.cs` respectively. Make sure you also change the class name in both files from `SecondPage` to `ThirdPage`, as well as the `Content` property of the `NavigationBar` to read "Third Page".
@@ -159,27 +162,28 @@ If you have a `ListView` that has items of different types, the navigation route
     }
     ```
 
-- Add a `ViewMap` and `RouteMap` for `ThirdPage` and `ThirdViewModel`, specifying the `AdvancedWidget` in the `DataMap`. Also update DataMap for `SecondViewModel` to be `BasicWidget` instead of `Widget`
+- Add a `DataViewMap` and `RouteMap` for `ThirdPage` and `ThirdViewModel`, specifying the `AdvancedWidget`. Also, update `DataViewMap` for `SecondViewModel` to be `BasicWidget` instead of `Widget`
 
     ```csharp
     private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
     {
         views.Register(
-            new ViewMap<ShellControl, ShellViewModel>(),
+            new ViewMap(ViewModel: typeof(ShellViewModel)),
             new ViewMap<MainPage, MainViewModel>(),
-            new ViewMap<SecondPage, SecondViewModel>(Data: new DataMap<BasicWidget>()),
-            new ViewMap<ThirdPage, ThirdViewModel>(Data: new DataMap<AdvancedWidget>())
-            );
-
-        routes
-            .Register(
-                new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
-                    Nested: new RouteMap[]
-                    {
-                        new RouteMap("Main", View: views.FindByViewModel<MainViewModel>()),
-                        new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
-                        new RouteMap("Third", View: views.FindByViewModel<ThirdViewModel>()),
-                    }));
+            new DataViewMap<SecondPage, SecondViewModel, BasicWidget>(),
+            new DataViewMap<ThirdPage, ThirdViewModel, AdvancedWidget>()
+        );
+
+        routes.Register(
+            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
+                Nested:
+                [
+                    new ("Main", View: views.FindByViewModel<MainViewModel>()),
+                    new ("Second", View: views.FindByViewModel<SecondViewModel>()),
+                    new ("Third", View: views.FindByViewModel<ThirdViewModel>()),
+                ]
+            )
+        );
     }
     ```
 
diff --git a/doc/Learn/Navigation/HowTo-DisplayMessageDialog.md b/doc/Learn/Navigation/HowTo-DisplayMessageDialog.md
index 1baf8c8097..b9d48d1baa 100644
--- a/doc/Learn/Navigation/HowTo-DisplayMessageDialog.md
+++ b/doc/Learn/Navigation/HowTo-DisplayMessageDialog.md
@@ -5,6 +5,9 @@ uid: Uno.Extensions.Navigation.HowToDisplayMessageDialog
 
 This topic walks through using Navigation to display a prompt using a `MessageDialog`. This can also be used for simple user interactions, such as a confirmation dialog, where the user is prompted with an Ok/Cancel, or Yes/No, question.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
 > [!IMPORTANT]
@@ -51,14 +54,15 @@ This topic walks through using Navigation to display a prompt using a `MessageDi
     ```csharp
     public async Task ShowSimpleDialog()
     {
-     var result = await _navigator.ShowMessageDialogAsync<string>(this,
-      title: "This is Uno",
-      content: "Hello Uno.Extensions!",
-      buttons: new[]
-            {
-       new DialogAction("Ok"),
-       new DialogAction("Cancel")
-            });
+        var result = await _navigator.ShowMessageDialogAsync<string>(
+            this,
+            title: "This is Uno",
+            content: "Hello Uno.Extensions!",
+            buttons:
+            [
+                new DialogAction("Ok"),
+                new DialogAction("Cancel")
+            ]);
     }
     ```
 
@@ -70,38 +74,38 @@ This topic walks through using Navigation to display a prompt using a `MessageDi
 
 If you want to use the same `MessageDialog` in different places in your application you can define a `MessageDialogViewMap` and then reference it by the route you assign to it.
 
-- Create a `MessageDialogViewMap` instance and register it with both `views` and `routes` in `App.xaml.host.cs`
+- Create a `MessageDialogViewMap` instance and register it with both `views` and `routes` in `App.xaml.cs`
 
     ```csharp
     private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
     {
         var messageDialog = new MessageDialogViewMap(
-            title: "This is Uno",
+            Title: "This is Uno",
             Content: "Hello Uno.Extensions",
-            Buttons: new[]
-            {
+            Buttons:
+            [
                 new DialogAction(Label:"Yes"),
                 new DialogAction(Label:"No")
-            }
+            ]
         );
 
-
-     views.Register(
-      new ViewMap<ShellControl,ShellViewModel>(),
-      new ViewMap<MainPage, MainViewModel>(),
-      new ViewMap<SecondPage, SecondViewModel>(),
-            messageDialog
-      );
-
-     routes
-      .Register(
-       new RouteMap("", View: views.FindByViewModel<ShellViewModel>() ,
-                    Nested: new RouteMap[]
-                    {
-                     new RouteMap("Main", View: views.FindByViewModel<MainViewModel>()),
-                     new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
-                        new RouteMap("MyMessage", View: messageDialog)
-                    }));
+        views.Register(
+            new ViewMap(ViewModel: typeof(ShellViewModel)),
+            new ViewMap<MainPage, MainViewModel>(),
+            new DataViewMap<SecondPage, SecondViewModel, Entity>(),
+                messageDialog
+            );
+
+        routes.Register(
+            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
+                Nested:
+                [
+                    new RouteMap("Main", View: views.FindByViewModel<MainViewModel>()),
+                    new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
+                    new RouteMap("MyMessage", View: messageDialog)
+                ]
+            )
+        );
     }
     ```
 
@@ -117,29 +121,29 @@ If you want to use the same `MessageDialog` in different places in your applicat
 
     ```csharp
     var localizedMessageDialog = new LocalizableMessageDialogViewMap(
-        Content: localizer => localizer?["MyDialog_Content"]??string.Empty,
-     Buttons: new[]
-        {
-      new LocalizableDialogAction( LabelProvider:localizer=>localizer?["Dialog_Ok"]??string.Empty),
-            new LocalizableDialogAction( LabelProvider:localizer=>localizer?["Dialog_Cancel"]??string.Empty)
-        }
+        Content: localizer => localizer?["MyDialog_Content"] ?? string.Empty,
+        Buttons:
+        [
+            new LocalizableDialogAction(LabelProvider: localizer => localizer?["Dialog_Ok"] ?? string.Empty),
+            new LocalizableDialogAction(LabelProvider: localizer => localizer?["Dialog_Cancel"] ?? string.Empty)
+        ]
     );
     ```
 
-- Add resources for `MyDialog_Content`, `Dialog_Ok` and `Dialog_Cancel` to `Resources.resw`
+- Add resources for `MyDialog_Content`, `Dialog_Ok`, and `Dialog_Cancel` to `Resources.resw`
     ![Localized MessageDialog resources](images/LocalizedMessageDialogResources.png)
 
-- Make sure the `UseLocalization` extension method is called in the `BuildAppHost` method in `App.xaml.host.cs`
+- Make sure the `UseLocalization` extension method is called in the `OnLaunched` method in `App.xaml.cs`
 
     ```csharp
-    private static IHost BuildAppHost()
+    protected async override void OnLaunched(LaunchActivatedEventArgs args)
     {
-     return UnoHost
-       .CreateDefaultBuilder()
-       // ... omitted for brevity
-       .UseLocalization()
-       .Build(enableUnoLogging: true);
-
+        var builder = this.CreateBuilder(args)
+            .UseToolkitNavigation()
+            .Configure(host => host
+            // ... omitted for brevity
+            .UseLocalization()
+            // ... omitted for brevity
     }
     ```
 
diff --git a/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md b/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md
index e7601b7d40..35eda693f5 100644
--- a/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md
+++ b/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md
@@ -5,6 +5,9 @@ uid: Uno.Extensions.Navigation.HowToNavigateBetweenPages
 
 This topic covers using Navigation to navigate between two pages using frame-based navigation.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
 > [!IMPORTANT]
@@ -12,7 +15,7 @@ This topic covers using Navigation to navigate between two pages using frame-bas
 
 ### 1. Navigating to a New Page
 
-- Add a new `Page` to navigate to, `SamplePage.xaml`, in the UI (shared) project
+- Add a new `Page` to navigate to, `SamplePage.xaml`
 - In `MainPage.xaml` replace the existing `Button` with the following XAML, which includes a handler for the Click event
 
     ```xml
@@ -50,28 +53,31 @@ This topic covers using Navigation to navigate between two pages using frame-bas
 ### 3. Defining ViewMap and RouteMap
 
 At this point, if you inspect the Output window you'll see a line that says something similar to:
-`For better performance (avoid reflection), create mapping for for path 'Sample', view 'SamplePage', view model`
+`For better performance (avoid reflection), create a mapping for for path 'Sample', view 'SamplePage', view model`
 This warning exists because Navigation uses reflection as a fallback mechanism to associate types and the corresponding navigation route. This can be resolved by specifying a `ViewMap` and a `RouteMap` for the `SamplePage` to eliminate the need for reflection
 
-- Update the `RegisterRoutes` method in the `App.xaml.host.cs` file
+- Update the `RegisterRoutes` method in the `App.xaml.cs` file
 
     ```csharp
     private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
     {
         views.Register(
-            new ViewMap<ShellControl,ShellViewModel>(),
+            new ViewMap(ViewModel: typeof(ShellViewModel)),
             new ViewMap<MainPage, MainViewModel>(),
-            new ViewMap<SecondPage, SecondViewModel>(),
+            new DataViewMap<SecondPage, SecondViewModel, Entity>(),
             new ViewMap<SamplePage>()
-            );
+        );
 
         routes.Register(
-            new RouteMap("", View: views.FindByViewModel<ShellViewModel>() ,
-                    Nested: new RouteMap[] {
-                        new RouteMap("Main", View: views.FindByViewModel<MainViewModel>()),
-                        new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
-                        new RouteMap("Sample", View: views.FindByView<SamplePage>()),
-                }));
+            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
+                Nested:
+                [
+                    new ("Main", View: views.FindByViewModel<MainViewModel>()),
+                    new ("Second", View: views.FindByViewModel<SecondViewModel>()),
+                    new ("Sample", View: views.FindByView<SamplePage>()),
+                ]
+            )
+        );
     }
     ```
 
@@ -79,7 +85,7 @@ This warning exists because Navigation uses reflection as a fallback mechanism t
 
 By defining a `ViewMap` that associates a view with a view model, an instance of the view model can dynamically be created and is subsequently set as the `DataContext` on the view that's navigated to.
 
-- Create a new class `SampleViewModel` in the ViewModels folder of the class library project
+- Create a new class `SampleViewModel` in the Presentation folder
 
     ```csharp
     public class SampleViewModel
@@ -91,7 +97,7 @@ By defining a `ViewMap` that associates a view with a view model, an instance of
     }
     ```
 
-- Update `ViewMap` in `App.xaml.host.cs` to include `SampleViewModel`
+- Update `ViewMap` in `App.xaml.cs` to include `SampleViewModel`
 
     ```csharp
     new ViewMap<SamplePage, SampleViewModel>()
diff --git a/doc/Learn/Navigation/HowTo-NavigateInCode.md b/doc/Learn/Navigation/HowTo-NavigateInCode.md
index 8c22cc6ded..d32980fe19 100644
--- a/doc/Learn/Navigation/HowTo-NavigateInCode.md
+++ b/doc/Learn/Navigation/HowTo-NavigateInCode.md
@@ -3,7 +3,10 @@ uid: Uno.Extensions.Navigation.HowToNavigateInCode
 ---
 # How-To: Navigate in Code
 
-This topic walks through controlling Navigation from code, either in the code-behind file of a Page or in the corresponding view model. One of the Navigation objectives was a single navigation construct that applies where ever you choose to write your navigation code.
+This topic walks through controlling Navigation from code, either in the code-behind file of a Page or in the corresponding view model. One of the Navigation objectives was a single navigation construct that applies wherever you choose to write your navigation code.
+
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
 
 ## Step-by-steps
 
@@ -14,7 +17,7 @@ This topic walks through controlling Navigation from code, either in the code-be
 
 Navigation can be invoked in the code-behind file of a `Page` by using the `Navigator` extension method to get an `INavigator` instance.
 
-- Add a new `Page` to navigate to, `SamplePage.xaml`, in the UI (shared) project
+- Add a new `Page` to navigate to, `SamplePage.xaml`
 - In `MainPage.xaml` update the `Button` to the following XAML, which includes a handler for the `Click` event
 
     ```xml
@@ -64,26 +67,28 @@ The `NavigateViewAsync` method uses the type of the view, i.e. `SamplePage`, to
     }
     ```
 
-- Add `ViewMap` and `RouteMap` instances in the `RegisterRoutes` method in `App.xaml.host.cs`. This associates the `SampleViewModel` with the `SamplePage`, as well as avoiding the use of reflection for route discovery.
+- Add `ViewMap` and `RouteMap` instances in the `RegisterRoutes` method in `App.xaml.cs`. This associates the `SampleViewModel` with the `SamplePage`, as well as avoiding the use of reflection for route discovery.
 
     ```csharp
     private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
     {
         views.Register(
-            new ViewMap<ShellControl,ShellViewModel>(),
+            new ViewMap(ViewModel: typeof(ShellViewModel)),
             new ViewMap<MainPage, MainViewModel>(),
-            new ViewMap<SecondPage, SecondViewModel>(),
+            new DataViewMap<SecondPage, SecondViewModel, Entity>(),
             new ViewMap<SamplePage, SampleViewModel>()
-            );
+        );
 
         routes.Register(
-         new RouteMap("", View: views.FindByViewModel<ShellViewModel>() ,
-                Nested: new RouteMap[]
-                {
-                    new RouteMap("Main", View: views.FindByViewModel<MainViewModel>()),
-                    new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
-                    new RouteMap("Sample", View: views.FindByViewModel<SampleViewModel>()),
-                }));
+            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
+                Nested:
+                [
+                    new ("Main", View: views.FindByViewModel<MainViewModel>()),
+                    new ("Second", View: views.FindByViewModel<SecondViewModel>()),
+                    new ("Sample", View: views.FindByViewModel<SampleViewModel>()),
+                ]
+            )
+        );
     }
     ```
 
diff --git a/doc/Learn/Navigation/HowTo-NavigateInXAML.md b/doc/Learn/Navigation/HowTo-NavigateInXAML.md
index fd7b450e61..9fbfcb0521 100644
--- a/doc/Learn/Navigation/HowTo-NavigateInXAML.md
+++ b/doc/Learn/Navigation/HowTo-NavigateInXAML.md
@@ -5,6 +5,9 @@ uid: Uno.Extensions.Navigation.HowToNavigateInXAML
 
 This topic walks through controlling Navigation from XAML. This includes specifying data that should be attached to the navigation request.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
 > [!IMPORTANT]
@@ -13,9 +16,9 @@ This topic walks through controlling Navigation from XAML. This includes specify
 ### 1. Navigation.Request
 
 Navigation can be defined in XAML by placing the `Navigation.Request` attached property on a specific XAML element. The string value specified in the `Navigation.Request` is the route to be navigated to.
-Depending on the type of the XAML element, the `Navigation.Request` property will attach to an appropriate event in order to trigger navigation. For example, on a `Button`, the `Click` event will be used to trigger navigation, where as the `SelectionChanged` event on a `ListView` is used. If you place a `Navigation.Request` property on an static element, such as a `Border`, `Image` or `TextBlock`, the `Tapped` event will be used to trigger navigation.
+Depending on the type of the XAML element, the `Navigation.Request` property will attach to an appropriate event in order to trigger navigation. For example, on a `Button`, the `Click` event will be used to trigger navigation, whereas the `SelectionChanged` event on a `ListView` is used. If you place a `Navigation.Request` property on a static element, such as a `Border`, `Image`, or `TextBlock`, the `Tapped` event will be used to trigger navigation.
 
-- Add a new `Page` to navigate to, `SamplePage.xaml`, in the UI (shared) project
+- Add a new `Page` to navigate to, `SamplePage.xaml`
 
 - Add a new class, `SampleViewModel`, to the class library project
 
@@ -57,26 +60,28 @@ Depending on the type of the XAML element, the `Navigation.Request` property wil
     > [!TIP]
     > While this works, it relies on reflection to convert the request path "Sample" to the corresponding view, i.e. `SamplePage`. It's better to define `ViewMap` and `RouteMap`
 
-- Add a `ViewMap` and a `RouteMap` for the `SamplePage` into the `RegisterRoutes` method in the `App.xaml.host.cs` file
+- Add a `ViewMap` and a `RouteMap` for the `SamplePage` into the `RegisterRoutes` method in the `App.xaml.cs` file
 
     ```csharp
     private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
     {
         views.Register(
-            new ViewMap<ShellControl,ShellViewModel>(),
+            new ViewMap(ViewModel: typeof(ShellViewModel)),
             new ViewMap<MainPage, MainViewModel>(),
-            new ViewMap<SecondPage, SecondViewModel>(),
+            new DataViewMap<SecondPage, SecondViewModel, Entity>(),
             new ViewMap<SamplePage, SampleViewModel>()
         );
 
         routes.Register(
-            new RouteMap("", View: views.FindByViewModel<ShellViewModel>() ,
-                Nested: new RouteMap[]
-                {
-                    new RouteMap("Main", View: views.FindByViewModel<MainViewModel>()),
-                    new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
-                    new RouteMap("Sample", View: views.FindByViewModel<SampleViewModel>()),
-        }));
+            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
+                Nested:
+                [
+                    new ("Main", View: views.FindByViewModel<MainViewModel>()),
+                    new ("Second", View: views.FindByViewModel<SecondViewModel>()),
+                    new ("Sample", View: views.FindByViewModel<SampleViewModel>()),
+                ]
+            )
+        );
     }
     ```
 
@@ -93,11 +98,11 @@ In addition to specifying the route to navigate to, the Navigation.Data attached
 - Add a property, `Widgets`, to `MainViewModel` that returns an array of predefined `Widget` instances.
 
     ```csharp
-    public Widget[] Widgets { get; } = new[]
-    {
+    public Widget[] Widgets { get; } =
+    [
         new Widget("NormalSpinner", 5.0),
-        new Widget("HeavySpinner",50.0)
-    };
+        new Widget("HeavySpinner", 50.0)
+    ];
     ```
 
 - Replace the `Button` with a `ListView` in `MainPage.xaml` that has the `ItemsSource` property data bound to the `Widgets` property.
@@ -157,10 +162,10 @@ In addition to specifying the route to navigate to, the Navigation.Data attached
     </TextBlock>
     ```
 
-- In order for the `Widget` to be injected into the `SampleViewModel` during navigation, a `DataMap` has to be added to the `ViewMap`
+- In order for the `Widget` to be injected into the `SampleViewModel` during navigation, a `DataMap` has to be added to the `ViewMap`. Therefore, we can change the `ViewMap` instantiation to `DataViewMap` and provide the `Widget` as a generic argument:
 
     ```csharp
-    new ViewMap<SamplePage, SampleViewModel>(Data: new DataMap<Widget>())
+    new DataViewMap<SamplePage, SampleViewModel, Widget>()
     ```
 
 ### 3. Navigating To SelectedItem
diff --git a/doc/Learn/Navigation/HowTo-SelectValue.md b/doc/Learn/Navigation/HowTo-SelectValue.md
index e694c79878..725d38fa27 100644
--- a/doc/Learn/Navigation/HowTo-SelectValue.md
+++ b/doc/Learn/Navigation/HowTo-SelectValue.md
@@ -5,6 +5,9 @@ uid: Uno.Extensions.Navigation.HowToSelectValue
 
 This topic walks through using Navigation to request a value from the user. For example selecting a value from a list of items.
 
+> [!NOTE]
+> This guide uses predefined code created by the Uno Template using the `Recommended` preset, however, it uses the `MVVM` approach for the examples instead of `MVUX` defined in the `Recommended` preset.
+
 ## Step-by-steps
 
 > [!IMPORTANT]
@@ -23,11 +26,11 @@ This scenario will use Navigation to navigate to a page in order for the user to
 - Add `Widgets` property to `SecondViewModel` to define the list of items to pick from.
 
     ```csharp
-    public Widget[] Widgets { get; } = new[]
-    {
+    public Widget[] Widgets { get; } =
+    [
         new Widget("NormalSpinner", 5.0),
-        new Widget("HeavySpinner",50.0)
-    };
+        new Widget("HeavySpinner", 50.0)
+    ];
     ```
 
 - Add a `ListView` to `SecondPage.xaml` to display the items returned by the `Widgets` property. The `Navigation.Request` property specifies a route of `-` which will navigate back to the previous page.
@@ -54,20 +57,20 @@ This scenario will use Navigation to navigate to a page in order for the user to
     ```csharp
     public async Task GoToSecondPage()
     {
-     var widget = await _navigator.GetDataAsync<SecondViewModel, Widget>(this);
+        var widget = await _navigator.GetDataAsync<SecondViewModel, Widget>(this);
     }
     ```
 
-- The selected a value from the `ListView` on `SecondPage` will get returned to the `widget` variable in `MainViewModel`.
+- The selected value from the `ListView` on `SecondPage` will get returned to the `widget` variable in `MainViewModel`.
 
 ### 2. Navigating ForResult Type
 
-In the preceding step the `GetDataAsync` method call specified two generic arguments, `SecondViewModel` which defines the view to navigate to, and `Widget` which defines the type of data to be returned. The `ViewMap` can be updated to define an association between the view and the type of data being requested.
+In the preceding step, the `GetDataAsync` method call specified two generic arguments, `SecondViewModel` which defines the view to navigate to, and `Widget` which defines the type of data to be returned. The `ViewMap` can be updated to `ResultDataViewMap` to define an association between the view and the type of data being requested.
 
 - Update the `ViewMap` for `SecondViewModel` as follows:
 
     ```csharp
-    new ViewMap<SecondPage, SecondViewModel>(ResultData: typeof(Widget))
+    new ResultDataViewMap<SecondPage, SecondViewModel, Widget>()
     ```
 
 - Update the `GetDataAsync` method call to only specify the result data type, `Widget`.
@@ -75,7 +78,7 @@ In the preceding step the `GetDataAsync` method call specified two generic argum
     ```csharp
     public async Task GoToSecondPage()
     {
-     var widget = await _navigator.GetDataAsync<Widget>(this);
+        var widget = await _navigator.GetDataAsync<Widget>(this);
     }
     ```