CODEWITHSUNDEEP
c#xamarinmobilemaui.net-maui.shell
Luke Konecki
Luke Konecki

Reputation: 127

OnClicked event for MAUI Tab in Shell App

I have a MAUI Shell app that I'm working on using a TabBar. I have a header that I have created that will show on multiple tabs and direct users to a notifications page.

If the user clicks the header link it routes to the notifications page fine. The issue is if the user clicks on the currently active tab to go back to that nothing happens. I'm trying to capture an OnClick Event or something from the Tab to go back to the root or clear the notification page.

I found some people trying to solve this in Xamarin with custom renderers but I was wondering if anyone has run into or solved this issue in MAUI.

For clarification the issue I have is on a tab the user clicks a link gets routed to a new page, but clicking on that active tab again does not go back to that tab.

I cannot find an event trigger in order to add some logic to force navigation back to a tab or a page refresh.

AppShell.xaml.cs

public AppShell()
{
    InitializeComponent();

    Routing.RegisterRoute("Notifications", typeof(Notifications));
    Routing.RegisterRoute("home", typeof(MainPage));
}

AppShell.Xaml:

<TabBar>
    <Tab Title="{x:Static resources:Lang.Home}" Icon="{StaticResource HomeTab}" >
        <ShellContent Route="main" ContentTemplate="{DataTemplate local:MainPage}" />
    </Tab>

    <Tab Title="{x:Static resources:Lang.Shop}" Icon="shop.png" CurrentItem="{x:Reference partSearchPage}">
        <ShellContent Title="{x:Static resources:Lang.SearchInventory}" x:Name="inventorySearchPage" Route="inventorysearch"  ContentTemplate="{DataTemplate inv:InventorySearch}" />
    </Tab>

    <Tab Title="{x:Static resources:Lang.Cart}" Icon="{StaticResource CartTab}">
        <ShellContent Route="cart" ContentTemplate="{DataTemplate cart:CartPage}" />
    </Tab>
</TabBar>

HeaderBar.xaml.cs

private async void NotificationsClicked(object sender, EventArgs args)
{
    await Shell.Current.GoToAsync("Notifications");
}

Upvotes: 1

Views: 3068

Answers (2)

Nitika Neb
Nitika Neb

Reputation: 11

Here is the solution to your problem :-

Add the following code to your AppShell.xaml.cs file

protected override void OnNavigating(ShellNavigatingEventArgs args){

base.OnNavigating(args);

if (args.Source == ShellNavigationSource.ShellSectionChanged)
{
    var navigation = Shell.Current.Navigation;
    var pages = navigation.NavigationStack;
    for (var i = pages.Count - 1; i >= 1; i--)
    {
        navigation.RemovePage(pages[i]);
    }
}}

This will work as expected

Upvotes: 1

H.A.H.
H.A.H.

Reputation: 3917

I walked into this a while ago. It seems that this is case for Android only. Because on my IOS device, everything works as expected.

You can cycle over:

Shell.Current.Navigation.NavigationStack

Removing every page, starting from the last and skipping the first.

You can check this answer: https://stackoverflow.com/a/73924870/6643940

I do not do it exactly like that, but it is very good place to start.

Upvotes: 0

Related Questions