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

Question

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>

Could you please post the Xamarin.Forms XAML layout you are using for the page? — Martin Zikmund

Martin Zikmund Martin Zikmund · Accepted Answer · 2016-11-26T11:14:04

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

1 Answers