We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to make tabs evenly spaced across width of screen in SfTabView with TabWidthMode=Dafault


I raised this issue before with you and was able to resolve it by manually sizing the width of the tab bar items to get an even distribution. Now, my tabview varies from 1-3 tabs depending on the results to be displayed. Is there a way for this control to automatically evenly distribute the tabs across the width of the screen?

Here is a snippet of code I used to evenly distribute two tabs across the screen:

        <effectsView:SfEffectsView TouchDownEffects="Ripple">
             <Grid Padding="0,5" ColumnDefinitions="195" BackgroundColor="LightBlue">
                 <Image Source="{Binding Image}" HeightRequest="30" HorizontalOptions="Center" VerticalOptions="Start"/>
                <Label Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="End" FontSize="18" TextColor="White"/>

I believe I can work around this problem by calculating the desired Width of the tab in my view model and then binding ColumnDefinitions to Width. However, I'd certainly prefer to have an option for the control to do this automatically for me.

Thanks for any help you can provide.

1 Reply

VV Vijayakumar Viswanathan Syncfusion Team March 29, 2023 02:18 PM UTC

Hi Craig,

We have created a new feature request for the requirement "Provide support for automatically having evenly distributed Tab width when the header template is being set". Please find the below link for tracking the status of the feature implementation. 


Feedback link: https://www.syncfusion.com/feedback/42498/provide-support-for-automatically-having-evenly-distributed-tab-width-when-header


Please cast your vote to make it count. We will prioritize the features every release based on the demands and we do not have an immediate plan to implement this feature since we have committed to already planned work. So, this feature will be available in any of our upcoming releases.


If you have any more specifications/suggestions for the feature request, you can add them as a comment in the portal. We will share the release details in the feedback itself.


Vijayakumar V

Live Chat Icon For mobile
Up arrow icon