Blazor Hybrid (MAUI) page-component navigation

aspnetcore/blazor/hybrid/routing.md

@@ -13,6 +13,8 @@ zone_pivot_groups: blazor-hybrid-frameworks
 
 This article explains how to manage request routing and navigation in Blazor Hybrid apps.
 
+## URI request routing behavior
+
 Default URI request routing behavior:
 
 * A link is *internal* if the host name and scheme match between the app's origin URI and the request URI. When the host names and schemes don't match or if the link sets `target="_blank"`, the link is considered *external*.
@@ -35,13 +37,11 @@ The <xref:Microsoft.AspNetCore.Components.WebView.UrlLoadingEventArgs.Url?displa
 
 API documentation:
 
-* .NET MAUI: <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView.UrlLoading>
-* WPF: <xref:Microsoft.AspNetCore.Components.WebView.Wpf.BlazorWebView.UrlLoading>
-* Windows Forms: <xref:Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView.UrlLoading>
-
-## Namespace
+* .NET MAUI: <xref:Microsoft.AspNetCore.Components.WebView.Maui.BlazorWebView.UrlLoading?displayProperty=nameWithType>
+* WPF: <xref:Microsoft.AspNetCore.Components.WebView.Wpf.BlazorWebView.UrlLoading?displayProperty=nameWithType>
+* Windows Forms: <xref:Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView.UrlLoading?displayProperty=nameWithType>
 
-The <xref:Microsoft.AspNetCore.Components.WebView?displayProperty=fullName> namespace is required for the examples in this article:
+The <xref:Microsoft.AspNetCore.Components.WebView?displayProperty=fullName> namespace is required for the following examples:
 
 ```csharp
 using Microsoft.AspNetCore.Components.WebView;
@@ -109,3 +109,118 @@ blazorWebView.UrlLoading +=
 ```
 
 :::zone-end
+
+:::zone pivot="maui"
+
+## Navigation among pages and Razor components
+
+This section explains how to navigate among .NET MAUI content pages and Razor components.
+
+The .NET MAUI Blazor hybrid project template isn't a [Shell-based app](/dotnet/maui/fundamentals/shell/), so the [URI-based navigation for Shell-based apps](/dotnet/maui/fundamentals/shell/navigation) isn't suitable for a project based on the project template. The examples in this section use a <xref:Microsoft.Maui.Controls.NavigationPage> to perform modeless or modal navigation.
+
+In the following example:
+
+* The namespace of the app is `MauiBlazor`, which matches the suggested project name of the <xref:blazor/hybrid/tutorials/maui> tutorial.
+* A <xref:Microsoft.Maui.Controls.ContentPage> is placed in a new folder added to the app named `Views`.
+
+In `App.xaml.cs`, create the `MainPage` as a <xref:Microsoft.Maui.Controls.NavigationPage> by making the following change:
+
+```diff
+- MainPage = new MainPage();
++ MainPage = new NavigationPage(new MainPage());
+```
+
+`Views/NavigationExample.xaml`:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:MauiBlazor"
+             x:Class="MauiBlazor.Views.NavigationExample"
+             Title="Navigation Example"
+             BackgroundColor="{DynamicResource PageBackgroundColor}">
+    <StackLayout>
+        <Label Text="Navigation Example"
+               VerticalOptions="Center"
+               HorizontalOptions="Center"
+               FontSize="24" />
+        <Button x:Name="CloseButton" 
+                Clicked="CloseButton_Clicked" 
+                Text="Close" />
+    </StackLayout>
+</ContentPage>
+```
+
+In the following `NavigationExample` code file, the `CloseButton_Clicked` event handler for the close button calls <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to pop the <xref:Microsoft.Maui.Controls.ContentPage> off of the navigation stack.
+
+`Views/NavigationExample.xaml.cs`:
+
+```csharp
+namespace MauiBlazor.Views;
+
+public partial class NavigationExample : ContentPage
+{
+    public NavigationExample()
+    {
+        InitializeComponent();
+    }
+
+    private async void CloseButton_Clicked(object sender, EventArgs e)
+    {
+        await Navigation.PopAsync();
+    }
+}
+```
+
+In a Razor component:
+
+* Add the namespace for the app's content pages. In the following example, the namespace is `MauiBlazor.Views`.
+* Add an HTML `button` element with an [`@onclick` event handler](xref:blazor/components/event-handling) to open the content page. The event handler method is named `OpenPage`.
+* In the event handler, call <xref:Microsoft.Maui.Controls.INavigation.PushAsync%2A> to push the <xref:Microsoft.Maui.Controls.ContentPage>, `NavigationExample`, onto the navigation stack.
+
+The following example is based on the `Index` component in the .NET MAUI Blazor project template.
+
+`Pages/Index.razor`:
+
+```razor
+@page "/"
+@using MauiBlazor.Views
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
+
+<SurveyPrompt Title="How is Blazor working for you?" />
+
+<button class="btn btn-primary" @onclick="OpenPage">Open</button>
+
+@code {
+    private async void OpenPage()
+    {
+        await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
+    }
+}
+```
+
+To change the preceding example to modal navigation:
+
+* In the `CloseButton_Clicked` method (`Views/NavigationExample.xaml.cs`), change <xref:Microsoft.Maui.Controls.INavigation.PopAsync%2A> to <xref:Microsoft.Maui.Controls.INavigation.PopModalAsync%2A>:
+
+  ```diff
+  - await Navigation.PopAsync();
+  + await Navigation.PopModalAsync();
+  ```
+
+* In the `OpenPage` method (`Pages/Index.razor`), change <xref:Microsoft.Maui.Controls.INavigation.PushAsync%2A> to <xref:Microsoft.Maui.Controls.INavigation.PushModalAsync%2A>:
+
+  ```diff
+  - await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
+  + await App.Current.MainPage.Navigation.PushModalAsync(new NavigationExample());
+  ```
+
+For more information, see the following resources:
+
+* [`NavigationPage` article (.NET MAUI documentation)](/dotnet/maui/user-interface/pages/navigationpage)
+* [`NavigationPage` (API documentation)](xref:Microsoft.Maui.Controls.NavigationPage)
+
+:::zone-end