.NET MAUI – Blazor Hybrid – StartPath

Providing a hybrid solution is uber cool as it paves way for the reuse of components across the Web, Mobile, and Desktop solutions.

But the Mobile world has matured a lot with native features such as Deep linking, App links, etc … So it’s necessary for the Apps developed in the Hybrid model to support these to stay up to date.

Whenever a link is clicked that is shared via social media or received through messaging apps, it’s expected to open in the associated app, if installed to provide the best possible user experience.

The link could point to a page deep linked into the app, say a transaction summary, a review about a movie/food, or a route between two places … They’re all context-driven.

To support such scenarios, the BlazorWebView on .NET 8 now supports the StartPath property. That provides the option to initialize the app by navigating to a page other than the default page (specified with route address ‘/’) and the data received from the link that the user has clicked can be passed on to this to set the context right.

As the name suggests, this StartPath, property of type string, allows to specify the route address of the Razor component to start with, and needless to mention the route address does take (optional) parameters via routes and query strings to define the context.

<ContentPage
    x:Class="HybridApp.Views.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:HybridApp">
    <BlazorWebView
        HostPage="wwwroot/index.html"
        StartPath="/counter">
        <BlazorWebView.RootComponents>
            <RootComponent
                Selector="#app"
                ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

The sample code shows the StartPath property set to load the app with the Counter component instead of the regular Home component in the default .NET MAUI Hybrid App template.

dotnet new maui-blazor -n HybridApp

While using the All-in-One .NET MAUI App template:

To install the CLI template package, run the below command.

And also as a Visual Studio extension here in the VS marketplace:

dotnet new install VijayAnand.MauiTemplates

dotnet new mauiapp -n HybridApp -dp Hybrid -f net8.0

Those who’re new to XAML or developers from other frameworks can make use of this little NuGet package titled VijayAnand.MauiBlazor.Markup that provides the extension methods to initialize the BlazorWebView all in C#. The most useful method will be the Configure() one that does the initialization in just a single line. This method is overloaded to support this StartPath property for .NET 8.

using Microsoft.AspNetCore.Components.WebView.Maui;
using VijayAnand.MauiBlazor.Markup;

namespace HybridApp.Views
{
    public class MainPage : ContentPage
    {
        public MainPage()
        {
            Content = new BlazorWebView().Configure("wwwroot/index.html", "/counter", ("#app", typeof(Main), null));
        }
    }
}

Note: This StartPath property is a bindable property, and can also be set from the ViewModel if working with the MVVM design pattern.

Code snippet for MVVM folks, using CommunityToolkit.Maui.Markup to simplify things (assuming a property named StartPath is defined in the MainViewModel. The ViewModel property name could be anything, have used the same name just for the sake of easy understanding):

Uses the regular Configure() overload method without the startPath parameter.

using CommunityToolkit.Maui.Markup;
using HybridApp.ViewModels;
using Microsoft.AspNetCore.Components.WebView.Maui;
using VijayAnand.MauiBlazor.Markup;

namespace HybridApp.Views
{
    public class MainPage : ContentPage
    {
        public MainPage(MainViewModel viewModel)
        {
            BindingContext = viewModel;
            Content = new BlazorWebView().Configure("wwwroot/index.html", ("#app", typeof(Main), null))
                                         .Bind(BlazorWebView.StartPathProperty, static (MainViewModel vm) => vm.StartPath);
        }
    }
}

And this StartPath property is also available on the Windows Forms and WPF counterparts too. Quite like .NET MAUI, only while targeting .NET 8.

Blazor desktop templates are now available as the CLI template package via NuGet and also as a Visual Studio extension here in the VS marketplace:

To install:

dotnet new install VijayAnand.BlazorTemplates

Windows Forms:

dotnet new winforms-blazor -n HybridApp -f net8.0

WPF:

dotnet new wpf-blazor -n HybridApp -f net8.0

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.