AppShell render issue in .net maui

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.

Also, I have 6 pages that I show in the left menu, all of these pages use the same template (FileSystemPage). (The pages I showed in the left menu - using the same template are: My folder page, private folders, public folders, team folders, my shareds, inbox)
All of them different pages, but they use same template. I want to show them as FlyoutItem in AppShell. In addition, these pages have some folders and files. If I I click a folder inside these pages, I am navigating next page that have same template.

I prepare a sample application for this. It works successfully on android (as seen in the gif below.)

But when I chage pages from left menu in ios, the title is not updating properly. I didn't understand why.

I added ShellContents as manually to AppShell->FlyoutItem in the c# (in AppShell.xaml.cs) And I added page as "Content" in ShellContet. And I'm sending the title text here. However, there is a problem when rendering the page on iOS.

Why could this be?
My sample app link is following: https://drive.google.com/file/d/1YloferBw8KCfFoaSoC-kLH-RAy1OlHwg/view?usp=sharing

Thanks in advanced.

Answer

Hello @Pelin Konaray ,

You add a number of ShellContent for flname and they all point to the FileSystemPage, but you haven't set the unique Route for each item. For more details, refer to .NET MAUI Shell navigation - .NET MAUI | Microsoft Learn

Routing.RegisterRoute("My Folder" + nameof(FileSystemPage), typeof(FileSystemPage));  
 Routing.RegisterRoute("Private Network Folder" + nameof(FileSystemPage), typeof(FileSystemPage));  
 Routing.RegisterRoute("Public Network Folder" + nameof(FileSystemPage), typeof(FileSystemPage));// register route for each detailed item      
......   

flname.Items.Add(new ShellContent() {Route = "My Folder", Title = "My Folder", Content = new FileSystemPage(new FileSystemPageViewModel() {...}) });//pay attention to setting the Title for ShellContent  
flname.Items.Add(new ShellContent() { Route = "Private Network Folder", Title = "Private Network Folder", Content = new FileSystemPage(new FileSystemPageViewModel() { ... }) });  
......

Tips: Please do the same for Team Folder, My Shared and so on.
Then you can replace the route with the route registered above, they are all "Second" before. ( It also works if they push to "Second")

await Shell.Current.GoToAsync($"{Title}{nameof(FileSystemPage)}?Title= ...);

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.

Share via

AppShell render issue in .net maui

1 answer

Your answer