LeafItemSettings in WPF TreeMap (SfTreeMap)

7 May 20216 minutes to read

LeafItemSettings of SfTreeMap is a setting by which we can settings the template for the leafNode.

<Grid Background="Black">

        <Grid.DataContext>

            <local:PopulationViewModel/>

        </Grid.DataContext>

        <syncfusion:SfTreeMap Name="TreeMap" ItemsSource="{Binding PopulationDetails}" WeightValuePath="Population" ColorValuePath="Growth"

                              ItemsLayoutMode="Squarified" Margin="10">

            <syncfusion:SfTreeMap.LeafItemSettings>

                <syncfusion:LeafItemSettings/>

            </syncfusion:SfTreeMap.LeafItemSettings>

       </syncfusion:SfTreeMap>

    </Grid>

NOTE

The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection.

LabelPath

LabelPath of the leaves is WeightValuePath by default and you can change the LabelPath as desired based on the data provided.

XAML

<Grid Background="Black">

        <Grid.DataContext>

            <local:PopulationViewModel/>

        </Grid.DataContext>

        <syncfusion:SfTreeMap Name="TreeMap" ItemsSource="{Binding PopulationDetails}" WeightValuePath="Population" ColorValuePath="Growth"

                              ItemsLayoutMode="Squarified" Margin="10">

            <syncfusion:SfTreeMap.LeafItemSettings>

                <syncfusion:LeafItemSettings LabelPath="Country"/>                                                                                      </syncfusion:SfTreeMap.LeafItemSettings>

       </syncfusion:SfTreeMap>

    </Grid>

LabelTemplate

LabelTemplate of LeafItemSettings class provides the template for the labels of the leafNodes.

XAML

<Grid Background="Black">

        <Grid.DataContext>

            <local:PopulationViewModel/>

        </Grid.DataContext>

        <syncfusion:SfTreeMap Name="TreeMap" ItemsSource="{Binding PopulationDetails}" WeightValuePath="Population" ColorValuePath="Growth"

                              ItemsLayoutMode="Squarified" Margin="10">

            <syncfusion:SfTreeMap.LeafItemSettings>

                <syncfusion:LeafItemSettings>

                    <syncfusion:LeafItemSettings.LabelTemplate>

                            <DataTemplate>

                                <TextBlock Text="{Binding Data.Country}" Foreground="White" FontSize="16" FontWeight="Normal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,5,0,0"/>

                            </DataTemplate>



                    </syncfusion:LeafItemSettings.LabelTemplate>

                </syncfusion:LeafItemSettings>

            </syncfusion:SfTreeMap.LeafItemSettings>

       </syncfusion:SfTreeMap>

    </Grid>

Gap

Gap provides the gap between the leaves at Leaf Level.

XAML

<Grid Background="Black">

        <Grid.DataContext>

            <local:PopulationViewModel/>

        </Grid.DataContext>

        <syncfusion:SfTreeMap Name="TreeMap" ItemsSource="{Binding PopulationDetails}" WeightValuePath="Population" ColorValuePath="Growth"

                              ItemsLayoutMode="Squarified" Margin="10">

            <syncfusion:SfTreeMap.LeafItemSettings>

                <syncfusion:LeafItemSettings Gap="5">

                </syncfusion:LeafItemSettings>

            </syncfusion:SfTreeMap.LeafItemSettings>

       </syncfusion:SfTreeMap>

    </Grid>

BorderBrush

BorderBrush provides the border color for the leafNodes and BorderThickness provides the thickness of the BorderBrush.

XAML

<Grid Background="Black">

        <Grid.DataContext>

            <local:PopulationViewModel/>

        </Grid.DataContext>

        <syncfusion:SfTreeMap Name="TreeMap" ItemsSource="{Binding PopulationDetails}" WeightValuePath="Population" ColorValuePath="Growth"

                              ItemsLayoutMode="Squarified" Margin="10">

            <syncfusion:SfTreeMap.LeafItemSettings>

                <syncfusion:LeafItemSettings BorderBrush="Red" BorderThickness="3"/>  

            </syncfusion:SfTreeMap.LeafItemSettings>

       </syncfusion:SfTreeMap>

    </Grid>

LeafItemSettings_img1