Xamarin.forms: [Bug] Shell - Navigation.PushAsync - Navigation Bar ignored on iOS

[bridgesquared]

Description

I created a new Xamarin Forms project using the Shell Template. From the ItemsPage, when navigating to the detail page using await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item))) the detail ContentPage ignores the Shell Navigation Bar on iOS.

Steps to Reproduce

1. Create new Mobile App (Xamarin Forms) project in Visual Studio (Windows) 16.1.3
2. Select 'Shell' template
3. Run solution (iOS + Android)
4. Click an item in the 'Browse' screen

Expected Behavior

I expected the Item Detail page to respect the page boundaries and show all content below the Navigation Bar

Actual Behavior

On iOS the top of the Item Detail page is displayed underneath (hidden by) the Navigation Bar.

Comments

I tried changing the code to use a registered route and to use the Shell.Current.GotoAsync("itemdetail") approach but this also failed to show the page correctly.

As an aside, I note that the 'Add' function uses await Navigation.PushModalAsync(new NavigationPage(new NewItemPage())) to show a navigation bar for the user to back out of the modal dialog, it seems to me that under the shell model the NavigationPage shouldn't be needed, the target page should have to opt out of the shell navigation bar using Shell.NavBarIsVisible="false".

Please can we have detailed guidance on how to handle these options when using Shell.

Basic Information

• Version with issue: 4.0.0.425677
• Last known good version: n/a
• IDE: Visual Studio Pro (WindowS) 2019 v 16.1.3
• Platform Target Frameworks:
  
  
  
  • iOS: 12.2
  
  
  • Android: 9.0 - API 28
  
  
• Android Support Library Version: ?
• Nuget Packages: 4.0.0.425677
• Affected Devices: Running in Simulators (though checked iOS device and same issue)

Same behaviour seen on 4.1.0 pre2

Screenshots

[samhouts]

@bridgesquared Can you please attach a small project that demonstrates this issue? Thanks!

[bridgesquared]

Hi @samhouts

Do you really need a repro? If you follow the repro steps above and create a new Xamarin Forms project using the Shell template and then run against iOS you'll see the problem.

I can certainly attach a project but I'm not sure of the best way of doing that without leaking credentials because of the need to link the project to my provisioning profiles. If you can give me some guidance here that would really help.

Look forward to hearing from you. Thanks.

[samhouts]

@bridgesquared It always helps to have a project already put together for us. It speeds up the process considerably and lets us work from a common standpoint. You don't need to link your provisioning profiles. Thanks!

[bridgesquared]

@samhouts No problem, here you are, I've stripped out the obj + bin folders, but you should be able to restore and build happily. Let me know how you get on. Thanks.

App6.zip

[samhouts]

@bridgesquared Aha! It looks like we need to update the templates. It should be using SafeArea, and it is not.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout

Thanks!

[bridgesquared]

@samhouts Thanks for the response, I can confirm that ios:Page.UseSafeArea="true" 'solves' the problem but I wonder whether it's really just a workaround for an inconsitency with the Shell?

For the ItemsPage, declared in the AppShell.xaml

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
...
    <TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
        <Tab Title="About" Icon="tab_about.png">
            <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
        </Tab>
    </TabBar>
...
</Shell>

there's no need for SafeArea and the Shell renders the page properly with a NavigationBar and the content respects the SafeArea without the need for an explicit declaration ;-)

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             ...
             x:Class="App4.Views.ItemsPage"
             Title="{Binding Title}"
             x:Name="BrowseItemsPage">
...
</ContentPage>

Yet when we go to the detail page,

            await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));

we have to opt in to the SafeArea to get it to render properly on iOS:

<ContentPage x:Class="App4.Views.ItemDetailPage"
            ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             ios:Page.UseSafeArea="true">
...
</ContentPage>

I can understand that this might be due to limitations of mixing the new Shell approach with legacy navigation (I have to admit I'm new to Forms so have only a limited knowledge of the nuances) but I wonder whether Shell provides a real opportunity to address some of the technical debt?

My perspective is that I'm opting in to the Shell and its UI style and as a result would like to do all my navigation through its model and in return I would expect it to take care of ensuring my content renders appropriately, within that UI model, on all devices. Whether that means using something like:

Shell.Current.Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)))

or

Shell.Current.RegisterRoute("browse/detail", typeof(ItemDetailPage));
...
Shell.Current.PushAsync("detail");

At the end it's probably a moot point in that it's pretty straightforward to subclass ContentPage and add SafeArea as a default, but I have to admit that I've been hoping that the Shell could provide a unified navigation framework for LoB Forms apps and to do that it will need to handle all the standard navigation variations. And if you can bring the Shell model to UWP as well you might open up the possibility of a true write-once run-anywhere experience.

Thanks for your help and keep up the good work.

[jameshowey]

Note that the bottom of the page will render under the chrome also in this scenario. Any fix will likely fix this too, but something to check.

[samhouts]

but I wonder whether it's really just a workaround for an inconsitency with the Shell?

It sure is! And we're working on it, too. https://github.com/xamarin/Xamarin.Forms/pull/6457

Thanks!