NavigationPage Wrapping causing bug in status bar

Question

I'm experiencing a weird bug when I try to add Navigation to my CropsListPage

<?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:local="clr-Balloney.Views"
       x:Class="Balloney.Views.MainPage">

   <NavigationPage Icon="carrot.png">
    <x:Arguments>
        <local:CropListPage/>
    </x:Arguments>
   </NavigationPage> 
   <ContentPage Icon="search.png"></ContentPage>

 </TabbedPage>

And then it results in..

If I don't try to envelop it in a NavigationPage, it stays normal

Any idea what's causing this behaviour ? Before trying to hammer my way outta this and hardcoding the size of the status bar in Android, I'm looking for a way to understand the problem and prevent it. Thanks

MainPage.xaml working now

<?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:local="clr-namespace:Balloney.Views"
           x:Class="Balloney.Views.MainPage">

  <local:CropListPage Icon="carrot.png"/>
  <ContentPage Icon="search.png"></ContentPage>

</TabbedPage>

And the CropList xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Balloney.Views.CropListPage">
<ListView ItemsSource="{Binding CropsList}" ItemTapped="OnCropTapped">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <Image Source="{Binding ImageUrl}" VerticalOptions="Fill" WidthRequest="50"/>
                    <StackLayout HorizontalOptions="StartAndExpand">
                        <Label Text="{Binding Specie.Name}"/>
                        <Label Text="{Binding HarvestDate}" FontSize="Micro" TextColor="Black"/>
                    </StackLayout>
                    <Label Text="{Binding Location}" FontSize="Micro" TextColor="Chocolate" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
</ContentPage>

EDIT: The error seems to be related to the ListView I have inside CropListPage because there's no bug when I switch to the Search icon Page.

Answer 1

The extra space in your first image is the result of the NavigationPage by default showing the Navigation bar, which can be hidden.

Here's an example of how to hide it.

Answer 2

Is may be because you have wrapped crop list page in a navigation page so when that is selected you get the nav bar space above.

If you select the second tab, does the space disappear?

If you add a title to crop page does it appear in the large green space?

<?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:local="clr-namespace:Chronocrops.Views"
       x:Class="Chronocrops.Views.MainPage">

   <NavigationPage Icon="carrot.png" Title="Crop List">
    <x:Arguments>
        <local:CropListPage/>
    </x:Arguments>
   </NavigationPage> 
   <ContentPage Icon="search.png"></ContentPage>

 </TabbedPage>