激怒Xamarin.Forms UWP项目中标题栏和选项卡之间的空白 [英] Irritating blank space between Title Bar and Tabs in Xamarin.Forms UWP project

问题描述

我实际上是 Xamarin.Forms 的新手，并且正在开发一个相当简单的跨平台应用程序.该应用程序在Android上显示足够好，但是在UWP中有一个愚蠢的空白空间.该项目由一个TabbedPage组成，其中包含4个NavigationPages，以便在其中推送和弹出页面.

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.

在深入研究了UWP平台的细节之后，我能够更改选项卡的样式.我一直在寻找3天的解决方案，这让我发疯.到目前为止，我发现的唯一解决方案(借助VS 2015中的Live Visual Tree)是从CommandBar中将 Visibility 属性更改为"Collapsed" (如第3张所附照片所示).但这不是解决方案，因为它只会在运行时消失.

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视图，实时可视树

我的 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:_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> 

推荐答案

您需要创建一个自定义TabbedPage，然后为其创建UWP渲染器.

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

首先，您在PCL中创建一个CustomTabbedPage:

First you create a CustomTabbedPage in the PCL:

public class CustomTabbedPage : TabbedPage { }

在您的XAML中，使用此CustomTabbedPage而不是TabbedPage.所有行为和用户界面在所有平台上都将保持不变.

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

现在，您在UWP项目中创建一个渲染器:

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;
        }
    }
}

我们使用FormsPivot.TitleVisibility隐藏Title区域.

这篇关于激怒Xamarin.Forms UWP项目中标题栏和选项卡之间的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！