Xamarin.Forms UWP 项目中标题栏和选项卡之间令人讨厌的空白

Posted

技术标签:

【中文标题】Xamarin.Forms UWP 项目中标题栏和选项卡之间令人讨厌的空白【英文标题】:Irritating blank space between Title Bar and Tabs in Xamarin.Forms UWP project 【发布时间】:2017-04-10 13:06:59 【问题描述】:

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

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

有人可以帮忙吗? 提前致谢。

Android View、UWP View、Live Visual Tree

编辑: 我的 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> 

【问题讨论】:

能否请您发布您用于页面的 Xamarin.Forms XAML 布局? 【参考方案1】:

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

首先你在 PCL 中创建一个CustomTabbedPage

public class CustomTabbedPage : TabbedPage  

在您的 XAML 中,使用此 CustomTabbedPage 而不是 TabbedPage。所有行为和 UI 在所有平台上都将保持不变。

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

[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 区域。

【讨论】:

非常感谢您的回答和您的时间。我希望避免使用自定义渲染器,但现在我可以看到它真的很有必要。我会告诉你你的建议。 我完全按照你告诉我的做了,但是在 this 行:Control.TitleVisibility = Windows.UI.Xaml.Visibility.Collapsed; VS2015 向我显示了一条错误消息:Error CS1061 'FormsPivot' 确实不包含“TitleVisibility”的定义,并且找不到接受“FormsPivot”类型的第一个参数的扩展方法“TitleVisibility”(您是否缺少 using 指令或程序集引用?) 抱歉再次打扰您 您是否可能没有从 NuGet 安装最新版本的 Xamarin.Forms?我已经检查了 Xamarin.Forms GitHub,并且该属性确实应该在那里,所以这很令人困惑 :-) - github.com/xamarin/Xamarin.Forms/blob/master/… 我非常感谢你,我的朋友。这就是问题所在,现在这个空间已经消失了。祝你有美好的一天:) 太棒了:-)!编码愉快!

以上是关于Xamarin.Forms UWP 项目中标题栏和选项卡之间令人讨厌的空白的主要内容,如果未能解决你的问题,请参考以下文章

无法在 Xamarin Forms 中启动 UWP 项目

Xamarin.Forms UWP UI 测试

Breeze# 用于 Xamarin.Forms(UWP、Droid 和 iOS)?

如何将 UWP 目标添加到现有 Xamarin Forms 项目?

Xamarin.Forms UWP 项目不会安装在 Windows 10 移动版上

Xamarin.Forms (UWP) - 如何获取 WebView 的 DOM 作为 HTML 字符串?