Skip to main content
BuyLog In
WPF Controls
Search in…
Docs > WPF Controls > Controls and Libraries > TreeMap Control > Getting Started > Lesson 1 - Create a Tree Map Manually
A newer version of this page is available. .
All docs
V18.2
WPF Controls
Prerequisites
What's Installed
Common Concepts
MVVM Framework
Controls and Libraries
Reporting
Data Grid
Ribbon, Bars and Menu
Charts Suite
Pivot Grid
Scheduler
Spreadsheet
Rich Text Editor
Tree List
Gauge Controls
Map Control
Layout Management
Windows Modern UI
Printing-Exporting
Data Editors
Navigation Controls
Spell Checker
Property Grid
PDF Viewer
TreeMap Control
Getting Started
Lesson 1 - Create a Tree Map Manually
Lesson 2 - Create a Tree Map Bound to Flat Data
Providing Data
Layout Algorithms
Colorizers
End-User Interaction
Visual Elements
Gantt Control
Diagram Control
Windows and Utility Controls
Dialogs, Notifications and Panels
Scheduler (legacy)
Scaffolding Wizard
Localization
Redistribution and Deployment
Get More Help
API Reference
Download CHM

Lesson 1 - Create a Tree Map Manually

  • 5 minutes to read

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

To create a simple unbound chart, do the following.

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

    Lesson1_CreateNewProject

  • 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.18.2: Data & Analytics tab to the window.

    TreeMapToolbox

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

    Lesson1_ResetLayout

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

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 States Americas 17.418
Brazil Americas 2.353
China Asia 10.380
Japan Asia 4.616
India Asia 2.049
Germany Europe 3.859
United Kingdom Europe 2.945
France Europe 2.846
Italy Europe 2.147
Russia Europe 1.857

To do this, perform the following steps.

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

    Lesson1_ItemStorage

  • Then, click the ellipsis button opposite the TreeMapItemStorage.Items property. In the invoked TreeMapItem Collection Editor: Items click Add to add a group item.

    Lesson1_AddFirstItem

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

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

    Lesson1_AddChildren

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

    Lesson1_LabelAndValue

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

After this step, the XAML should look like this:

<dxtm:TreeMapControl>
    <dxtm:TreeMapItemStorage>
        <dxtm:TreeMapItem Label="Americas">
            <dxtm:TreeMapItem Label="United States" Value="17.418"/>
            <dxtm:TreeMapItem Label="Brazil" Value="2.353"/>
        </dxtm:TreeMapItem>
        <dxtm:TreeMapItem Label="Europe">
            <dxtm:TreeMapItem Label="Germany" Value="3.859"/>
            <dxtm:TreeMapItem Label="United Kingdom" Value="2.945"/>
            <dxtm:TreeMapItem Label="France" Value="2.846"/>
            <dxtm:TreeMapItem Label="Italy" Value="2.147"/>
            <dxtm:TreeMapItem Label="Russia" Value="1.857"/>
        </dxtm:TreeMapItem>
        <dxtm:TreeMapItem Label="Asia">
            <dxtm:TreeMapItem Label="China" Value="10.380"/>
            <dxtm:TreeMapItem Label="Japan" Value="4.616"/>
            <dxtm:TreeMapItem Label="India" Value="2.049"/>
        </dxtm:TreeMapItem>
    </dxtm:TreeMapItemStorage>
</dxtm:TreeMapControl>

The image below represents the application when currently launched.

Lesson1_Step2_Result

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

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.

    <Window.Resources>
    <DataTemplate x:Key="headerTemplate">
        <TextBlock Text="{Binding Label}"
                   Margin="4,4,4,0"
                   Padding="4"
                   Foreground="White"
                   Background="Gray"/>
    </DataTemplate>
</Window.Resources>

    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.

    Lesson1_GroupHeaderCreateDataBinding

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

    Lesson1_GroupHeaderContentTemplate_Create

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

    <Window.Resources>
    <!-- ... -->
    <DataTemplate x:Key="leafTemplate">
        <StackPanel>
            <TextBlock Text="{Binding Label}" 
                       Margin="4,4,4,2" 
                       Foreground="White" 
                       TextWrapping="WrapWithOverflow"/>
            <TextBlock Text="{Binding Value, StringFormat=({0} billions)}" 
                       Foreground="LightGray" 
                       Margin="4,2,4,4"
                       TextWrapping="WrapWithOverflow"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

    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.

    Lesson1_LeafContentTempalateDataBinding

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

    Lesson1_LeafContentTemplate_Create

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

    Lesson1_ColorizeGroups

Now, the application is finished.

Result

The MainWindow’s XAML is represented below.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeMapLesson1"
        xmlns:dxtm="http://schemas.devexpress.com/winfx/2008/xaml/treemap" 
        x:Class="TreeMapLesson1.MainWindow"
        Title="MainWindow" Height="487" Width="654">
    <Window.Resources>
        <DataTemplate x:Key="headerTemplate">
            <TextBlock Text="{Binding Label}"
                   Margin="4,4,4,0"
                   Padding="4"
                   Foreground="White"
                   Background="Gray"/>
        </DataTemplate>
        <DataTemplate x:Key="leafTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Label}" 
                       Margin="4,4,4,2" 
                       Foreground="White" 
                       TextWrapping="WrapWithOverflow"/>
                <TextBlock Text="{Binding Value, StringFormat=({0} billions)}" 
                       Foreground="LightGray" 
                       Margin="4,2,4,4"
                       TextWrapping="WrapWithOverflow"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>

        <dxtm:TreeMapControl GroupHeaderContentTemplate="{Binding Source={StaticResource headerTemplate}}" 
                             LeafContentTemplate="{Binding Source={StaticResource leafTemplate}}">
            <dxtm:TreeMapControl.Colorizer>
                <dxtm:TreeMapPaletteColorizer ColorizeGroups="True"/>
            </dxtm:TreeMapControl.Colorizer>
            <dxtm:TreeMapItemStorage>
                <dxtm:TreeMapItem Label="Americas">
                    <dxtm:TreeMapItem Label="United States" Value="17.418"/>
                    <dxtm:TreeMapItem Label="Brazil" Value="2.353"/>
                </dxtm:TreeMapItem>
                <dxtm:TreeMapItem Label="Europe">
                    <dxtm:TreeMapItem Label="Germany" Value="3.859"/>
                    <dxtm:TreeMapItem Label="United Kingdom" Value="2.945"/>
                    <dxtm:TreeMapItem Label="France" Value="2.846"/>
                    <dxtm:TreeMapItem Label="Italy" Value="2.147"/>
                    <dxtm:TreeMapItem Label="Russia" Value="1.857"/>
                </dxtm:TreeMapItem>
                <dxtm:TreeMapItem Label="Asia">
                    <dxtm:TreeMapItem Label="China" Value="10.380"/>
                    <dxtm:TreeMapItem Label="Japan" Value="4.616"/>
                    <dxtm:TreeMapItem Label="India" Value="2.049"/>
                </dxtm:TreeMapItem>
            </dxtm:TreeMapItemStorage>
        </dxtm:TreeMapControl>

    </Grid>
</Window>

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

Lesson1_Result