Professional UI Solutions
Site Map   /  Register

Contextual Tabs in Ribbon UI

What is a contextual tab?

A contextual tab allows you to provide the user with UI controls within a certain context, for example, when some object in a document is selected. Contextual tabs with a similar context are organized in a contextual tab group so you can have more than one tab in a group. For instance, when the user selects an object in a document, one or more contextual tabs appear so that the user can work with that object by using controls in the contextual tabs. When the object is no more selected, the contextual tab group disappears. Contextual tabs can be of different colors, with each color associated with a particular context.

For example, in Microsoft Word 2007, when a table is selected, a Table Tools contextual tab group appears. The group contains two contextual tabs, Design and Layout. The group tab and the tabs are labeled with a yellow color (see Figure 1).

 Two contextual tabs in the Table Tools tab group

Figure 1 Two contextual tabs in the Table Tools tab group

Adding contextual tabs using the Windows Forms Designer

In the Windows Forms Designer, select the Ribbon control. You should see that the Add Contextual Tab Group item appeared at the bottom of the Properties pane and in the ribbon's context menu. After clicking this item, a new contextual tab group is added to the form and an icon representing this group appears in the bottom part of the Windows Forms Designer (see Figure 2).

A newly added tab group with a contextual tab

Figure 2 A newly added tab group with a contextual tab

The newly added contextual tab group contains one ribbon tab by default. You can populate the ribbon tab exactly in the same way as with regular ribbon tabs (read more about this in Getting Started with Elegant Ribbon).

To add a tab to a contextual tab group, select its icon in the bottom part of the Windows Forms Designer, invoke its context menu and click the Add Tab item (see Figure 3). Alternatively you can click the Add Tab link at the bottom of the Properties pane.

Adding a tab to a group

Figure 3 Adding a tab to a group

Adding contextual tabs in code

Contextual tab groups are stored in the Ribbon.ContextualTabGroups collection. So you can add a new tab group in two simple steps:

  1. Create a new instance of the RibbonContextualTabGroup class.
  2. Add that instance to the collection.

You can populate the created tab group with tabs by adding regular tab pages (the RibbonTabPage class) to the RibbonContextualTabGroup.TabPages collection.

Changing the color of a contextual tab group

The RibbonContextualTabGroup class has the Color property, which you can set to one of the seven predefined colors (the RibbonContextualTabGroupColor enumeration):

  • Orange
  • Green
  • Cyan
  • Yellow
  • Violet
  • Blue
  • Red

Changing the position of a tab in its group

In the Windows Forms Designer:

  • Select the contextual tab group with the tab whose position you want to change.
  • In the Properties pane, find the TabPages property and click the Ellipsis button next to it. The Collection editor dialog should appear.
  • Using the buttons with Up and Down arrows, move the selected tab to an appropriate position.
  • Press OK to commit changes.

How to hide or show a contextual tab group?

You can do this with the RibbonContextualTabGroup.Visible property.

Back To Top Other Articles...