如何在Xamarin.Forms页面中获取标签栏高度

Question

我在我的内容页面中显示一个图像，使其高度是页面高度的固定百分比。 我这样做是使用星形单位行高的网格。 但是，当内容页面放置在TabbedPage中时，总网格高度似乎是[屏幕减去标签栏高度]，因此图像看起来有点短。

如果我可以访问内容页面中的标签栏高度，则可以对百分比进行简单调整。

题：

1）如何在内容页面中获得标签栏高度？

2）有没有更好的方法来达到预期的效果？

Answer 1

1）如何在内容页面中获得标签栏高度？

我们无法直接从PCL获取tabbar高度。只需要TabbedRenderer的自定义渲染器

[assembly: ExportRenderer(typeof(TabbedPage), 
typeof(CustomTabbedPageRenderer))]
namespace TabbedPageWithNavigationPage.iOS
{
    class CustomTabbedPageRenderer : TabbedRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            App.TabHeight = (int)TabBar.Frame.Height;
        }
    }
}

在PCL中定义App中的TabHeight

public static int TabHeight { get; set; }

在TabbedPage获取高度

protected override void OnAppearing()
{
    base.OnAppearing();
    int height = App.TabHeight;
}

2）有没有更好的方法来达到预期的效果？

我们最好不要在Image上设置固定帧，也不应该手动操作帧。

Image Aspect可以帮助我们按照自己的意愿显示图像。

---

AspectFit

---

AspectFill

---

填

Answer 2

编辑：

我建议你获取屏幕大小并根据屏幕大小计算百分比并使用变量值而不是比例值，这样，你可以使用除AbsoluteLayout之外的其他布局，但我使用AbsoluteLayout作为我的例子：

protected override void OnAppearing()
        {
            var imageWidth = this.Width;
            var imageHeight = this.Height * 0.25;
            AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0, 0, imageWidth, imageHeight));
            AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.None);
        }

***在我的测试中，当我使用AbsoluteLayout比例法时

AbsoluteLayout.LayoutBounds = "0,0,1,0.25" AbsoluteLayout.LayoutFlags="All"

两个图像大小的结果将略有不同如果页面使用有或没有Tabbedpage

所以我建议使用后面的代码来获取基于[屏幕高度*百分比]的图像大小。

TabbedPage

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:AbsoluteLayoutExample" x:Class="AbsoluteLayoutExample.AbsoluteLayoutExamplePage">

    <ContentPage x:Name="MyPage" Title = "Page 1">
        <AbsoluteLayout> 
           <Image x:Name="image" Source="icon.png" Aspect="AspectFill" />
        </AbsoluteLayout> 
    </ContentPage>

    <ContentPage Title = "Page 2">
        <Label Text="Hello" />
    </ContentPage>

</TabbedPage>

代码隐藏：

protected override void OnAppearing()
{
    var imageWidth = this.Width;
    var imageHeight = this.Height * 0.25;
    AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0,0,imageWidth,imageHeight));
    AbsoluteLayout.SetLayoutFlags(image,AbsoluteLayoutFlags.None);
}

仅限内容页面：

XAML：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage Padding="0,20,0,0"
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:ContentPageWidthAndHieght" 
    x:Class="ContentPageWidthAndHieght.ContentPageWidthAndHieghtPage">
    <AbsoluteLayout>
         <Image x:Name="image" Source="icon.png" Aspect="AspectFill"/>
    </AbsoluteLayout>
</ContentPage>

代码隐藏：

protected override void OnAppearing()
{
    var imageWidth = this.Width;
    var imageHeight = this.Height * 0.25;
    AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0, 0, imageWidth, imageHeight));
    AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.None);
}