LIDOR SYSTEMS

Advanced User Interface Controls and Components

Multi-Color Tabs in TabControl

Created: 20 September 2013

All tabs in TabControl in general have uniform look, all have the same colors and the only difference is when tab is hovered or selected. In some cases we may need to show some or all tabs in multiple colors, so the user can easily distinguish a specific tab.

TabControl with Tabs in Multiple Colors
Download Sample - Multi Color Tabs in TabControl .NET

Creation of a multi-color tabs is easy in IntegralUI TabControl. All tab pages have an individual set of color styles for each state of the tab: disabled, hovered, normal and selected. By default tabs inherits their appearance from color styles of its parent TabControl. To avoid this, at first we need to set the StyleFromParent property value for a specific tab page, to false. After that any changes to individual color styles of tab page will be applied to that specific tab. For example:

// Make sure tab page not uses the settings from its parent TabControl

page.StyleFromParent = false;

 

// Increase the space between tab border and its content

page.FormatStyle.Padding = new Padding(5);

 

// Change the colors of tab page when it is in normal state

page.NormalStyle.BackColor = Color.Red;

page.NormalStyle.BackFadeColor = Color.White;

page.NormalStyle.BorderColor = Color.DarkRed;

 

// Change the colors of tab page when it is hovered

page.HoverStyle.BackFadeColor = Color.White;

page.HoverStyle.BackColor = CommonMethods.ChangeColor(page.NormalStyle.BackColor, 35, true);

' Make sure tab page not uses the settings from its parent TabControl

page.StyleFromParent = False

 

' Increase the space between tab border and its content

page.FormatStyle.Padding = New Padding(5)

 

' Change the colors of tab page when it is in normal state

page.NormalStyle.BackColor = Color.Red

page.NormalStyle.BackFadeColor = Color.White

page.NormalStyle.BorderColor = Color.DarkRed

 

' Change the colors of tab page when it is hovered

page.HoverStyle.BackFadeColor = Color.White

page.HoverStyle.BackColor = CommonMethods.ChangeColor(page.NormalStyle.BackColor, 35, True)

In above code we are making changes to individual color and format styles for specific tab page. We are also using a built-in method ChangeColor, which changes some color to become lighter or darker. This is useful when we are not sure what exact color we want to apply, and we want to have the same color as in normal state but a little lighter or darker when tab is hovered.

By applying this to multiple tabs we can easily achieve an appearance similar to tabs in Microsoft OneNote application. To accommodate this we also need to add a label with image which will represent a title for opened tabs. The IntegralUI TabControl has a unique feature which allows you to combine toolbar and tabs in single line. To create a title, we can just simply add a label with an image which will always appear to the left before tabs.

The toolbar can accept different kind of tools: label, button, drop-down button and separator, and can also split tools to appear either to the left or right side of the tab strip with tabs shown in middle.

There is a sample project in C# and VB available for download from here: TabControl with Multi Color Tabs

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.