Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Collapse]Application UI Manager
   [Collapse]Views
    [Expand]Widget View
    [Collapse]WindowsUI View
     [Collapse]Getting Started
       How To: Create a Message Box Flyout With User Control
       How To: Create a Modal Message Box Flyout
       How To: Create a Page Container
       How To: Create a PageGroup Container
       How To: Create a Pop-up Flyout
       How To: Create a SlideGroup Container
       How To: Create a SplitGroup Container
       How To: Create a TabbedGroup Container
       How To: Create a TileContainer
       How To: Pass Specific Data when Navigating Through Containers
       How To: Create Content Containers Hierarchy
      Windows UI Guidelines
      Content Containers
      Navigation Bars
      WindowsUI Buttons
      Flyouts
      Search Panel
      Designer
      Hierarchy and Screens
      Navigating Through Containers
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
    Documents
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
   [Expand]Examples
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How To: Create a TabbedGroup Container

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.

Expanded 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.

Expanded 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.

    Along with these Documents, the Document Manager will create three Tiles and a Tile Container for these Tiles. You will not need the Tiles or the Tile Container for this example, so switch to the corresponding Designer sections and delete them.

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

    Here, you can specify all required TabbedGroup properties. For example, you can set the ITabbedGroupDefaultProperties.HeaderStyle property to Tile.

  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.
    This approach to assigning content to Documents is called Deferred Load. See the Deferred Load topic for more info.
  6. You now have a fully functional Tabbed Group container. The next step explains how to customize Document headers.

Expanded 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.

    Choose any Document and specify its BaseDocument.Header and BaseDocument.Image properties. You can use HTML tags to format Document headers. If you enabled word wrapping, the <br> tag will allow you to split the tile text into multiple lines.

    Finally, set the desired tile size, text and image locations.

    The figure below illustrates customized tiles within a Tabbed Group.

How would you rate this topic?​​​​​​​