Customize menu and back icon in the AppShell

Question

I have an application where I have files and folders listed and I can navigate through the folders. I'm trying to moving this app to .net maui now.
For now, I haven't done the listing of files and folders, but I'm trying to prepare the AppShell navigation structure in general.

I named my page where I list files and folders as FileSystemPage. Normally files and folders will be listed here. When a folder name is clicked, the files/folders in that folder will be listed. I put a button inside the page to simulate the click event of a folder in this page. When I press this button, it opens the same page again.

While doing these steps, I want to customize menu and back icons in navbar.
Although I can't customize it, at least I want it to work on ios as well as on android. Because in addition to the back button in iOS, the title information of the page is written next to the back button. as in the screenshot below.

I tried to set back button icon in the xaml part.

<Shell.BackButtonBehavior>  
     <BackButtonBehavior IconOverride="back.png" TextOverride=" "/>  
</Shell.BackButtonBehavior>  

But if I do this, I am facing 2 problems. These problems:

1. I show the back icon where I should show the menu icon.
2. On the page where I need to show the back icon, it shows the old version for a very short time, like 1 second. The sample image is in the gif below.
   

I tried to set back and menu icons in the c# part. (in the OnNavigatedTo event)

protected override void OnNavigatedTo(NavigatedToEventArgs args)  
        {  
            base.OnNavigatedTo(args);  
      
            if (FileSystemPageVM.NavigationInfo != null)  
            {  
                Shell.SetBackButtonBehavior(this, new BackButtonBehavior  
                {  
                    IconOverride = !string.IsNullOrWhiteSpace(FileSystemPageVM.NavigationInfo.DirectoryPath) ? "back.png" : "menu.png"  
                });  
            }  
        }  

But if I do this, I am facing 1 problem. This problem is:

1. On the page where I need to show the back icon, it shows the old version for a very short time, like 1 second. (As in the above gif)

If I have 2 different pages like listing page and detail page and I set always show back icon on detail page, it works fine. But what I want to do is to show the menu icon and sometimes the back icon on the same page and customize these icons. In this case, things get messy. (I know what I want is a bit complex, but this is what I need.)

How can I handle this?
Thank you in advanced.

Answer 1

Hello,

Referring to this official documentation: .NET MAUI Shell navigation, we could find the following description:

Navigation is performed by invoking the GoToAsync method, from the Shell class. When navigation is about to be performed, the Navigating event is fired, and the Navigated event is fired when navigation completes.

Therefore, you could use Navigating event to control the icon you want to display.

You could open AppShell.xaml.cs file, then append the following code after InitializeComponent();:

   this.Navigating += (sender, e) => {  
       Shell s = sender as Shell;  
       var item = s.CurrentItem;  
       if(//the condition of menu or back you want to display)  
       {  
       }  
       else  
       {  
           s.FlyoutIcon = "back.png";  
       }  
   };  

Best Regards,

Alec Liu.

---

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.