How to: Provide Hierarchical Data to a Tree Map

• Jun 07, 2019

To provide hierarchical data to the Tree Map, do the following.

• Assign a newly created TreeMapHierarchicalDataAdapter to the TreeMapControl.DataAdapter property.
• Specify the adapter’s TreeMapHierarchicalDataAdapter.DataSource and TreeMapHierarchicalDataAdapter.ValueDataMember properties.
• Create Data Templates that will be used to represent the hierarchical data items.

MainWindow.xaml

<Window.Resources>
    <HierarchicalDataTemplate 
        DataType="{x:Type local:SideOfWorld}"
        ItemsSource="{Binding Countries}">
        <TextBlock 
            Margin="4,4,4,-3"
            Padding="4,2,0,2"
            Text="{Binding Name}"
            Foreground="White"
            Background="Gray"/>
    </HierarchicalDataTemplate>
    <DataTemplate
        DataType="{x:Type local:Country}">
        <Grid>
            <TextBlock 
                Padding="4,2,0,0"
                Text="{Binding Name}" 
                TextWrapping="WrapWithOverflow" 
                TextTrimming="WordEllipsis"/>
            <Border 
                BorderThickness="1" 
                BorderBrush="#60000000"/>
        </Grid>
    </DataTemplate>
</Window.Resources>

<Grid>
    <dxtm:TreeMapControl>
        <dxtm:TreeMapControl.Colorizer>
            <dxtm:TreeMapPaletteColorizer>
                <dxtm:Office2013Palette/>
            </dxtm:TreeMapPaletteColorizer>
        </dxtm:TreeMapControl.Colorizer>
        <dxtm:TreeMapHierarchicalDataAdapter
            DataSource="{Binding}"
            ValueDataMember="Gdp">
        </dxtm:TreeMapHierarchicalDataAdapter>
    </dxtm:TreeMapControl>
</Grid>