How to adjust the height of .NET MAUI Tab View?

Overview

This article explains how to dynamically adjust the height of the .NET MAUI Tab View control based on the content of each tab. This can be achieved by handling the SelectionChanged event to set the height request according to the content of the selected tab item.

Initialize SfTabView and Handle SelectionChanged Event

XAML

First, initialize the Syncfusion® .NET Maui TabView control and invoke the SelectionChanged event. This event will be triggered whenever the selected tab changes.

<Grid VerticalOptions="Start">
    <tabView:SfTabView x:Name="tabView" TabBarBackground="HotPink"
                       BackgroundColor="LightBlue"
                       SelectionChanged="OnSelectionChanged">

        <tabView:SfTabItem Header="Call" x:Name="call">
            <tabView:SfTabItem.Content>
                <!--TabItem Content-->
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>

        <tabView:SfTabItem Header="Contacts" x:Name="contacts">
            <tabView:SfTabItem.Content>
                <!--TabItem Content-->
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>

        <tabView:SfTabItem Header="Favourite" x:Name="favourite">
                <!--TabItem Content-->
        </tabView:SfTabItem>
    </tabView:SfTabView>
</Grid>

C#

In the SelectionChanged event, you can adjust the height of the Tab View based on the content of the newly selected tab.

public partial class MainPage : ContentPage
{
    ...
    protected override void OnAppearing()
    {
        base.OnAppearing();
        tabView.HeightRequest = GetContentHeight(call);
    }
    private void OnSelectionChanged(object sender, TabSelectionChangedEventArgs e)
    {
        AdjustTabViewHeight(e.NewIndex);
    }

    private void AdjustTabViewHeight(double selectedIndex)
    {
        switch (selectedIndex)
        {
            case 0: 
                tabView.HeightRequest = GetContentHeight(call);
                break;
            case 1: 
                tabView.HeightRequest = GetContentHeight(contacts);
                break;
            case 2: 
                tabView.HeightRequest = GetContentHeight(favourite);
                break;
            default:
                tabView.HeightRequest = 100; // Set a minimum height
                break;
        }
    }

    private double GetContentHeight(SfTabItem tabItem)
    {
        if (tabItem.Content == null)
        {
            return 100; // Set a minimum height when there is no content
        }

        return tabItem.Content.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height;
    }
}

Method Descriptions

OnAppearing(): Sets the initial height of the Tab View based on the content of the first tab.

AdjustTabViewHeight(): Adjusts the height of the TabView based on the selected tab using the GetContentHeight() method to measure the content’s height.

GetContentHeight(): Measures the height of the content within a tab. Returns a minimum height of 100 if the tab has no content.

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to adjust the height of the .NET MAUI Tab View.

You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!