How to adjust the height of .NET MAUI TabView?

Overview

This article explains how to dynamically adjust the height of the .NET MAUI TabView 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, you need to 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. Here is an example of how to do this:

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

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

AdjustTabViewHeight(): This method adjusts the height of the Tab View based on the selected tab. It uses the GetContentHeight() to measure the height of the content within the selected tab.

GetContentHeight(): This method measures the height of the content within a tab. If the tab has no content, it returns a minimum height of 100.

Output

Download the complete sample on GitHub

Conclusion

Hope you enjoyed learning about how to adjust the height of .NET MAUI TabView.

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

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

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