DevComponents Knowledge Base

DotNetBar includes controls that allow you to create tab based user interface which can effectively replace the MDI child interface. Tabbed user interface is often seen in browsers like FireFox and Chrome.

Following controls are the ones you will be using to create tabbed UI: TabParentForm, TabFormControl and TabFormItem.

TabParentForm is used as a chrome-less parent form and it integrates with the TabFormControl which provides window chrome and tabs interface. TabFormControl must always be parented directly to TabParentForm and must  be docked to top of the form.

Tabbed UI Structure

You can also trigger explicit caption visibility by setting tabFormControl.CaptionVisible=true

When caption is visible you can also add DotNetBar items to the caption. In design-time simply choose to create caption item from the TabFormControl Tasks menu:

To align the newly added item to caption you can use ItemAlignment property on the item. For example to align item to the right you would set it to Far. All caption items are added to tabFormControl.CaptionItems collection.

TabFormControl.Items collection holds all items displayed in tab-strip area. You can add to it instances of TabFormItem or any other DotNetBar item which derives from BaseItem like ButtonItem, LabelItem etc.

TabFormItem object represents single tab. When selected TabFormItem will display associated TabFormPanel (set to TabFormItem.Panel property) which holds all controls which are displayed on the tab.

Creating Tabs Using Code

TabFormControl provides shortcut method to create tabs from code: CreateTab. It will create tab, its panel and add it will add it to the Items collection. You use it like this:

C#:

TabFormItem tab = tabFormControl1.CreateTab("New Tab", "mytab1");
BrowserControl webBrowser = new BrowserControl();
webBrowser.Dock = DockStyle.Fill;
tab.Panel.Controls.Add(webBrowser);
tabFormControl1.SelectedTab = tab;

VB:

Dim tab as TabFormItem
tab= tabFormControl1.CreateTab("New Tab", "mytab1")
Dim webBrowser As BrowserControl = new BrowserControl()
webBrowser.Dock = DockStyle.Fill
tab.Panel.Controls.Add(webBrowser)
tabFormControl1.SelectedTab = tab

This example above create new tab with text New Tab and name mytab1, then it adds new instance of BrowserControl control to the panel associated with the tab. It also selects newly created tab.

As selected tab changes TabFormControl will fire SelectedTabChanged event.

Key Properties, Methods and Events

TabFormControl
Properties:
BackgroundStyle – Specifies the background style of the control.
CaptionFont – Indicates the font for the form caption text when CaptionVisible=true. Default value is NULL which means that system font is used.CaptionItems – Collection of items displayed on caption, if visible.
CaptionVisible – Indicates whether caption is visible.
ColorTable – Indicates completely custom color table for control. When set it overrides all system color table settings.
Items – Collection of items displayed in tab-strip area of the control.
MouseWheelTabScrollEnabled – Indicates whether mouse wheel scrolls through the tabs. Default value is true.
NewTabItemVisible – Indicates whether new tab item which allows creation of new tab when clicked is visible. When visible you need to handle CreateNewTab event and create your new tab in event handler.
SelectedTab – Indicates currently selected TabFormItem. TabFormItem objects are selected using the Checked property or assigning them to this property.
Events:
CreateNewTab – Occurs when new tab item is clicked by end user and allows you to create and add new tab to the control.
SelectedTabChanged – Occurs after selected tab has changed.
ShowIcon – Indicates whether Form.Icon is shown in top-left corner of the caption.
Methods:
CreateTab – Creates new Tab and associated panel and adds them to the control.

TabFormItem
Properties:
BackColors – Indicates the array of colors that when set are used to draw the background of the item.
ColorTable – Indicates predefined color of the tab.
CustomColorTable – Indicates completely custom color table for all tab states. When set it overrides all system color table settings.
ForeColor – Indicates the tab text color.
Panel – Indicates panel assigned to this tab item. Panel holds the actual controls displayed on the tab.

Multiple Top Level Forms

TabFormControl allows you to detach individual tabs into their own top level forms. Since default application context only works with one form, we include MultiFormAppContext class which provides management for multiple top-level forms so your application is closed only after last top level form is closed. Setup is very simple and you need to modify your application Main() so MultiFormAppContext is used:

C#:

/// <summary>
 /// The main entry point for the application.
 /// </summary>
 [STAThread]
 static void Main()
 {
    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    MultiFormAppContext context = new MultiFormAppContext(new Form1());
    MultiFormAppContext.Current = context;
    Application.Run(context);
 }

VB:

Imports DevComponents.DotNetBar

Module MainModule
    Sub Main()
        Application.EnableVisualStyles()
        Application.SetCompatibleTextRenderingDefault(false)
        Dim context As MultiFormAppContext = new MultiFormAppContext(new Form1())
        MultiFormAppContext.Current = context
        Application.Run(context)
    End Sub
End Module

Customizing Colors

All colors for the tabbed form controls are stored in static Office2007ColorTable.TabFormColorTable object and Office2007ColorTable.TabFormItemColorTables collection which stores the predefined color tables for tabs. Please read following article on Office2007ColorTable customization.

Changing static color table will change colors for all instances of TabFormControl in the application. If you want to customize just single control you can use tabFormControl.ColorTable property and tabFormItem.CustomColorTable properties. These properties need to be assigned with new instances of the color tables and when set they override all system default colors which means that tables need to be fully populated with color values.