How to get the tab bar height in a Xamarin.Forms page

Question

I'm displaying an image within my content pages such that its height is a fixed percentage of the page height. I do this using a grid with star unit row height. However, when the content pages are placed within a TabbedPage, the total grid height seems to be that of [the screen minus the tab bar height], so as a consequence, the image appears a bit shorter.

If I could access the tab bar height within my content pages, it would be a simple adjustment to the percentage.

Question:

1) How do I get the tab bar height within a content page?

2) Is there a better way to achieve the desired result?

Answer 1

1) How do I get the tab bar height within a content page?

We can't get tabbar height from PCL directly.Just need a custom renderers for 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;
        }
    }
}

Define TabHeight in App in PCL

public static int TabHeight { get; set; }

Get the height in TabbedPage

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

2) Is there a better way to achieve the desired result?

We'r better not set the fixed frame on Image, and should not operate the frame manually .

Aspect of Image can help us to show the image as we want.

---

AspectFit

---

AspectFill

---

Fill

Answer 2

Edited:

I would suggest you to get the screen size and calculate the percentage based on screen size and use the variable value instead of proportional value, in this way, you could use other the layout other than AbsoluteLayout, but I am using AbsoluteLayout for my example:

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

*** In my test, when I used AbsoluteLayout proportional method

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

the outcome of both image size will have slightly different If the page use with or without Tabbedpage

So I suggest to use code behind to get the image size based on the [screen height * percentage].

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>

CodeBehind:

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

Content Page only:

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>

Code-Behind:

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