[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 Content Containers Hierarchy

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 Creating Application Hierarchy

  1. Run the Document Manager Designer.

  2. Switch to the designer's 'Documents' section and add 3 Documents by clicking a corresponding button. This will cause 3 Tiles and a TileContainer to be automatically generated.

  3. Detach Tiles into 2 separate groups: 2 Tiles in the first group and the last tile in another group. Customize the TileContainer as your needs require. If you are having trouble, please refer to the How To: Create a TileContainer topic.
  4. Create a PageGroup container and add first 2 Documents to its DocumentGroup.Items collection. See the How To: Create a PageGroup Container topic to learn more. The application hierarchy must look like the following.

  5. Create a Page container and associate it with the last Document. See the How To: Create a Page Container topic if you are having a hard time. The application tree looks like the image below.

  6. Now, after all 3 containers are added and populated with Documents, build an application hierarchy. In this example, the TileContainer appears on the application start-up. Clicking any tile from the first group will switch us to the PageGroup container and display the related Document. The last tile activates the Page container and displays the 3rd Document.

    Containers are linked via the ActivationTarget - Parent properties pair (see the Application Hierarchy and Module Navigation topic to learn more). Go to the designer's 'Navigation Tree' section. Select the PageGroup container and drag it to the TileContainer's 'Activation Target' node.

    The PageGroup's BaseContentContainer.Parent property was set to tileContainer1 automatically. Now clicking any tile contained within the TileContainer will activate the PageGroup, and navigating back via Navigation Bars will bring us back to the TileContainer again.

    As stated above, clicking the 3rd Tile should activate the Page container. To do so, we have to specify this tile's Tile.ActivationTarget property, which has a higher priority than a similar container's property. Expand the 'Tile3' node and drag the 'Page1' container to the tile's 'Activation Target' node.

    The application hierarchy will now look like the following.

    As you can see, the Page container remains on the same level as the TileContainer, and its BaseContentContainer.Parent property equals null. This means our Page container is also the topmost container and we cannot navigate back to the TileContainer from its screen. To change this behavior, manually set the Page's BaseContentContainer.Parent property to tileContainer1.

    The figure below illustrates the final application hierarchy.

  7. Run the application. The result is demonstrated in the figure below.

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