CODEWITHSUNDEEP
c#maui.net-maui.shell
Álvaro García
Álvaro García

Reputation: 19356

How to navigate to a tabbed page in an Android MAUI application?

I have an application that has two pages. The main page, it is not a tabbed page, and have a button to navigate to the second page, that it is a tabbed page with two sub pages.

The main page is the main application and the second page is the configuration page. This configuration page has in the first tab a page for setting the user data and a second tab, that has a page to configure another settings.

When I click in the button in the main page to navigation to the configuration page, I get an exception:

'No view found for id 0x7f080144 (com.companyname.navigatetotabbedpage:id/navigationlayout_toptabs) for fragment ViewFragment{bfd0a32} (bac519b5-33dc-483e-8124-aff189fabf28 id=0x7f080144)'

This is the code of the application:

AppShell:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NavigateToTabbedPage.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NavigateToTabbedPage.Views"
    Shell.FlyoutBehavior="Disabled">
    
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainView}"
        Route="MainPage" />
    
</Shell>

AppShell.xaml.cs

using NavigateToTabbedPage.Views;
    
namespace NavigateToTabbedPage;
    
public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
       
        Routing.RegisterRoute(nameof(GeneralConfigurationView), typeof(GeneralConfigurationView));
    }
}

Main View:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigateToTabbedPage.Views.MainView"
             Title="MainView">
    <VerticalStackLayout>
        <Button Text="Configuration" Clicked="Button_Clicked"/>
    </VerticalStackLayout>
</ContentPage>

MainView.xaml.cs

namespace NavigateToTabbedPage.Views;

public partial class MainView : ContentPage
{
    public MainView()
    {
        InitializeComponent();
    }
    
    private void Button_Clicked(object sender, EventArgs e)
    {
        Shell.Current.GoToAsync(nameof(GeneralConfigurationView));
    }
}

GeneralConfigurationView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="NavigateToTabbedPage.Views.GeneralConfigurationView"
            xmlns:local="clr-namespace:NavigateToTabbedPage.Views"
            Title="GeneralConfigurationView">
    
    <local:UserConfigurationView/>
    <local:OtherSettingsConfigurationView/>
    
</TabbedPage>

UserConfigurationView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigateToTabbedPage.Views.UserConfigurationView"
             Title="UserConfigurationView">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

OhterSettingsConfigurationView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigateToTabbedPage.Views.OtherSettingsConfigurationView"
             Title="OtherSettingsConfigurationView">
    <VerticalStackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentPage>

How could I create page with two tabs and navigate to it from a main page?

Upvotes: 0

Views: 1162

Answers (2)

Vishva Vijay
Vishva Vijay

Reputation: 438

Here is the way to navigate to a TabbedPage from ContentPage.

 Shell.Current.Navigation.PushModalAsync(new MyTabbedPage(), true);

Upvotes: 1

Julian
Julian

Reputation: 8856

You cannot use TabbedPage together with MAUI Shell. See the link for the documentation where it clearly states:

"TabbedPage is incompatible with .NET MAUI Shell apps, and an exception will be thrown if you attempt to use TabbedPage in a Shell app."

Note: You may be able to work around this by setting the App.MainPage to a TabbedPage or to AppShell depending on the context. The incompatibility only exists when using a TabbedPage together with Shell.

Upvotes: 1

Related Questions