Drill Down Support in WPF TreeMap (SfTreeMap)

10 May 20213 minutes to read

TreeMap enables drill down to expose the hierarchy by clicking on a treemap node and allows drill up by clicking on drill down header. At a time, only one level of the hierarchy can be seen in the treemap.

Enabling Drill Down

Treemap items can be drilled down by enabling the property EnableDrillDown to ‘true’. The hierarchy of treemap levels can be shown by clicking on treemap items. The previous level can be drilled up by clicking on drill down header. DrillDown header can be customized with the help of DrillDownHeaderTemplate property.

Drill Down Properties

Property	Type	Description
EnableDrillDown	Bool	Gets or sets a value to indicate whether the drill down support should be enabled.
DrillDownHeaderHeight	Double	Gets or sets a value for specifying the height for drill down header.
DrillDownHeaderTemplate	DataTemplate	Gets or sets a template to customize drill down header.
DrillDownSelectionStroke	Brush	Gets or sets a color for highlighting tree map item while drill down.

XAML

<syncfusion:SfTreeMap x:Name="TreeMap" ItemsSource="{Binding}" 

                      EnableDrillDown="True"     

                      DrillDownSelectionStroke="#1A9DAF"

                      WeightValuePath="Population" ColorValuePath="Area"

                      LeafLabelPath="Name" BorderThickness="1">

    <syncfusion:SfTreeMap.DrillDownHeaderTemplate>

        <DataTemplate>

            <Border Background="#1A9DAF">

                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="10 0">

                    <Path x:Name="path" Data="M197,153.5 L197,138 186.75,145.5 z" Height="16" Width="8" Fill="White" Stretch="Fill" />

                    <TextBlock Text="{Binding}" Margin="10 0" FontSize="15" 

                               FontWeight="Normal" FontFamily="Segoe UI" Foreground="White"/>

                </StackPanel>

            </Border>

        </DataTemplate>

    </syncfusion:SfTreeMap.DrillDownHeaderTemplate>

    <syncfusion:SfTreeMap.LeafColorMapping>

        <syncfusion:UniColorMapping Color="#CCDFE3"/>

    </syncfusion:SfTreeMap.LeafColorMapping>

    <syncfusion:SfTreeMap.Levels>

        <syncfusion:TreeMapFlatLevel GroupPath="Continent" ShowLabels="True"/>

        <syncfusion:TreeMapFlatLevel GroupPath="Country" ShowLabels="True"/>

    </syncfusion:SfTreeMap.Levels>

</syncfusion:SfTreeMap>

The following screenshot illustrates a TreeMap with drill down support.

Drilldown support image

TreeMap with drill down support

Drill Down Support in WPF TreeMap (SfTreeMap)

Enabling Drill Down

see also