Shell Navigation in MAUI Class Library

Question

Hi,

I am using the below code to set a MainPage for an app from a MAUI class library.

void GoTo()  
{  
    var label = new Label  
    {  
        Text = "Sign IN to our app",  
        TextColor = Colors.Red,  
        FontAttributes = FontAttributes.Bold,  
        FontSize = 30  
    };  
  
    var button = new Button  
    {  
        Text = "Let's Go",  
        FontAttributes = FontAttributes.Bold,  
        FontSize = 30,  
    };  
  
    button.Clicked += OnButtonClicked;  
  
    var layout = new StackLayout();  
  
    layout.Children.Add(label);  
    layout.Children.Add(button);  
  
    Content = layout;  
}  

But now I want to show the same as a Popup using Shell Navigation.

Shell.Current.GoToAsync("layout", true);  

I tried to change the Content = layout to Shell but it just showed me a blank page.

Kindly help..

Thanks,
Jassim

Answer 1

Hi @Jassim Al Rahma

By saying Shell.Current.GoToAsync("layout", true); what you mean is go to a XAML Page by the name "layout" such as layout.xaml, and therefore unsure what you try to do here. "layout" in your code is a content that is contained in a StackLayout but shown as a XAML Page name with Shell.Current.GoToAsync(). Are you using the same name for these two different things, content and Page?

You may also need to register the Routing of that Page in AppShell.xaml.cs, for instance as Routing.RegisterRoute(nameof(YourXamlPage), typeof(YourXamlPage)); where YourXamlPage is where you want to navigate to (as explained above lacks clarity in your code as to whether "layout" is content to assign to current page, or a XAML Page to navigate to).

Answer 2

Hello @Jassim Al Rahma ,

If you want to use Shell.Current.GoToAsync("layout", true); to navigate a new page, it means this page has to be registered as the route layout.
For more details, you can refer to .NET MAUI Shell navigation - .NET MAUI | Microsoft Learn

but my Page (XAML) is in a Class Library, is it possible to RegisterRoute inside a library?

Yes, you can create the page in your Library, and you can also register route inside this library. However, you should ensure that the Route is registered before triggering the navigation action( before calling Shell.Current.GoToAsync("layout", true); ).

I create the XAML inside the library but RegisterRoute in my App where the library is used?

It still works. Please pay attention to the namespace.

In addition , as @dg2k said, content and Page are different, Content is the property of ContentPage, Shell.Current.GoToAsync("layout", true); will navigate to a page whose route is layout.

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.