Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,294 questions
Why does the Shell lose its styling when I navigate from a modal page?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(83.2, 25%, 18%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EE%3C/text%3E%3C/svg%3E)
EasyGoingPat
261
Reputation points
130047-shell-example-code.txt
I 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:
- The home screen when the application starts up.
- The first NON-MODAL child screen. (Going back to the home screen from here displays fine.)
- The second MODAL child screen.
- 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
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(281.6, 23%, 37%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EKW%3C/text%3E%3C/svg%3E)
Kyle Wang 5,531 Reputation points2021-09-07T06:43:44.183+00:00 @EasyGoingPat 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.
-
EasyGoingPat 261 Reputation points
2021-09-07T11:07:23.177+00:00 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.
-
Kyle Wang 5,531 Reputation points
2021-09-08T01:43:55.663+00:00 @EasyGoingPat Another way, you can post your code file as attachment.
-
EasyGoingPat 261 Reputation points
2021-09-08T07:46:25.243+00:00 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.
-
Kyle Wang 5,531 Reputation points
2021-09-08T08:38:22.133+00:00 @EasyGoingPat For this issue, you can submit an issue on GItHub: xamarin/Xamarin.Forms.
-
EasyGoingPat 261 Reputation points
2021-09-14T08:21:33.327+00:00
Sign in to comment