TreeMapControl Class

A TreeMap Control to display flat and hierarchical data.

Namespace: DevExpress.Xpf.TreeMap

Assembly: DevExpress.Xpf.TreeMap.v19.1.dll

Declaration

C#

public class TreeMapControl :
    Control,
    ITreeMapLayoutCalculator,
    INativeItemsCollector,
    ITreeMapItemColorizer,
    IWeakEventListener

VB.NET

Public Class TreeMapControl
    Inherits Control
    Implements ITreeMapLayoutCalculator,
               INativeItemsCollector,
               ITreeMapItemColorizer,
               IWeakEventListener

Remarks

The DevExpress WPF TreeMap Control provides all the functionality required to display tree maps in your WPF applications. You are free to use a data source representing flat data and group it, or the hierarchical data source for visualization.

The control has built-in item highlighting, selection and tooltips.

The following image demonstrates a TreeMapControl.

To get acquainted with using the TreeMapControl, please refer to the Getting Started section.

Example

To provide flat data to the Tree Map, perform the following steps.

• Assign a new TreeMapFlatDataAdapter object to the TreeMapControl.DataAdapter property.
• Specify the adapter’s TreeMapFlatDataAdapter.DataSource, TreeMapFlatDataAdapter.LabelDataMember and TreeMapFlatDataAdapter.ValueDataMember properties.
• Optionally, to group automatically generated tree map items, add the TreeMapGroupDefinition to the TreeMapFlatDataAdapter.Groups collection, and specify the definition’s TreeMapGroupDefinition.GroupDataMember and TreeMapGroupDefinition.HeaderContentTemplate properties.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-provide-flat-data-to-the-treemap-t308588.

MainWindow.xaml

<Window.Resources>
    <XmlDataProvider 
        x:Key="gdpDataSource" 
        Source="Data/top10gdp.xml"/>
    <DataTemplate 
        x:Key="headerTemplate">
        <Border 
            BorderBrush="#606060" 
            BorderThickness="1" 
            Margin="4,4,4,-4">
            <TextBlock 
                Padding="6,2,0,2"
                Text="{Binding Label}"
                Background="#808080"
                Foreground="White"/>
        </Border>
    </DataTemplate>
</Window.Resources>
<Grid>
    <dxtm:TreeMapControl>
        <dxtm:TreeMapControl.Colorizer>
            <dxtm:TreeMapPaletteColorizer>
                <dxtm:Office2016Palette/>
            </dxtm:TreeMapPaletteColorizer>
        </dxtm:TreeMapControl.Colorizer>
        <dxtm:TreeMapFlatDataAdapter 
            DataSource="{Binding Source={StaticResource gdpDataSource}}"
            DataMember="Country"
            LabelDataMember="Name"
            ValueDataMember="Gdp">
            <dxtm:TreeMapFlatDataAdapter.Groups>
                <dxtm:GroupDefinitionCollection>
                    <dxtm:TreeMapGroupDefinition 
                        GroupDataMember="SideOfWorld"
                        HeaderContentTemplate="{Binding Source={StaticResource headerTemplate}}"/>
                </dxtm:GroupDefinitionCollection>
            </dxtm:TreeMapFlatDataAdapter.Groups>
        </dxtm:TreeMapFlatDataAdapter>
    </dxtm:TreeMapControl>
</Grid>

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the TreeMapControl class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

how-to-change-the-layout-algorithm-used-by-treemap-t308988/CS/TreeMapLayoutAlgorithmCustomizationSample/MainWindow.xaml#L13

<!--region #LayoutAlgorithm-->
<dxtm:TreeMapControl x:Name="treeMap"
                     LayoutAlgorithm="{Binding ElementName=lbLayoutAlgorithm, Path=SelectedValue}">

how-to-color-tree-map-items-using-gradient-colorizer-t307515/CS/TreeMapGradientColorizerSample/MainWindow.xaml#L11

<Grid>
    <dxtm:TreeMapControl>
        <!--region #TreeMapGradientColorizer-->

how-to-manually-provide-data-to-the-treemap-t308324/CS/TreeMapItemStorageSample/MainWindow.xaml#L9

<!--region #TreeMapItemStorage-->
<dxtm:TreeMapControl>
    <dxtm:TreeMapControl.Colorizer>

how-to-implement-the-custom-tree-map-colorizer-t309141/CS/CustomColorizerSample/MainWindow.xaml#L11

<Grid>
    <dxtm:TreeMapControl>
        <dxtm:TreeMapControl.Colorizer>

how-to-provide-flat-data-to-the-treemap-t308588/CS/TreeMapFlatDataAdapterSample/MainWindow.xaml#L30

<Grid>
    <dxtm:TreeMapControl>
        <dxtm:TreeMapControl.Colorizer>

Inheritance

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

TreeMapControl

Extension Methods

GetErrorOperationCommands(Position)

GetErrorOperationCommands(Int32)

GetErrorOperationCommands(Point)