Custom styling for the TabControlAdv

[Bill]

I am looking to use a TabControlAdv that looks like the tabs on the below Dribbble shot (not my design, copyright where it's due), however none of the styles available have an "ActiveTabBorder" property so I can set a separate border on the active tab. Is that possible to achieve?

[Backia Raj Kanagaraj]

Hi Bill, 

 

We are currently validating your query and we will update you the details tomorrow. 

 

Regards, 

Backia Raj Kanagaraj

[Magesh Sankar]

Hi Bill, 

 

Thanks for your Patience.  

  

Currently we do not have built-in  style  as like provided image reference, but this can be achieved by custom renderer. Your requirement was achieved by using custom renderer in DrawItem event. In the attached sample we have customized the Tab renderer based on your requirement using DrawItem event of Tab Control. Please find the  online documentation, code snippet, screenshot and sample for the same. 

  

Documentation: https://help.syncfusion.com/windowsforms/tabcontrol/events#drawitem-event   

 

 

Code Snippet: 

               

public partial class Form1 : Form 

    { 

        public Form1() 

        { 

            InitializeComponent(); 

            this.tabControlAdv1.FocusOnTabClick = false; 

            this.tabControlAdv1.Alignment = TabAlignment.Left; 

            this.tabControlAdv1.RotateTextWhenVertical = true; 

            SkinManager.SetVisualStyle(this, "Office2019Colorful"); 

            this.tabControlAdv1.ThemeStyle.TabStyle.ActiveBackColor = Color.White; 

            this.tabControlAdv1.ThemeStyle.TabStyle.InactiveBackColor = Color.White; 

            this.tabControlAdv1.ThemeStyle.TabStyle.ActiveForeColor = ColorTranslator.FromHtml("#2277c5"); 

            this.tabControlAdv1.ThemeStyle.TabPanelBackColor = Color.White; 

            this.tabControlAdv1.DrawItem += TabControlAdv1_DrawItem; 

            this.tabControlAdv1.ImageAlignmentR = RelativeImageAlignment.AboveText; 

        } 

 

        private void TabControlAdv1_DrawItem(object sender, Syncfusion.Windows.Forms.Tools.DrawTabEventArgs drawItemInfo) 

        { 

            Graphics g = drawItemInfo.Graphics; 

            //Draws the default background and interior.  

            //Let's us to draw tab pages using Custom renderer.  

            drawItemInfo.DrawBackground(); 

            drawItemInfo.DrawInterior(); 

            if ((drawItemInfo.Index == tabControlAdv1.SelectedIndex) & ((int)DrawItemState.Selected) > 0) 

            { 

                //Gets the bounds of the selected tab page. 

                RectangleF tabBounds = this.tabControlAdv1.GetTabRect(this.tabControlAdv1.SelectedIndex); 

 

                //Draws the line on top of selected tab page 

                g.DrawLine(new Pen(ColorTranslator.FromHtml("#2277c5"), 2), new PointF(tabBounds.Left + tabBounds.Width -1, tabBounds.Bottom ), 

                    new PointF(tabBounds.Left + tabBounds.Width-1, tabBounds.Top )); 

            } 

 

            g.ResetTransform(); 

 

            } 

    }  

 

 

Screenshot: 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/153089/ze/TabControAdvlNew1798226258 

 

  

Regards, 

Magesh S