How can I set alignment for SfTabViewHeader is center?

[Thanh Hai Dang]

Hi,

I'm using SfTabView in Windows and MacOS. 

I want to display TabView header in horizontal center like the screenshot? 

Thanks and best regards,

TH

[Brundha Velusamy]

Hi Thanh Hai Dang,

To customize the placement of tabs to the center of the Windows and Mac screen, we recommend setting TabWidthMode to "SizeToContent" and using the TabHeaderPadding based on your need 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,

XAML:

<tabView:SfTabView  TabWidthMode="SizeToContent">

…

 <\tabView:SfTabView >

C#:

    public partial class MainPage : ContentPage

    {

       …

      

protected override void OnAppearing()

        {

            base.OnAppearing();

 

#if WINDOWS

            var window = GetParentWindow().Handler.PlatformView as MauiWinUIWindow;

            if (window != null)

            {

                UpdateTabHeaderPadding(window.Bounds.Width);

            }

#elif MACCATALYST

            var macWindow = GetParentWindow().Handler.PlatformView as UIWindow;

            if (macWindow != null)

            {

                UpdateTabHeaderPadding(macWindow.Bounds.Width);

            }

#endif

        }

 

#if WINDOWS || MACCATALYST

        protected override void OnSizeAllocated(double width, double height)

        {

            base.OnSizeAllocated(width, height);

            UpdateTabHeaderPadding(width);

        }

        private void UpdateTabHeaderPadding(double width)

        {

            double totalTabWidth = 0;

            foreach (var tabItem in tabView.Items)

            {

                if (tabItem is Syncfusion.Maui.TabView.SfTabItem tabItemView)

                {

                    totalTabWidth += tabItemView.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width;

                }

            }

            double remainingSpace = ((width - totalTabWidth));

 

            double padding = (remainingSpace / 2) ;

 

            tabView.TabHeaderPadding = new Thickness(padding, 0, 0, 0);

        }

#endif

    }

Regards,

Brundha V

Attachment: TabViewSample_70a84733.zip