[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
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [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]End-User Interaction
   [Expand]Visual Elements
  [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)

Lesson 2 - Create a TreeMap Bound to Flat Data

This lesson goes over the steps required for building a simple unbound TreeMap diagram.

To create a simple unbound chart, do the following.

Expanded Step 1. Add a TreeMap Control

  • Run Microsoft Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Create a new WinForms project and add the TreeMapControl component to it. (See the first step in Lesson 1 to learn how to do this).

Expanded Step 2. Bind the TreeMap to a Data Source

In this lesson, the TreeMap control will be bound to a list of objects. To provide data to the TreeMap control, do the following.

  • First, create a class representing data object. Create a new source code file by sampling a data file. To do this, right-click the project in the Solution Explorer. In the invoked menu, select the Add | Class... element.

  • In the invoked Add New Item dialog, set the name to BillionaireInfo, then click Add to add the source code file to the project.

  • Insert the following class to the file.

  • Add the following method to the Form class. This method will be used to populate data to the TreeMap.

    Now, all the preparatory work is done. The next step is to provide data to the Tree Map.

  • Assign the TreeMapFlatDataAdapter to the TreeMapControl.DataAdapter property.

  • Specify the data source of the data adapter. To do this, handle the Form's Load event and add the following code to the handler.

    The code above dynamically casts the TreeMapControl.DataAdapter property to the TreeMapFlatDataAdapter type. If the adapter can be converted to this type, then the adapter's TreeMapFlatDataAdapter.DataSource property is populated with data.

  • Specify which members of the data source objects will be provided as labels and values to tree map items. Set the TreeMapFlatDataAdapter.LabelDataMember to Name and TreeMapFlatDataAdapter.ValueDataMember to NetWorth.

  • Using the Tree Map control, it is possible to group automatically generated items and specify how the group header will look for each generated group. To group generated tree map items by data members, add a new string representing the data member's name to the TreeMapFlatDataAdapter.GroupDataMembers collection. To do this, locate the collection and click the ellipsis button. In the invoked window, type the name.

Expanded Step 3. Customize the Appearance of the TreeMap

In this step, the appearance of the TreeMap's tooltip will be configured, as will the Colorizer used to provide colors to tree map items.

  • Add the ToolTipController to the Form, assign it to the TreeMapControl.ToolTipController property and handle its ToolTipController.BeforeShow event.

    Insert the following code to the handler.

    In the code above, the source data object of the selected tree map item is obtained using the TreeMapItem.Tag property and object properties are displayed in a tooltip.

  • Assign a TreeMapGroupGradientColorizer to the TreeMapControl.Colorizer property.

    Set the TreeMapPaletteColorizerBase.Palette property to Palette.Office2013Palette.

    Finally, set the TreeMapGroupGradientColorizer.Max to 1.

Expanded Result

The application is complete. Run it and locate tree map items. The application should look like this.

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