Introduction
Visual Studio IDE has a really awesome theme that everyone likes.
One of its best views is its customized and well-maintained TabControl
, and that's why I made this usercontrol
that looks like the TabControl
used in Visual Studio.
Background
I (on an average) spend more than 10 hours using Visual Studio daily so I fell in love with its theme and wondered why don't I release a similar TabControl
.
YouTube Video
Youtube
Implementation
ActiveColor
: Highlights the selected TabPage
BackTabColor
: The color of the background of the TabPage
BorderColor
: The border color of the control ClosingButtonColor
: The color of the closing button "X" HeaderColor
: The color of the Header HorizontalLineColor
: The color of the horizontal line that passes under the headers SelectedTextColor
: The color of the text of the selected page TextColor
: The color of the text
Layout
Using the Code
Using the code is the same for everyone who worked using the normal TabControl
before. For more details about the standard TabControl
, I suggest you take a look at TabControl MSDN.
Easy Usage
- Drag & drop the
usercontrol
on your Form. - Configure its properties through the properties box:
Advanced Usage
For a better performance and a more dynamic component, you can use many of this control's hidden features, one of them is the CloseButton
feature that allows you to close a specific TabPage
once you click on the "X" button, but that sounds so familiar and mainstream, so what? Here is the trick. :)
Without writing any line of code, you can make a Yes/No messagebox
before closing the TabPage
as the following picture shows:
Result:
Themes
One of the main tasks of this TabControl
is to imitate the theme of Visual Studio IDE.
By default, the control's theme is set to Dark-Theme
which is a combination of black, gray, blue and white.
In the samples Form, I did add three themes which are: Dark, Light and blue (they are also the standard themes of Visual Studio IDE).
As I did mention, the control is set to dark by default, but to get the blue, light theme or whatever you prefer, you have to edit the colors on your own using the properties window:
Light Theme
To create a well-customized theme as the light theme, you have to let go of the mouse and use your hands a bit.
Light theme code:
this.visualStudioTabControl1.HeaderColor = Color.FromArgb(237 , 238 , 242);
this.visualStudioTabControl1.ActiveColor = Color.FromArgb(1, 122, 204);
this.visualStudioTabControl1.HorizontalLineColor = Color.FromArgb(1, 122, 204);
this.visualStudioTabControl1.TextColor = Color.Black;
this.visualStudioTabControl1.BackTabColor = Color.WhiteSmoke;
Blue Theme
Code:
this.visualStudioTabControl1.HeaderColor = Color.FromArgb(54, 78, 114);
this.visualStudioTabControl1.ActiveColor = Color.FromArgb(247, 238, 153);
this.visualStudioTabControl1.HorizontalLineColor = Color.FromArgb(247, 238, 153);
this.visualStudioTabControl1.selectedTextColor = Color.Black;
this.visualStudioTabControl1.BackTabColor = Color.RoyalBlue;
I preferred writing bare code, but you can accomplish the same task using the properties window as well.
That's all of it, folks ♥ !
Points of Interest
Honestly, when I wrote the code, I used Visual Studio by then, so I was looking at its TabControl
and tried my best to copy it. haha :D .
History
- 6/14/2016: Added a demonstration video
- 8/23/2016: Fixed some comments