syncfusion-wpf-treemap — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited syncfusion-wpf-treemap (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Use this skill when the user needs to:
This skill covers the complete implementation of Syncfusion WPF TreeMap, from basic setup to advanced features like drill-down, color mapping, and custom templates.
Syncfusion WPF TreeMap (SfTreeMap) is a data visualization control that displays hierarchical information as a series of clustered rectangles. Each rectangle's size represents a quantitative value (weight), and its color can represent another dimension of the data.
Key Capabilities:
Common Use Cases:
📄 Read: references/getting-started.md
📄 Read: references/layout-modes.md
📄 Read: references/data-binding.md
📄 Read: references/color-mapping.md
📄 Read: references/levels-and-hierarchy.md
📄 Read: references/leaf-customization.md
📄 Read: references/headers-and-labels.md
📄 Read: references/interactive-features.md
📄 Read: references/legend.md
📄 Read: references/accessibility.md
Here's a minimal example to create a functional TreeMap displaying population data:
<Window x:Class="TreeMapDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeMap;assembly=Syncfusion.SfTreeMap.WPF"
Title="TreeMap Demo" WindowState="Maximized">
<Grid>
<Grid.DataContext>
<local:PopulationViewModel/>
</Grid.DataContext>
<syncfusion:SfTreeMap ItemsSource="{Binding PopulationDetails}"
WeightValuePath="Population"
ColorValuePath="Growth"
ItemsLayoutMode="Squarified">
<!-- Color mapping for growth values -->
<syncfusion:SfTreeMap.LeafColorMapping>
<syncfusion:RangeBrushColorMapping>
<syncfusion:RangeBrushColorMapping.Brushes>
<syncfusion:RangeBrush From="0" To="1" Color="#A4C400"/>
<syncfusion:RangeBrush From="1" To="2" Color="#AA00FF"/>
<syncfusion:RangeBrush From="2" To="3" Color="#F0A30A"/>
<syncfusion:RangeBrush From="3" To="4" Color="#1BA1E2"/>
</syncfusion:RangeBrushColorMapping.Brushes>
</syncfusion:RangeBrushColorMapping>
</syncfusion:SfTreeMap.LeafColorMapping>
<!-- Hierarchical levels -->
<syncfusion:SfTreeMap.Levels>
<syncfusion:TreeMapFlatLevel GroupPath="Continent"
GroupGap="10"
HeaderHeight="30">
<syncfusion:TreeMapFlatLevel.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"
Foreground="#D6D6D6"
FontSize="18"
FontWeight="Light"/>
</DataTemplate>
</syncfusion:TreeMapFlatLevel.HeaderTemplate>
</syncfusion:TreeMapFlatLevel>
</syncfusion:SfTreeMap.Levels>
</syncfusion:SfTreeMap>
</Grid>
</Window>// ViewModel with sample data
public class PopulationViewModel
{
public ObservableCollection<PopulationDetail> PopulationDetails { get; set; }
public PopulationViewModel()
{
PopulationDetails = new ObservableCollection<PopulationDetail>
{
new PopulationDetail { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 },
new PopulationDetail { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 },
new PopulationDetail { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 },
new PopulationDetail { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }
};
}
}
public class PopulationDetail
{
public string Continent { get; set; }
public string Country { get; set; }
public double Growth { get; set; }
public double Population { get; set; }
}When displaying flat data without hierarchical grouping:
<syncfusion:SfTreeMap ItemsSource="{Binding Items}"
WeightValuePath="Value"
ItemsLayoutMode="Squarified">
<syncfusion:SfTreeMap.LeafColorMapping>
<syncfusion:UniColorMapping Color="Crimson"/>
</syncfusion:SfTreeMap.LeafColorMapping>
</syncfusion:SfTreeMap>When displaying nested hierarchical data (e.g., Continent → Country):
<syncfusion:SfTreeMap.Levels>
<syncfusion:TreeMapFlatLevel GroupPath="Continent" GroupGap="10" HeaderHeight="30"/>
<syncfusion:TreeMapFlatLevel GroupPath="Country" GroupGap="5" HeaderHeight="20" ShowLabels="True"/>
</syncfusion:SfTreeMap.Levels>When coloring rectangles based on value ranges:
<syncfusion:SfTreeMap.LeafColorMapping>
<syncfusion:RangeBrushColorMapping>
<syncfusion:RangeBrushColorMapping.Brushes>
<syncfusion:RangeBrush From="0" To="25" Color="LightGreen"/>
<syncfusion:RangeBrush From="25" To="50" Color="Yellow"/>
<syncfusion:RangeBrush From="50" To="75" Color="Orange"/>
<syncfusion:RangeBrush From="75" To="100" Color="Red"/>
</syncfusion:RangeBrushColorMapping.Brushes>
</syncfusion:RangeBrushColorMapping>
</syncfusion:SfTreeMap.LeafColorMapping>When enabling user interaction:
<syncfusion:SfTreeMap SelectionModes="Multiple">
<!-- Multiple selection with Ctrl/Shift -->
</syncfusion:SfTreeMap>When showing detailed information on hover:
<syncfusion:SfTreeMap>
<syncfusion:SfTreeMap.TooltipTemplate>
<DataTemplate>
<StackPanel Background="White" Margin="5">
<TextBlock Text="{Binding Country}" FontWeight="Bold"/>
<TextBlock Text="{Binding Population, StringFormat='Population: {0:N0}'}"/>
</StackPanel>
</DataTemplate>
</syncfusion:SfTreeMap.TooltipTemplate>
</syncfusion:SfTreeMap>Display stock holdings where rectangle size = investment amount, color = performance:
Guidance: Use RangeBrushColorMapping with negative (red) to positive (green) ranges. Set WeightValuePath to investment amount, ColorValuePath to percentage gain/loss.
References: color-mapping.md, data-binding.md
Show folder sizes in a filesystem hierarchy:
Guidance: Use multi-level TreeMapFlatLevel with GroupPath for folder hierarchy. Set WeightValuePath to file size. Consider SliceAndDiceAuto layout for better readability.
References: levels-and-hierarchy.md, layout-modes.md
Display sales by region and salesperson:
Guidance: Create two levels (Region → Salesperson), use DesaturationColorMapping to highlight top performers with stronger colors. Enable tooltips to show detailed metrics.
References: interactive-features.md, levels-and-hierarchy.md
Visualize page views by category and page:
Guidance: Use PaletteColorMapping for distinct category colors. Add custom LeafTemplate to display page names and metrics. Enable drill-down for navigation.
References: color-mapping.md, leaf-customization.md, interactive-features.md
Display temperature or precipitation data by geographic region:
Guidance: Use DesaturationColorMapping where opacity represents humidity/precipitation. Set up GroupColorMapping for different regions with base colors.
References: color-mapping.md
Assembly: Syncfusion.SfTreeMap.WPF Namespace: Syncfusion.UI.Xaml.TreeMap
Add this namespace to your XAML:
xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeMap;assembly=Syncfusion.SfTreeMap.WPF"Theme Support:
Accessibility:
Next Steps:
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.