Back to Devexpress

Lesson 2 - Create a TreeMap Bound to Flat Data

windowsforms-115730-controls-and-libraries-treemap-getting-started-lesson-2-create-a-treemap-bound-to-flat-data.md

latest3.5 KB
Original Source

Lesson 2 - Create a TreeMap Bound to Flat Data

  • Dec 06, 2022
  • 7 minutes to read

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

To create a simple unbound chart, do the following.

Step 1. Add a TreeMap Control

  • Run Microsoft Visual Studio.
  • 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).

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.

  • 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.

  • 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.

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.

Result

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