PelinKonaray avatar image
0 Votes"
PelinKonaray asked WenyanZhang-MSFT edited

AppShell render issue in .net maui

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:

Thanks in advanced.

android.gif (1.4 MiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I run your sample, but I can't go to the shell page when I click the login button on iOS. Are there any tips to skip this action? Please take care to post your security information.

0 Votes 0 ·

Hi @WenyanZhang-MSFT, there is not any tips to skip login. Login button for only simulation. I didn't do any implementation. I just added the rule that username and password should not be empty. You can any string to username and password and click login. Then you will be able to get past the login page.
There was a breakpoint on a page I navigated. Sometimes the vs 2022 preview doesn't fall into the breakpoint and it doesn't continue. That could be a problem.
But I still checked it and added to github. You can access app from there : MauiTestApp

0 Votes 0 ·

1 Answer

WenyanZhang-MSFT avatar image
0 Votes"
WenyanZhang-MSFT answered WenyanZhang-MSFT edited

Hello @PelinKonaray ,

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 Docs

 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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.