[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 TileContainer

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 Tile Container

  1. Run the Document Manager Designer.

  2. Switch to the designer's 'Documents' section and add 4 Documents by clicking the corresponding button.

    This step can be skipped because TileContainers hold Tiles, not Documents. Documents are added just to help us see how they interact with Tiles.

  3. Go to the designer's 'Tiles' page. As you can see, 4 tiles are automatically generated. If you skipped the previous step, create 4 Tiles manually by clicking the 'Add New Tile' button.

    Each tile references the specific Document through the Tile.Document property. You can set this property in the designer's 'Tiles' section in case you create tiles first, and then Documents (not needed for automatically generated tiles).

  4. Switch to the designer's 'Content Containers' page. If you have created Documents before, a TileContainer for generated Tiles is already added automatically. If not, create a TileContainer by clicking the 'Add New Container' button and selecting the 'TileContainer' option from the drop-down list.

  5. Go to the designer's 'Navigation Tree' section. Here you can see the application's hierarchy. The topmost container is our TileContainer. It does not yet contain any tiles within (its TileContainer.Items collection is empty). Add Tiles to the TileContainer by dragging them from the 'Tiles' panel into the 'Items' node. The resulting navigation tree will look like following.

  6. Now, after the application's hierarchy has been built, go back to the designer's 'Tiles' section and customize your tiles. Set the ItemSize properties for first three tiles to Medium. Also, set their BaseTile.Group properties to Group 1. For the last tile, set its Group property to a different value, for example Group 2. Refer to the Tile Groups and Items article to learn more about tile groups.

    The BaseTile.Elements and BaseTile.Frames collections are used to build Tiles' content and animation respectively. Modifying these collections invokes a Collection Editor dialog where all the job can be done. Elements and frames collections are used in the same way as they are used in the TileControl component. Refer to the Tile Item Structure and Tile Animation topics to learn how to build tile content.

    To learn more, see the following online videos:


  7. You can also set appearance options in the designer's 'Appearances' page.

  8. Run the application. The result with customized Tiles and appearance settings is demonstrated in the figure below.

Expanded Code

This section demonstrates how to create the example in code. Here, the WindowsUIView.QueryStartupContentContainer event is handled to set an application start-up container.

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