• Products
  • Dashboard

No products in the cart.

  • Login
  • Register
MAUI Universe
  • Home
  • Courses
    • Creating a Beautiful Notes App in .Net Maui
  • Products
  • Membership
No Result
View All Result
  • Home
  • Courses
    • Creating a Beautiful Notes App in .Net Maui
  • Products
  • Membership
No Result
View All Result
MAUI Universe
No Result
View All Result
Home Tutorial

Register Shell Navigation in .Net MAUI (the easy way)

March 25, 2024
in Tutorial
0
Share on FacebookShare on Twitter

.NET MAUI Shell navigation is a URI-based navigation that uses routes to navigate to any page in the app. This is done without having to follow a set navigation hierarchy.

To register a route to navigate to a page called PageTwo.xaml, the code will look like this:

Routing.RegisterRoute("PageTwo", typeof(PageTwo));

However, my preferred method is to use the name of the page, so the code will follow this pattern to avoid magic strings flying around in the code

Routing.RegisterRoute(nameof(PageTwo), typeof(PageTwo));

THE PROBLEM

Now, consider having over fifty (50) pages in your application and you are using shell to handle the navigation. It means that you will have over fifty repeated lines of code to register the pages one after the other like this.

Routing.RegisterRoute(nameof(PageTwo), typeof(PageTwo));
Routing.RegisterRoute(nameof(PageThree), typeof(PageThree));
Routing.RegisterRoute(nameof(PageFour), typeof(PageFour));
//.......More Page.........
Routing.RegisterRoute(nameof(PageTwentyNine), typeof(PageTwentyNine));
Routing.RegisterRoute(nameof(PageThirty), typeof(PageThirty));
//.......More Page.........
Routing.RegisterRoute(nameof(PageFifty), typeof(PageFifty));
Routing.RegisterRoute(nameof(PageFiftyOne), typeof(PageFiftyOne));

There should be a better way, right?

THE SOLUTION

The solution contains just a few steps.

Step 1

Ensure that the Shell (AppShell.xaml or whatever name you call it) is in the same folder (namespace) as the rest of the pages you want to register.

Step 2

Create an extension method in a class somewhere in your code (depending on how you structure your project) to scan for all the Types in that namespace and register each of them other than the shell that called the extension method.

public static void RegisterRoutes(this Shell shell)
{
    var assembly = shell.GetType().Assembly;

    var types = assembly.GetTypes().Where(t => string.Equals(t.Namespace, shell.GetType().Namespace, StringComparison.Ordinal) 
                                                            && t != shell.GetType()).ToArray();

    foreach ( var type in types) 
        Routing.RegisterRoute(type.Name, type);
}

Step 3

In the constructor of the Shell (AppShell.xaml or whatever name you call it), call the extension method that you have just created.

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
        this.RegisterRoutes();
    }
}

You can check out this video to see how this was implemented;

Previous Post

Source Code: How to Set Status Bar Color in .Net MAUIĀ 

Next Post

Source Code: Implementing Dependency Injection the easy way in .Net MAUI

Next Post

Source Code: Implementing Dependency Injection the easy way in .Net MAUI

Please login to join discussion
  • Trending
  • Comments
  • Latest

Source Code: Property App in .Net MAUI

February 23, 2024

A. Creating Beautiful Notes App in .Net MAUI | Project Structure

February 22, 2024 - Updated on February 26, 2024

B. Staggered List in .Net MAUI

February 22, 2024

Register Shell Navigation in .Net MAUI (the easy way)

March 25, 2024

B. Staggered List in .Net MAUI

4
Best Web Hosting Services

Best Web Hosting Services for your Website

1
Getting Started With .Net MAUI

Getting Started With .Net MAUI

0
Create a WordPress Website

Create A WordPress Website in 2023

0

How To Implement Google User Messaging Platform (UMP) SDK In .Net Maui

December 20, 2024

Source Code: Implementing Dependency Injection the easy way in .Net MAUI

April 1, 2024

Register Shell Navigation in .Net MAUI (the easy way)

March 25, 2024

Source Code: How to Set Status Bar Color in .Net MAUIĀ 

March 18, 2024
  • Privacy Policy
  • Refund & Returns Policy

Maui Universe - Your technology universe.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Home
  • Courses
    • Creating a Beautiful Notes App in .Net Maui
  • Products
  • Membership

Maui Universe - Your technology universe.

Are you sure want to unlock this post?
Unlock left : 0
Are you sure want to cancel subscription?