NavigationPage Wrapping导致状态栏

时间:2018-01-07 20:42:09

标签: xaml xamarin.forms navigation

当我尝试将Navigation添加到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>

然后它会导致..

enter image description here

如果我不尝试将其包裹在NavigationPage中,则保持正常

enter image description here

知道造成这种行为的原因是什么?在尝试克服我的方式并硬编码Android中状态栏的大小之前,我正在寻找一种方法来理解问题并防止它出现。感谢

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

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

</TabbedPage>

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>

编辑:错误似乎与我ListView内的CropListPage有关,因为切换到{{1}时没有错误}页面。

enter image description here

2 个答案:

答案 0 :(得分:4)

第一张图片中的额外空间是NavigationPage默认显示导航栏的结果,可以隐藏。

Here's一个如何隐藏它的例子。

答案 1 :(得分:1)

可能是因为您已在导航页面中包裹裁剪列表页面,因此当选择该页面时,您将获得上方的导航栏空间。

如果选择第二个标签,空格是否会消失?

如果您为裁剪页面添加标题,它是否会显示在较大的绿色空间中?

<?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>