Adding the MAUI Blazor Start Page to the Mobile Project

Oct 13, 2025 by talynt.org 23 views

Introduction

The .NET MAUI Blazor hybrid and web app template provides a comprehensive solution for building cross-platform applications using C# and Blazor. This template includes four projects: mobile, web, shared, and client. The shared project contains the majority of the application's code, while the mobile and web projects display the application's UI. However, by default, the MAUI Blazor start page is not included in the mobile project. In this article, we will explore how to add the MAUI Blazor start page to the mobile project using the .NET MAUI Blazor hybrid and web app template.

Understanding the .NET MAUI Blazor Hybrid and Web App Template

The .NET MAUI Blazor hybrid and web app template is a pre-configured solution that allows developers to build cross-platform applications using C# and Blazor. This template includes four projects:

Mobile Project: This project contains the UI code for the mobile application.
Web Project: This project contains the UI code for the web application.
Shared Project: This project contains the majority of the application's code, including business logic, data access, and services.
Client Project: This project contains the client-side code for the application, including JavaScript and CSS files.

Adding the MAUI Blazor Start Page to the Mobile Project

To add the MAUI Blazor start page to the mobile project, you need to follow these steps:

Step 1: Create a New Page in the Shared Project

First, you need to create a new page in the shared project. This page will serve as the start page for the mobile application.

// Shared Project
// Pages
// StartPage.razor
@page "/start"
<h1>Start Page</h1>
<button @onclick="NavigateToHome">Navigate to Home</button>
@code {
private void NavigateToHome()
{
Navigation.NavigateTo("/home");
}
}

Step 2: Add a Navigation Link to the Mobile Project

Next, you need to add a navigation link to the mobile project that points to the start page.

// Mobile Project
// Pages
// AppShell.razor
@page "/"
<Shell>
<FlyoutItem Route="start" Title="Start">
<ShellItem Title="Start Page">
<RouteView Route="start" />
</ShellItem>
</FlyoutItem>
<FlyoutItem Route="home" Title="Home">
<ShellItem Title="Home Page">
<RouteView Route="home" />
</ShellItem>
</FlyoutItem>
</Shell>

Step 3: Configure the Navigation in the Client Project

Finally, you need to configure the navigation in the client project to point to the start page.

// Client Project
// App.razor
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="route">
<RouteView RouteData="@route" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<h1>Not found</h1>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>

Conclusion

In this article, we explored how to add the MAUI Blazor start page to the mobile project using the .NET MAUI Blazor hybrid and web app template. We created a new page in the shared project, added a navigation link to the mobile project, and configured the navigation in the client project. By following these steps, you can add the MAUI Blazor start page to the mobile project and create a comprehensive cross-platform application using C# and Blazor.

Additional Resources

FAQs

Q: How do I create a new page in the shared project? A: To create a new page in the shared project, you need to create a new Razor component in the Pages folder of the shared project.
Q: How do I add a navigation link to the mobile project? A: To add a navigation link to the mobile project, you need to add a new FlyoutItem to the AppShell component in the mobile project.
Q: How do I configure the navigation in the client project? A: To configure the navigation in the client project, you need to add a new Router component to the App component in the client project.
Frequently Asked Questions (FAQs) =====================================

Q: What is the .NET MAUI Blazor hybrid and web app template?

A: The .NET MAUI Blazor hybrid and web app template is a pre-configured solution that allows developers to build cross-platform applications using C# and Blazor. This template includes four projects: mobile, web, shared, and client.

Q: What is the purpose of the shared project in the .NET MAUI Blazor hybrid and web app template?

A: The shared project in the .NET MAUI Blazor hybrid and web app template contains the majority of the application's code, including business logic, data access, and services. This project is shared across the mobile and web projects.

Q: How do I create a new page in the shared project?

A: To create a new page in the shared project, you need to create a new Razor component in the Pages folder of the shared project. For example, you can create a new page called StartPage.razor in the Pages folder.

Q: How do I add a navigation link to the mobile project?

A: To add a navigation link to the mobile project, you need to add a new FlyoutItem to the AppShell component in the mobile project. For example, you can add a new FlyoutItem called Start that points to the StartPage component.

Q: How do I configure the navigation in the client project?

A: To configure the navigation in the client project, you need to add a new Router component to the App component in the client project. For example, you can add a new Router component that points to the StartPage component.

Q: What is the difference between the mobile and web projects in the .NET MAUI Blazor hybrid and web app template?

A: The mobile and web projects in the .NET MAUI Blazor hybrid and web app template are used to display the application's UI. The mobile project is used to display the application's UI on mobile devices, while the web project is used to display the application's UI on the web.

Q: How do I debug the .NET MAUI Blazor hybrid and web app template?

A: To debug the .NET MAUI Blazor hybrid and web app template, you can use the built-in debugging tools in Visual Studio. You can also use the Console.WriteLine statement to print debug messages to the console.

Q: What are some best practices for building cross-platform applications using the .NET MAUI Blazor hybrid and web app template?

A: Some best practices for building cross-platform applications using the .NET MAUI Blazor hybrid and web app template include:

Using a consistent naming convention throughout the application.
Using a consistent coding style throughout the application.
Using a consistent layout and design throughout the application.
Using a consistent navigation and routing system throughout the application.
Testing the application thoroughly on multiple platforms and devices.

Q: What are some common issues that can occur when building cross-platform applications using the .NET MAUI Blazor hybrid and web app template?

A: Some common issues that can occur when building cross-platform applications using the .NET MAUI Blazor hybrid and web app template include:

Inconsistent layout and design across platforms and devices.
Inconsistent navigation and routing system across platforms and devices.
Issues with mobile and web project configuration.
Issues with shared project configuration.
Issues with client project configuration.

Q: How do I troubleshoot issues with the .NET MAUI Blazor hybrid and web app template?

A: To troubleshoot issues with the .NET MAUI Blazor hybrid and web app template, you can use the following steps:

Check the application's logs for any error messages.
Use the built-in debugging tools in Visual Studio to debug the application.
Use the Console.WriteLine statement to print debug messages to the console.
Test the application thoroughly on multiple platforms and devices.
Consult the official documentation and online resources for the .NET MAUI Blazor hybrid and web app template.