question

PatrickRyder avatar image
0 Votes"
PatrickRyder asked PatrickRyder commented

Why does the Shell lose its styling when I navigate from a modal page?

130047-shell-example-code.txt129651-image-1.png129569-image-2.png129570-image-3.png129604-image-4.pngI have an application that has a requirement that I would have thought straightforward for the new Shell but is causing no end of problems.

I have some 'top-level' pages that can be freely navigated between using a TabBar.

One of these top-level pages, has a chain of children that are not part of the TabBar. This chain is terminated by one or more screens that are required to be modal. From these modal screens, I wish to be able to jump right back to the home screen.

I have got all of this working now but when I jump back to the home screen from a modal screen, the Shell loses its styling. Note also that the flyout hamburger appears even though I am using a TabBar for top-level navigation.

The first attached image shows the layout of the navigation.

The following attached images show:

  1. The home screen when the application starts up.

  2. The first NON-MODAL child screen. (Going back to the home screen from here displays fine.)

  3. The second MODAL child screen.

  4. The home screen once I have navigated back to it from the modal screen.

The code is shown below. (THE WEBSITE BREAKS WHEN I TRY TO ADD THE CODE. I WILL KEEP TRYING.)

Can anyone explain what I am doing wrong here and how to fix it?

Kind wishes - Patrick

129622-navigation-requirements.png


dotnet-xamarinforms
image-1.png (163.2 KiB)
image-2.png (104.8 KiB)
image-3.png (124.5 KiB)
image-4.png (86.4 KiB)
· 6
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.

@PatrickRyder Could not reproduce the issue. Select the template "Tabbed" when you create the xamarin.forms project. It won't show the "hamburger" menu.

THE WEBSITE BREAKS WHEN I TRY TO ADD THE CODE. I WILL KEEP TRYING

Before submitting your edit, click "Preview" button in the upper right corner to make sure it's shown correctly in the preview area.

0 Votes 0 ·

@KyleWang-MSFT

The preview is also broken. It displays correctly until I try to add a code example and then I just get an empty box a few pixels high.

It did used to work fine. I guess something could have changed at my end but I'm not aware of anything. I could maybe attach a screenshot of the broken page.

0 Votes 0 ·

@PatrickRyder Another way, you can post your code file as attachment.

1 Vote 1 ·

@KyleWang-MSFT

I have just discovered that if I navigate from the modal page to its parent (i.e back to Child Screen One) using Shell.GotoAsync( ".." ) and then I navigate back home from there, the styling remains intact.

This is perhaps more strange because I use the exact same command - Shell.GotoAsync( "//Home" ) - to get back home from the first child and the second modal child. The former works, the latter removes the styling.

This does seem like a genuine bug. If it is something I am doing, it does seem to break the software design principle that APIs should be easy to use right and difficult to use wrong.




0 Votes 0 ·

@PatrickRyder For this issue, you can submit an issue on GItHub: xamarin/Xamarin.Forms.

0 Votes 0 ·
PatrickRyder avatar image PatrickRyder KyleWang-MSFT ·

@KyleWang-MSFT

Hi,

I have now done this.

  • Patrick

0 Votes 0 ·

0 Answers