Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin Forms Secondary ToolbarItem in TabbedPage on iOS

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>
like image 296
zperee Avatar asked Nov 08 '22 23:11

zperee


1 Answers

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.

like image 136
JoeTomks Avatar answered Dec 28 '22 08:12

JoeTomks