How to upgrade an existing .NET MAUI project to a .NET MAUI Blazor application?

This Knowledge Base article provides a step-by-step guide for upgrading your current .NET MAUI project into a .NET MAUI Blazor application. By integrating .NET MAUI Blazor, you can leverage Blazor’s web technology capabilities while benefiting from the cross-platform features of .NET MAUI.

Prerequisites:

• Ensure your .NET MAUI project is updated to the latest version.
• Confirm your project’s compatibility with .NET MAUI Blazor.

Step 1: Creating a .NET MAUI Application

1. Initiate a new .NET MAUI application in Visual Studio.
2. In the MainPage.xaml, add a ListView control to display data.

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:local="clr-namespace:MauiApp2" 
             x:Class="MauiApp2.MainPage">
    <ContentPage.BindingContext>
        <local:ViewModel>
        </local:ViewModel>
    </ContentPage.BindingContext>
    <ListView ItemsSource="{Binding Items}">
    </ListView>
</ContentPage>

Step 2: Upgrading to .NET MAUI Blazor

1. Create a .NET MAUI Blazor application in Visual Studio.

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
            xmlns:local="clr-namespace:MauiApp3" 
            x:Class="MauiApp3.MainPage" 
            BackgroundColor="{DynamicResource PageBackgroundColor}">
   <ContentPage.BindingContext>
       <local:ViewModel>
       </local:ViewModel>
   </ContentPage.BindingContext>
   <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
       <BlazorWebView.RootComponents>
           <RootComponent Selector="#app" ComponentType="{x:Type local:Main}">
           </RootComponent>
       </BlazorWebView.RootComponents>
   </BlazorWebView>
</ContentPage>

2. Comment out the BlazorWebView control if not required or move it to another layout if you want to use it alongside .NET MAUI controls.
3. Remove the default background color added in the MainPage.xaml.
4. Set up the.NET MAUI ListView control in the MainPage.xaml. You can copy-paste from the .NET MAUI application created in Step 1.
5. Move the Model and ViewModel classes from the .NET MAUI application to the .NET MAUI Blazor application.
6. Build and run the application.

Output image:

Conclusion:
I hope you enjoyed learning how to upgrade an existing .NET MAUI project to a .NET MAUI Blazor application.
You can refer to our .NET MAUI feature tour page to learn about its other groundbreaking features and documentation for more details on creating and manipulating data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our Support Forum, Direct-trac, or feedback portal. We are always happy to assist you!