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中的TabHeight中定义App

public static int TabHeight { get; set; }

获取TabbedPage

中的高度

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

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

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

Aspect的{p> Image可以帮助我们按照自己的意愿展示图片。

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

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

2 个答案:

AspectFit

AspectFill

填充