Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Collapse]TreeMap Control
   [Collapse]Getting Started
     Lesson 1 - Create a Tree Map Manually
     Lesson 2 - Create a Tree Map Bound to Flat Data
   [Expand]Providing Data
   [Expand]Layout Algorithms
   [Expand]Colorizers
   [Expand]End-User Interaction
   [Expand]Visual Elements
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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 Tree Map Manually

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 WPF application will be created and a TreeMap Control will be added to the application's MainWindow.

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

  • Create a new WPF 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 WPF Application item. Specify the name of the project as TreeMapLesson1 and click OK.

  • Add the TreeMapControl to the application's MainWindow.

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

  • Reset the control's layout to fill the whole window.

    To do this, right-click the TreeMap object and choose the Layout | Reset All item in the invoked menu.

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.

Country Region GDP (million of USD)
United StatesAmericas17.418
BrazilAmericas2.353
ChinaAsia10.380
JapanAsia4.616
IndiaAsia2.049
GermanyEurope3.859
United KingdomEurope2.945
FranceEurope2.846
ItalyEurope2.147
RussiaEurope1.857

To do this, perform the following steps.

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

  • Then, click the ellipsis button opposite the TreeMapItemStorage.Items property. In the invoked TreeMapItem Collection Editor: Items click Add to add a 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: Children dialog click Add to add 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.

After this step, the XAML should look like this:

The image below represents the application when currently launched.

Data was provided to the TreeMap. In the next step, the appearance of the TreeMap will be improved.

Expanded Step 3. Customize the Appearance of the TreeMap

In this step, data templates for the group header and leaf content will be configured. Also, the colorizer providing colors to tree map items will be customized.

  • Assign the custom DataTempate to the TreeMapControl.GroupHeaderContentTemplate property. To do this, add the following data template to Window.Resources. Using this template, the group's label text will be displayed on a gray background using a white text color.

    Then, bind the template to the TreeMapControl.GroupHeaderContentTemplate. To do this, locate the GroupHeaderContentTemplate and click the property marker. In the invoked dropdown list, select the Create Data Binding... item.

    In the invoked Create Data Binding dialog, set the binding type to StaticResource and resource to the headerTemplate data template created previously.

  • Assign the custom DataTempate to the TreeMapControl.LeafContentTemplate property. To do this, add the following data template to Window.Resources. Using this template, leaf's label text will be displayed using a white text color, and the value will be shown under the label, using a light gray color.

    Then, bind the template to the TreeMapControl.LeafTemplate property. To do this, locate the GroupHeaderTemplate and click the property marker. In the invoked dropdown list, select the Create Data Binding... item.

    In the invoked Create Data Binding dialog, set the binding type to StaticResource and the resource to the leafTemplate data template created previously.

  • The Tree Map control uses the Palette Colorizer by default. Set the TreeMapPaletteColorizer.ColorizeGroups property to true to assign a new color to items by groups.

Now, the application is finished.

Expanded Result

The MainWindow's XAML is represented below.

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

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