TreeMapControl Class

A TreeMap Control to display flat and hierarchical data.

Namespace: DevExpress.Xpf.TreeMap

Assembly: DevExpress.Xpf.TreeMap.v22.2.dll

NuGet Package: DevExpress.Wpf.TreeMap

Declaration

C#

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

VB.NET

Public Class TreeMapControl
    Inherits HierarchicalChartControlBase
    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.

View Example

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.

XAML

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

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

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-the-range-colorizer-t307568/CS/TreeMapRangeColorizerSample/MainWindow.xaml#L10

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

how-to-configure-tree-map-end-user-interaction-permissions-t309113/CS/TreeMapHighlightingSelectionSample/MainWindow.xaml#L15

<!--region #InteractionProperties-->
<dxtm:TreeMapControl Grid.Column="0"
                     EnableHighlighting="{Binding ElementName=chkHighlighting, Path=IsChecked}"

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

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

Inheritance

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

HierarchicalChartControlBase

TreeMapControl