New to Telerik UI for Xamarin? Download free 30-day trial

Adjust the width between the tab view headers

Environment

Product Version 2020.3.1207.1
Product TabView for Xamarin Cross Paltform

Description

This help article will show you how to adjust the width between the tab headers. By default there is a spacing between the tab view headers. The behavior comes from the RadToolbar control which is used for the TaBview headers.

Solution

In order to adjust the width between the tabview headers you will need to set the ItemSpacing property (of type double) to the RadTabView.Header.

For example:

<telerikPrimitives:RadTabView x:Name="tabView"
                            HeaderPosition="Top">
    <telerikPrimitives:RadTabView.Header>
        <telerikPrimitives:TabViewHeader ItemSpacing="0"/>
    </telerikPrimitives:RadTabView.Header>
    <telerikPrimitives:RadTabView.Items>
        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem Text="Tab 1" BackgroundColor="LightBlue"/>
            </telerikPrimitives:TabViewItem.Header>
        </telerikPrimitives:TabViewItem>
        <telerikPrimitives:TabViewItem HeaderText="Tab 2">
            <telerikPrimitives:TabViewItem.Content>
                <telerikPrimitives:RadTabView
                            HeaderPosition="Top">
                    <telerikPrimitives:RadTabView.Header>
                        <telerikPrimitives:TabViewHeader ItemSpacing="0"/>
                    </telerikPrimitives:RadTabView.Header>
                    <telerikPrimitives:RadTabView.Items>
                        <telerikPrimitives:TabViewItem>
                            <telerikPrimitives:TabViewItem.Header>
                                <telerikPrimitives:TabViewHeaderItem Text="Tab 2.1" BackgroundColor="LightBlue" />
                            </telerikPrimitives:TabViewItem.Header>
                        </telerikPrimitives:TabViewItem>
                        <telerikPrimitives:TabViewItem HeaderText="Tab 2.2">
                        </telerikPrimitives:TabViewItem>
                    </telerikPrimitives:RadTabView.Items>
                </telerikPrimitives:RadTabView>
            </telerikPrimitives:TabViewItem.Content>
        </telerikPrimitives:TabViewItem>
    </telerikPrimitives:RadTabView.Items>
</telerikPrimitives:RadTabView>
In this article
Not finding the help you need? Improve this article