Center the tabs on screen with TabWidthMode set to SizeToContent

[Andy Kannenberg]

Hello,

I am trying to center the tabs on the screen when using the SfTabView with TabWidthMode set to SizeToContent. Unfortunately, I have not figured out a way to accomplish this as they always appear on the left side of the screen. Is there any way to center the tabs currently? If not, please consider adding this as an enhancement.

Thank you.

[Brundha Velusamy]

Hi Andy,

 

To ensure we can offer you the most accurate and timely solution, could you please provide a screenshot or video demonstrating your exact need in the .NET MAUI SfTabView? Providing this information will enable us to propose a potential solution promptly.

 

Regards,

Brundha V

[Andy Kannenberg]

I would like the tabs to appear in the center of the screen as shown below in this picture (edited from the example shown on the SfTabView getting started page):

[Brundha Velusamy]

Hi Andy,

Thanks for the details.

To customize the placement of tabs to the center of the screen, we recommend using the TabHeaderPadding property and setting TabWidthMode to "SizeToContent" in the SfTabView. as demonstrated in the provided code snippet. We have prepared a sample demonstrating this approach and have attached it for your reference. Please review the attached file and let us know if you have any concerns.

Please refer the below code snippet for this,

<tabView:SfTabView TabHeaderPadding="60,0"

TabWidthMode="SizeToContent">

…

 <\tabView:SfTabView >

Regards,

Brundha V

Attachment: TabViewSample_80240e54.zip

[Andy Kannenberg]

This response only works for a specific screen size and does not work as a cross-platform solution. It looks OK on certain Android devices, but this is how it looks on Windows when adding TabHeaderPadding="60,0":

Also, since the user can change the screen size on Windows, specifying a fixed padding will never work to center the tabs.

What I am looking for is something along the lines of setting the SfTabView HorizontalOptions to Center or CenterAndExpand and then having the tabs appear in the center of the screen.

[Kamalesh Periyasamy]

Hi Andy,

 

We have reviewed your query and we have already created a feature request to "Provide a Tab Header Alignment support for .NET MAUI SfTabView when 'TabWidthMode' is set to 'SizeToContent' ". Please find the link below to track the status of the feature implementation.

 

Feedback link: Tab Header Alignment support

 

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.

 

Regards,

Kamalesh P

[Andy Kannenberg]

Thank you. I missed the existing feature request, and I look forward to its implementation. 

[Preethi Rajakandham]

Hi Andy Kannenberg,

You can communicate with us or track the status of the feature using the below feedback link.

Feedback portal URL: https://www.syncfusion.com/feedback/49332/provide-a-tab-header-alignment-support-for-net-maui-sftabview-when-tabwidthmode-is

Regards,

Preethi R