[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
    [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
      Content Containers
      Navigation Bars
      WindowsUI Buttons
      Search Panel
      Application Hierarchy and Module Navigation
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

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.

    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.

Is this topic helpful?​​​​​​​