Shell Back Button Visibility on iOS

[tomeverin]

Hi All,

I'm using TabBar with Shell, like:

<TabBar Route="tabs">
        <Tab Title="Browse" Route="browse" Icon="tab_browse">
            <ShellContent ContentTemplate="{DataTemplate local:BrowsePage}"/>
        </Tab>
...
</TabBar>

I'm using BackButtonBehaviour in my BrowsePage:

<Shell.BackButtonBehavior>
        <BackButtonBehavior ....

That's working well on Android. On iOS the back button is not visible.

Is there a way to make the back button visible on iOS in this context?

[PureWeen]

@tomeverin that sounds like a bug :-/

There are a bunch of changes to backbuttonbehavior that are part of the next 4.8 release. Can you test once that's out and let me know if you're still having issues?

[tomeverin]

Oh great!

The repro is so super simple.

1. Visual Studio -> Create new Xamarin.Forms Shell project (standard to-do list template)
2. Add the following to ItemsPage.xaml

<Shell.BackButtonBehavior>
        <BackButtonBehavior Command="{Binding LoadItemsCommand}" IconOverride="tab_about.png"></BackButtonBehavior>
</Shell.BackButtonBehavior>
<!--Note: the command binding must be a valid ViewModel command property that actually exists, otherwise back button is invisible.-->

3. Run on Android and iOS emulators: On Android the button is visible, On iOS the button is not visible

If you've got a 4.8 setup running would you mind checking whether this is still a problem on 4.8? Otherwise let me know and I'll clone the latest Xamarin.Forms and do this test.

If it's still a problem I can post this as a new Issue.

---

For what it's worth I think this behaviour is because the back stack is empty, and that only seems to matter on iOS. If I add the same xaml above to ItemDetailPage.xaml then the back button shows up on that page as desired on both Android and iOS. That supports the hypothesis because the ItemDetailPage page is shown after being pushed onto the navigation stack; thus the stack is no longer empty.

I have no idea how this is implemented underneath, but my naive attempt was to insert a dummy page in the back stack as a workaround to make the back button visible on iOS, but couldn't get that to work. E.g. I tried: this.Navigation.InsertPageBefore(...); on the ContentPage codebehind, and Shell.Current.Navigation.InsertPageBefore(...); - but couldn't get these to work.

[tomeverin]

Successful workaround...
On the ContentPage: it looks like setting FlyoutBehaviour="Flyout" , and setting a BackButtonBehaviour as above results in:

1. No Flyout on that ContentPage
2. Visible back button with desired Command on tap
3. No flyout on other pages in the tab set

True for both Android and iOS.

This doesn't seem intuitive for what these two properties represent :/ I guess there may be some changes in 4.8?