From 64bc9f45965ba020b2eb78ac31047c3746da05f0 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  | 14 ++-
 .../Advanced/HowTo-UseNavigationView.md       | 22 +++--
 .../Navigation/Advanced/HowTo-UseTabBar.md    | 23 +++--
 doc/Learn/Navigation/HowTo-DisplayItem.md     | 60 ++++++------
 .../Navigation/HowTo-DisplayMessageDialog.md  | 92 ++++++++++---------
 .../Navigation/HowTo-NavigateBetweenPages.md  | 32 ++++---
 doc/Learn/Navigation/HowTo-NavigateInCode.md  | 31 ++++---
 doc/Learn/Navigation/HowTo-NavigateInXAML.md  | 40 ++++----
 doc/Learn/Navigation/HowTo-SelectValue.md     | 19 ++--
 11 files changed, 194 insertions(+), 143 deletions(-)

diff --git a/doc/GettingStarted.md b/doc/GettingStarted.md
index dc95d2f316..6d868fa088 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 16f9077f98..98207ab95f 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 backstack.
 
     ```csharp
     routes
diff --git a/doc/Learn/Navigation/Advanced/HowTo-AdvancedPageNavigation.md b/doc/Learn/Navigation/Advanced/HowTo-AdvancedPageNavigation.md
index 31142e3125..d8091e1587 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.
 
+## 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.
+
+> [!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.
+
 ## Techniques
 
 ### Navigating to a Page and Clearing Back Stack
@@ -57,7 +65,7 @@ It is possible to navigate to a page and clear the back stack from codebehind us
     ```csharp
     public async Task GoToSecondPage()
     {
-     await _navigator.NavigateViewModelAsync<SecondViewModel>(this, qualifier: Qualifiers.ClearBackStack);
+        await _navigator.NavigateViewModelAsync<SecondViewModel>(this, qualifier: Qualifiers.ClearBackStack);
     }
     ```
 
@@ -69,7 +77,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
 
@@ -90,7 +98,7 @@ Another common scenario is to navigate to a page and then remove the current pag
 
 #### From codebehind
 
-- 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 includes a handler for the Click event  
 
     ```xml
diff --git a/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md b/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md
index f53ffd04f0..124ce95cb4 100644
--- a/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md
+++ b/doc/Learn/Navigation/Advanced/HowTo-UseNavigationView.md
@@ -10,6 +10,9 @@ Choosing the right control for your navigation needs is important, and one commo
 > [!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.
 
+> [!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.
+
 ### 1. Add XAML namespace mapping
 
 * Add the following namespace mapping to the root element of your XAML page:
@@ -218,21 +221,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 0a3b01a7fa..8d71321b3f 100644
--- a/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md
+++ b/doc/Learn/Navigation/Advanced/HowTo-UseTabBar.md
@@ -16,6 +16,12 @@ var builder = this.CreateBuilder(args)
 
 ## 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.
+
+> [!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.
+
 ### 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..e3cd3942ad 100644
--- a/doc/Learn/Navigation/HowTo-DisplayItem.md
+++ b/doc/Learn/Navigation/HowTo-DisplayItem.md
@@ -10,6 +10,9 @@ This topic walks through how to use Navigation to display the details of an item
 > [!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.
 
+> [!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.
+
 Often it is necessary to pass a data item from one page to another. This scenario will start with passing a newly created object along with the navigation request, and how the specified object can be accessed by the destination ViewModel.
 
 ### 1. Define the type of data to pass
@@ -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 revolve 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..7345f3e7a9 100644
--- a/doc/Learn/Navigation/HowTo-DisplayMessageDialog.md
+++ b/doc/Learn/Navigation/HowTo-DisplayMessageDialog.md
@@ -10,6 +10,9 @@ This topic walks through using Navigation to display a prompt using a `MessageDi
 > [!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.
 
+> [!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.
+
 ### 1. Show an ad-hoc `MessageDialog`
 
 - Update the existing `Button` on `MainPage.xaml`
@@ -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`
     ![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..00ccfada7c 100644
--- a/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md
+++ b/doc/Learn/Navigation/HowTo-NavigateBetweenPages.md
@@ -10,9 +10,12 @@ This topic covers using Navigation to navigate between two pages using frame-bas
 > [!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.
 
+> [!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.
+
 ### 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
@@ -53,25 +56,28 @@ At this point, if you inspect the Output window you'll see a line that says some
 `For better performance (avoid reflection), create 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..3dbc9213bb 100644
--- a/doc/Learn/Navigation/HowTo-NavigateInCode.md
+++ b/doc/Learn/Navigation/HowTo-NavigateInCode.md
@@ -3,18 +3,21 @@ 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.
 
 ## 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.
 
+> [!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.
+
 ### 1. Navigating to a New Page
 
 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 86044552e3..8ecdb2f1cb 100644
--- a/doc/Learn/Navigation/HowTo-NavigateInXAML.md
+++ b/doc/Learn/Navigation/HowTo-NavigateInXAML.md
@@ -10,12 +10,15 @@ This topic walks through controlling Navigation from XAML. This includes specify
 > [!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.
 
+> [!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.
+
 ### 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.
 
-- 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]
 > Whilst 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,11 @@ 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..79cc976d22 100644
--- a/doc/Learn/Navigation/HowTo-SelectValue.md
+++ b/doc/Learn/Navigation/HowTo-SelectValue.md
@@ -10,6 +10,9 @@ This topic walks through using Navigation to request a value from the user. For
 > [!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.
 
+> [!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.
+
 ### 1. GetDataAsync
 
 This scenario will use Navigation to navigate to a page in order for the user to select an item. The item will be returned via Navigation to the calling code.
@@ -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,7 +57,7 @@ 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);
     }
     ```
 
@@ -62,12 +65,12 @@ This scenario will use Navigation to navigate to a page in order for the user to
 
 ### 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);
     }
     ```