[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [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]End-User Interaction
   [Expand]Visual Elements
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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 Tree Map Bound to Flat Data

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

To crate a simple unbound chart, do the following.

Expanded Step 1. Add a TreeMap Control

  • Run Microsoft Visual Studio 2012, 2013, 2015 or 2017.
  • Create a new WPF 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

To provide data to the TreeMap control, to the following.

  • Create a sample data file. To do this right-click the project in the Solution Explorer. In the invoked menu, select the Add | New Item... element.

  • In the invoked Add New Item dialog, select the Data | XML File item. Set the name to billionaires.xml, then click Add to add the file to the project.

  • Insert the following content to the XML file.

  • Add an XML provider with the file as a source to a window's resources. To do this, add the following code to the Window.xaml.

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

  • Assign the TreeMapFlatDataAdapter to the TreeMapControl.DataAdapter property.

  • Specify the data source of the data adapter. To do this, create a new data binding to the XML provider added to the window previously. Locate the TreeMapFlatDataAdapter.DataSource property and click its property marker. In the invoked menu, select Create Data Binding....

  • In the invoked dialog, set Binding type to StaticResource, and then select the dataSource item in the Resource list. Finally, click the OK button to create a data binding.

  • Specify the data source member that will be used to generate tree map items. Set the TreeMapFlatDataAdapter.DataMember to Billionaire. Then, specify which members of the data member will be provided as labels and values to tree map items. Set the TreeMapFlatDataAdapter.LabelDataMember to Name and TreeMapFlatDataAdapter.ValueDataMember to NetWorth.

  • Using Tree Map control, it is possible to group automatically generated items and specify how the group header will look for each generated group. Add the following tempate to the Window's resources to use it as a group header content template later.

  • To group generated tree map items, add a new group definition to the TreeMapFlatDataAdapter.Groups collection. To do this, locate the collection and click the ellipsis button. In the invoked window, click the Add button.

  • For the newly added group definition, set the TreeMapGroupDefinition.GroupDataMember property to Country

  • Bind the TreeMapGroupDefinition.HeaderContentTemplate property to the previously added data template. To do this, click the property marker located opposite the property, and then click the Create Data Binding....

  • In the invoked dialog, set the Binding type to StaticaResource and select the countryGroupTemplate item in the Resources list. Then, click OK to create a data binding.

    Click OK to perform changes and close the Groups editor.

Currently, the Window's XAML should look like this:

Expanded Step 3. Customize the Appearance of the TreeMap

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

  • Add the following data template to the Window's resources.

    Create the TreeMapControl.ToolTipContentTemplate data binding to the previously added template. To do this, click the property marker opposite the property. In the invoked menu, select Create Data Binding....

    In the invoked window, set the Resource type to StaticResource and select the tooltipTemplateitem in the Resources list. Then, click OK to create a data binding.

    Finally, set the TreeMapControl.ToolTipEnabled to true.

  • Assign a TreeMapGroupGradientColorizer to the TreeMapControl.Colorizer property.

    Set the TreeMapPaletteColorizerBase.Palette property to Office2013Palette.

Expanded Result

The application is done. The following code snippet demonstrates the resulting XAML.

Run the application and click any tree map item. The application should look like this.

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