shellpopupmaui

How could I execute arbitrary code from an appShell command button (instead of showing a view)?


I have an appShell like this:

<?xml version="1.0" encoding="UTF-8" ?>

    .......

    <TabBar
        x:Name="MyTabBar"
        Route="Home"
        >
        
        <Tab
            x:Name="tabExpenseReports"
            ....>

            <ShellContent
                x:Name="Pending"
                ..../>
            

            <ShellContent
                x:Name="Finalized"
                ..../>
        </Tab>

        <Tab
            x:Name="tabApprovals"
            ....>

            <ShellContent
                x:Name="Approvals"
                .... />

            <ShellContent
                x:Name="Approved"
                ..../>
        </Tab>

        <Tab
            x:Name="tabSettings"
            Title="{Binding LocalizationResourceManager[Settings], Mode=OneWay}"
            Icon="user"
            Shell.BackgroundColor="#193300">

            <ShellContent ContentTemplate="{DataTemplate Settings:Settings}" Route="Settings" />
        </Tab>
    </TabBar>
</Shell>

So I have three tabs - tabExpenseReports, tabApprovals, and tabSettings.

I have been asked to not show the view "Settings" on the last tab, tabSettings, but instead just show some popup with some info and some links to other pages. So now I have to execute some code (to show the popup) instead of going to my Settings page as per

<ShellContent ContentTemplate="{DataTemplate Settings:Settings}" Route="Settings" />

How would I do that ? I have the popup coded, it looks great (using the Mopups library), but I still have to show it on top on whatever view the user was viewing by using the command button which was meant to call my appShell Settings route.

Is this at all possible ? 'Cause, otherwise, I don't know how to do that (to show the settings from anywhere in the app, as a popup).

PS. My tabbar currently looks like this: enter image description here

Thank you.


Solution

  • Shell navigation can be intercepted by overriding OnNavigating method in AppShell.xaml.cs.

    Suppose you set the Route="Settings" for the Settings ContentPage, and you may use the following code to cancel navigation,

        protected override void OnNavigating(ShellNavigatingEventArgs args)
        {
            base.OnNavigating(args);
    
            if(args.Target.Location.OriginalString.Contains("Settings"))
            {
                args.Cancel();
                //display popup
            }
        }
    

    In this way, it will not navigate to setting page when clicking the tab and you could display a popup.

    For more info, you may refer to .NET MAUI Shell navigation.