Irritating blank space between Title Bar and Tabs in Xamarin.Forms UWP project

问题:

I'm practically new to Xamarin.Forms and I'm developing a rather simple cross-platform application. The app displays good enough in Android, but in UWP there is a stupid blank space. The project consists of a TabbedPage with 4 NavigationPages inside it, in order to push and pop pages inside them.

After a little digging into UWP platform specifics, I was able to change the style of my tabs. I've been looking 3 days now for a solution, and it's driving me crazy. The only solution that I have found so far (with the help of Live Visual Tree from VS 2015), is to change the Visibility property to "Collapsed" from a CommandBar (as shown in the 3rd attached photo). But that's not a solution, because it dissapears, only at runtime.

Can anyone help? Thanks in advance.

Android View, UWP View, Live Visual Tree

EDIT: My MainPage.xaml code is the following:

<?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:_TIF_Xamarin;assembly=_TIF_Xamarin"             x:Class="_TIF_Xamarin.MainPage">    <!--4 different tabs, which also are Navigation Pages-->   <NavigationPage Title="Home">     <x:Arguments>       <local:HomePage />     </x:Arguments>   </NavigationPage>    <NavigationPage Title="Exhibitor">     <x:Arguments>       <local:ExhibitorsPage />     </x:Arguments>   </NavigationPage>    <NavigationPage Title="Exhibits">     <x:Arguments>       <local:ExhibitsPage />     </x:Arguments>   </NavigationPage>    <NavigationPage Title="More">     <x:Arguments>       <local:MorePage />     </x:Arguments>   </NavigationPage>  </TabbedPage>  

回答1:

You need to create a custom TabbedPage and then a UWP renderer for it.

First you create a CustomTabbedPage in the PCL:

public class CustomTabbedPage : TabbedPage { } 

In your XAML, use this CustomTabbedPage instead of the TabbedPage. All behavior and UI will stay the same on all platforms.

Now you create a renderer in the UWP project:

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]  namespace App.UWP {      public class CustomTabbedPageRenderer : TabbedPageRenderer     {         protected override void OnElementChanged(VisualElementChangedEventArgs e)         {             base.OnElementChanged(e);             Control.TitleVisibility = Windows.UI.Xaml.Visibility.Collapsed;         }     } } 

We use the FormsPivot.TitleVisibility to hide the Title area.

文章来源: Irritating blank space between Title Bar and Tabs in Xamarin.Forms UWP project