How can I navigate the blazor pages with the press of a xaml button? - blazor-server-side

Question

So here is my generally idea:
I have a flyout page in which i want to press different buttons to load different blazor pages in the flyout.details. The goal is to replace the default navbar of the blazor example with native elements of the different frameworks in the .NET MAUI XAML. (Image) My first thought was accessing the navigationManager of the blazor pages but no idea how. Does that even makes sense? I feel like I am missing sth very crucial because it seems to be a very natural thing to do with .net Maui Blazor.
Important to understand is that i want to stay on the same xaml page. I just want to change the loaded Blazor page without the need to define the nav at in the Blazor page.
I tried to access it via injection,
which kinda confused me but tried it any ways (got it from a forum). I feel like I am not understanding something fundamental.
XAML:
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiTest"
x:Class="MauiTest.MainPage"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<FlyoutPage.Flyout>
<ContentPage Title="FlyoutMenu">
<VerticalStackLayout>
<Label x:Name="TestLabel"
Text="Welcome to .NET MAUI!"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Button Text="Counter" Clicked="OnCounterClicked" x:Name="Counter" />
<Button Text="Test" Clicked="OnTestButtonClicked" x:Name="TestButton"/>
<WebView BackgroundColor="red" Source="http://0.0.0.0/app/counter" />
</VerticalStackLayout>
</ContentPage>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<ContentPage>
<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
</FlyoutPage.Detail>
For the methode behind it I don't really have any idea...
C#:
private void OnTestButtonClicked(object sender, EventArgs e)
{
//Navigating to a site
}
Don't let yourself irritate from the other buttons: I am playing around.

Answer 1

To replace the nav bar
Maui Blazor have designed the structure for us. The easiest way i think is to modify it.
The NavMenu.razor (default blazor template) define the appearance and structure of the navigation bar. You could modify it.
<div class="sidebar">
<NavMenu />
</div>
Another way is that you do it like .net maui FlyoutPage. In MainPage
<FlyoutPage.Flyout>
<MauiPages:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
I have tested it and it worked well just like the official docs.
For more info, you could refer to FlyoutPage and for sample code Xamarin flyout doc could be help
2.I don't think we could navigate from a maui page to razor component as their route ways are much different. For a walkaround, you could wrap razor component in a maui contentpage.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiBlazor"
>
<BlazorWebView HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
And then use maui navigation:
App.Current.MainPage.Navigation.PushAsync(new MauiPages.MyPage());
========origin answer============
Seems you want to close the sidebar created by Blazor. That's MainLayout.razor in Shared folder. You could simply remove the following line:
<div class="sidebar">
<NavMenu />
</div>
Then the default sidebar would disappear.
if you want navigate, you could try the following:
App.Current.MainPage.Navigation.PushAsync(new MauiPages.MyPage());
Hope it works for you.