How To: Create a TabbedGroup Container

• Jan 10, 2025
• 3 minutes to read

A Tabbed Group is a content container that can contain multiple Documents, but displays only one of them at a time. End-users click Document Headers to navigate through Documents. These Headers can be displayed either as traditional tab headers or as Windows 10-inspired tiles. This example illustrates how to create and customize the Tabbed Group Container.

Prerequisites

1. Create a Windows Forms Application.
2. Windows UI applications are generally designed to run in full-screen mode. Modify the main form to meet these requirements. Set the FormBorderStyle property to None and the WindowState property to Maximized.
3. Drop a DocumentManager component on the form.
4. Change the DocumentManager‘s View to WindowsUI View. Click the DocumentManager‘s smart tag and select the Convert To WindowsUIView option.

Create a Page Group

1. Click the Document Manager’s smart tag, and select Run Designer in the invoked Tasks menu, to run the DocumentManager Designer.

2. In the DocumentManager Designer, select the Elements | Documents section and add three Documents by clicking the Add New Document button.

3. In the Designer’s Content Containers section, create a new Tabbed Group container by clicking Add New Container and selecting TabbedGroup.

4. Now switch to the Layout | Navigation Tree section and populate the Tabbed Group with your Documents. To do this, drag these Documents to the Group’s Items collection.

5. The Documents you created in step 6 are empty. To populate them with content, handle the BaseView.QueryControl event and assign the required content to the e.Control property. For simplicity, assign the same content (e.g., a User Control) to all Documents, as shown in the code below.

Header Customization

1. First, expand the Tabbed Group’s AppearanceHeaderButton property and set a custom back color for Tiles in all visual states - normal, hovered and pressed. For example, set the DodgerBlue background for the normal state and LightSkyBlue for the hovered and pressed states. Also, be sure to set the WordWrap property in the TextOptions section to Wrap.