Xamarin Forms Secondary ToolbarItem in TabbedPage on iOS

Question

My App behaves very strange on iOS, I have a TabPage with 3 Tabs. On the first image you can see that I have 4 Secondary ToolbarItems on the first Tab. The strange thing is on the Page with the Map where I don't have a Secondary ToolbarItem, the space between NavigationBar an Map is still there. Does anybody know how to fix this or if this is a Bug of Xamarin?

NavPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:view="clr-namespace:CarPar.View;assembly=CarPar"
            x:Class="CarPar.Navigation.NavPage"
            Title = "{Binding PageTitle}">

  <view:HomePage />
  <view:MapPage />
  <view:FavoritePage />

</TabbedPage>

HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:view="clr-namespace:CarPar.View;assembly=CarPar"
             x:Class="CarPar.View.HomePage"
             Title="City"
             Icon="home.png">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Alphabetisch" />
        <ToolbarItem Text="Freie Plätze" />
        <ToolbarItem Text="Prozent frei" />
        <ToolbarItem Text="Entfernung" />
    </ContentPage.ToolbarItems>
    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <SearchBar Placeholder="Parkhaus suchen" Text="{Binding SearchText}" />
    ...
    <StackLayout>
</ContentPage>

MapPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
             x:Class="CarPar.View.MapPage"
             Title="Karte"
             Icon="map.png">
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <maps:Map x:Name="ParkingMap"
          IsShowingUser="True"
          MapType="Street"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

It seems obvious; the toolbar items are part of your `HomePage.xaml` and by pressing the Map tab you effectively switch to the `MapPage.xaml` which does not have toolbar items. — Gerald Versluis, Apr 04 '17 at 11:44
@GeraldVersluis That's the point. There is no toolbar items but the space between the header and the map is still there and that's the problem. — zperee, Apr 04 '17 at 11:50
Does the app do the same in Android? or is it effectively something iOS specific? — Enrique Zavaleta, Apr 04 '17 at 14:07
@EnriqueZavaleta No it's only in iOS. In Android the secondary toolbar isn't under the header, so there is no problem with space. — zperee, Apr 04 '17 at 14:10
How are you creating that secondary toolbar exactly? Is it done with a custom renderer? If so, could you add the renderer code to your question? — Tim Klingeleers, May 04 '17 at 17:57
No, there is no custom renderer. They are created just with the xaml code — zperee, May 06 '17 at 12:36

score 1 · Answer 1 · answered May 09 '17 at 14:56

You create the toolbar items in the first 'viewcontroller' you push onto the tab bars stack. these become instantiated as part of the navigation controller. So when you load your second page that doesn't have any information to pass to the tool bar, it doesn't display but is technically still part of the view, so it renders the space at the top, I believe there are a few ways to stop this behavior, the first relays on you using AutoLayout.

    public MySecondPage()
    {
        InitializeComponent();
        NavigationPage.SetHasNavigationBar(this, false);  // Hide nav bar
    }

If this doesn't work let me know, there are other less neat options.

Xamarin Forms Secondary ToolbarItem in TabbedPage on iOS

1 Answers1