How to customize the tab header height in Xamarin.Forms SfTabView ?

2 mins read

Whenever the Xamarin.Forms SfTabView is initialized, the tab header is loaded with the default height. To change the tab header height, use the “TabHeight” property.

The following steps explain how to reduce/increase the tab header height in Xamarin.Forms SfTabView.

Step 1: Create an app using Xamarin.Forms SfTabView with all the required assemblies.

Step 2: Set TabHeight when initializing Xamarin.Forms SfTabView. In the following code example, tab header height is set to 30.

<Grid Padding="20">
    <tabView:SfTabView BackgroundColor="LightGray" x:Name="tabview" TabHeight="30" VisibleHeaderCount="3">
        <tabView:SfTabItem Title="Tab 1">
            <tabView:SfTabItem.Content>
                <Grid Padding="10" BackgroundColor="LightCyan" HorizontalOptions="Center" VerticalOptions="Center">
                    <Label Text="TabItem height is 50"/>
                </Grid>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <tabView:SfTabItem Title="Tab 2">
            <tabView:SfTabItem.Content>
                <Grid Padding="10" BackgroundColor="LightCyan" HorizontalOptions="Center" VerticalOptions="Center">
                    <Label Text="TabItem height is 50"/>
                </Grid>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
        <tabView:SfTabItem Title="Tab 3">
            <tabView:SfTabItem.Content>
                <Grid Padding="10" BackgroundColor="LightCyan" HorizontalOptions="Center" VerticalOptions="Center">
                    <Label Text="TabItem height is 50"/>
                </Grid>
            </tabView:SfTabItem.Content>
        </tabView:SfTabItem>
 
    </tabView:SfTabView>
</Grid>

Output

TabHeight of SfTabItem in Xamarin.Forms SfTabView

You can find the sample from the following link: Sample

Did you find this information helpful?

Yes

Comments (0)

How to customize the tab header height in Xamarin.Forms SfTabView ?

Output

Access denied