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
  [Expand]Application UI Manager
  [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
  [Collapse]TreeMap Control
   [Collapse]Getting Started
     Lesson 1 - Create a Simple Unbound TreeMap
     Lesson 2 - Create a TreeMap Bound to Flat Data
   [Expand]Providing Data
   [Expand]Layout Algorithms
   [Expand]Colorizers
   [Expand]End-User Interaction
   [Expand]Visual Elements
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - Create a Simple Unbound TreeMap

This lesson details the steps required to build a simple unbound TreeMap diagram.

To create a simple unbound chart, do the following.

Expanded Step 1. Create a New Project

In this step, a new WinForms application will be created and a TreeMap Control will be added to the application's Form.

  • Run MS Visual Studio 2010, 2012, 2013, 2015 or 2017.

  • Create a new Windows Forms Application project.

    To do this, select the File | New | Project... menu item. In the invoked dialog, select the Windows | Classic Desktop template group, then select the Win Forms Application item. Specify the name of the project as TreeMapLesson1 and click OK.

  • Add the TreeMapControl to the application's Form.

    To do this, open the Form designer. Then, drag the TreeMapControl item from the Toolbox's DX.17.2: Data & Analytics tab to the form.

  • Dock the TreeMap in the form.

    To do this, click the TreeMap control to select it. Then, click its smart tag and in the invoked window, select the Dock in Parent Container item.

All the preparatory work is complete. In the next step, the TreeMap will be populated with data.

Expanded Step 2. Populate a TreeMap with Data

In this step, the following data table will be visualized using the TreeMap Control.

RegionCountryGDP (million of USD)
AmericasUnited States17.418
AmericasBrazil2.353
AsiaChina10.380
AsiaJapan4.616
AsiaIndia2.049
EuropeGermany3.859
EuropeUnited Kingdom2.945
EuropeFrance2.846
EuropeItaly2.147
EuropeRussia1.857

To do this, perform the following steps.

  • Assign the TreeMapItemStorage object to the TreeMapControl.DataAdapter property.

  • Then, expand the adapter's properties and click the ellipsis button opposite the TreeMapItemStorage.Items property. In the invoked TreeMapItem Collection Editor, expand the list of available items clicking the Expand button. After that, select TreeMapItem to add the first group item.

  • For the newly created item, set the TreeMapItem.Label to Americas. This value will be used as the group label.

  • Add children elements. To do this, click the ellipsis button opposite the TreeMapItem.Children property. In the invoked TreeMapItem Collection Editor dialog, click Add to add a leaf item.

  • For the added leaf item, set the TreeMapItem.Label to United States and the TreeMapItem.Value to 17.418.

  • Repeat previous steps to add table rows to the TreeMap.

The image below represents the launched application with a TreeMap control populated with data.

Proceed to the next step to learn how to customize the appearance of the TreeMap control.

Expanded Step 3. Customize the Appearance of the TreeMap

In this step, the style of the group header, text patterns of group headers and leafs will be configured. Also, the colorizer that provides colors to tree map items will be customized.

Now, the application is finished.

Expanded Result

Run the application. The following image represents the launched application.

Expanded See Also

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