syncfusion-wpf-treemap
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing Syncfusion WPF TreeMap (SfTreeMap)
实现Syncfusion WPF TreeMap（SfTreeMap）
When to Use This Skill
何时使用该方案
Use this skill when the user needs to:
- Visualize hierarchical data as nested, sized rectangles representing quantities
- Display large datasets where TreeMap's space-efficient layout is ideal
- Implement data visualization for stock market analysis, usage statistics, or categorized data
- Create heat maps where color represents values and size represents weight
- Build WPF applications that need the Syncfusion TreeMap control (SfTreeMap)
- Customize TreeMap layouts, colors, levels, or interactive features
- Configure data binding for hierarchical or flat data structures
This skill covers the complete implementation of Syncfusion WPF TreeMap, from basic setup to advanced features like drill-down, color mapping, and custom templates.
当用户需要以下操作时，可使用该方案：
- 将层级数据可视化为代表数量的嵌套、按大小划分的矩形
- 展示大型数据集，TreeMap的高效空间布局在此场景下尤为理想
- 为股票市场分析、使用统计或分类数据实现数据可视化
- 创建热力图，其中颜色代表数值，大小代表权重
- 构建需要Syncfusion TreeMap控件（SfTreeMap）的WPF应用程序
- 自定义TreeMap布局、颜色、层级或交互功能
- 为层级或扁平数据结构配置数据绑定
该内容涵盖了Syncfusion WPF TreeMap的完整实现，从基础设置到钻取、颜色映射和自定义模板等高级功能。
Component Overview
组件概述
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:
- Multiple layout algorithms (Squarified, SliceAndDice variants)
- Flexible color mapping strategies (solid, range, desaturation, palette, group-based)
- Hierarchical levels with customizable headers
- Interactive features (selection, tooltips, drill-down)
- Comprehensive data binding support
- Accessibility and keyboard navigation
- Theme support
Common Use Cases:
- Stock Market Analysis - Rectangle size = stock weight, color = gain/loss
- Internet Usage Visualization - Categorize traffic by type (retail, social, search)
- News Aggregation - Color = section (business/politics), size = story count
- Weather Analysis - Opacity/color = humidity, size = geographic area
Syncfusion WPF TreeMap（SfTreeMap） 是一款数据可视化控件，它将层级信息显示为一系列聚类矩形。每个矩形的大小代表一个量化值（权重），其颜色可代表数据的另一维度。
核心功能：
- 多种布局算法（Squarified、SliceAndDice变体）
- 灵活的颜色映射策略（纯色、范围、饱和度调整、调色板、基于组的映射）
- 可自定义标题的层级结构
- 交互功能（选择、工具提示、钻取）
- 全面的数据绑定支持
- 无障碍访问和键盘导航
- 主题支持
常见使用场景：
- 股票市场分析 - 矩形大小=股票权重，颜色=涨跌幅度
- 互联网使用情况可视化 - 按类型（零售、社交、搜索）分类流量
- 新闻聚合 - 颜色=板块（商业/政治），大小=新闻数量
- 天气分析 - 透明度/颜色=湿度，大小=地理区域
Documentation and Navigation Guide
文档与导航指南
Getting Started
入门指南
📄 Read: references/getting-started.md
- Installation and package setup
- Assembly and namespace references (Syncfusion.SfTreeMap.WPF)
- Creating TreeMap via Visual Studio, Expression Blend, or code
- Basic TreeMap configuration in XAML and C#
- Setting up ItemsSource with data models
- DataContext configuration
- First working example with population data
- Theme support (SfSkinManager, ThemeStudio)
📄 阅读： references/getting-started.md
- 安装和包设置
- 程序集和命名空间引用（Syncfusion.SfTreeMap.WPF）
- 通过Visual Studio、Expression Blend或代码创建TreeMap
- XAML和C#中的基础TreeMap配置
- 使用数据模型设置ItemsSource
- DataContext配置
- 第一个基于人口数据的可用示例
- 主题支持（SfSkinManager、ThemeStudio）
Layout Modes
布局模式
📄 Read: references/layout-modes.md
- Available layout algorithms
- Squarified layout (default, optimized aspect ratios)
- SliceAndDiceAuto (alternates horizontal/vertical by level)
- SliceAndDiceHorizontal (horizontal slicing only)
- SliceAndDiceVertical (vertical slicing only)
- Choosing the right layout for your data
- Performance considerations
📄 阅读： references/layout-modes.md
- 可用的布局算法
- Squarified布局（默认，优化宽高比）
- SliceAndDiceAuto（按层级交替水平/垂直划分）
- SliceAndDiceHorizontal（仅水平划分）
- SliceAndDiceVertical（仅垂直划分）
- 为您的数据选择合适的布局
- 性能考量
Data Binding and Configuration
数据绑定与配置
📄 Read: references/data-binding.md
- WeightValuePath property (determines rectangle sizes)
- ColorValuePath property (drives color mapping)
- ItemsSource binding to collections
- Data model requirements and structure
- Hierarchical vs flat data binding
- Supported collection types (ObservableCollection, List, etc.)
📄 阅读： references/data-binding.md
- WeightValuePath属性（决定矩形大小）
- ColorValuePath属性（驱动颜色映射）
- ItemsSource绑定到集合
- 数据模型要求和结构
- 层级 vs 扁平数据绑定
- 支持的集合类型（ObservableCollection、List等）
Color Mapping
颜色映射
📄 Read: references/color-mapping.md
- Color mapping overview and types
- UniColorMapping (solid color for all leaves)
- RangeBrushColorMapping (colors based on value ranges)
- DesaturationColorMapping (opacity ranges for visual emphasis)
- PaletteColorMapping (cycling through color collections)
- GroupColorMapping (different colors per group)
- LeafColorMapping vs TreeMapLevel ColorMapping
- Applying colors to leaf nodes vs headers
📄 阅读： references/color-mapping.md
- 颜色映射概述和类型
- UniColorMapping（所有叶子节点使用纯色）
- RangeBrushColorMapping（基于数值范围的颜色）
- DesaturationColorMapping（使用透明度范围实现视觉强调）
- PaletteColorMapping（循环使用颜色集合）
- GroupColorMapping（不同组使用不同颜色）
- LeafColorMapping vs TreeMapLevel ColorMapping
- 为叶子节点和标题应用颜色
TreeMap Levels and Hierarchy
TreeMap层级与结构
📄 Read: references/levels-and-hierarchy.md
- TreeMapFlatLevel for grouping flat data
- GroupPath property for hierarchical organization
- Configuring multiple levels
- GroupGap for spacing between groups
- Header configuration (HeaderHeight, ShowHeader)
- Header templates and styling
- ShowLabels property for leaf labels
- Creating nested hierarchies
📄 阅读： references/levels-and-hierarchy.md
- TreeMapFlatLevel用于对扁平数据分组
- GroupPath属性用于层级组织
- 配置多个层级
- GroupGap用于组之间的间距
- 标题配置（HeaderHeight、ShowHeader）
- 标题模板和样式
- ShowLabels属性用于叶子节点标签
- 创建嵌套层级
Leaf Node Customization
叶子节点自定义
📄 Read: references/leaf-customization.md
- LeafItemSettings overview
- Border customization (LeafBorderBrush, LeafBorderThickness)
- LeafLabelPath for displaying text on leaves
- LeafTemplate for custom leaf UI
- Label positioning and formatting
- Customizing individual leaf appearances
- Template examples for complex leaf content
📄 阅读： references/leaf-customization.md
- LeafItemSettings概述
- 边框自定义（LeafBorderBrush、LeafBorderThickness）
- LeafLabelPath用于在叶子节点上显示文本
- LeafTemplate用于自定义叶子节点UI
- 标签定位和格式化
- 自定义单个叶子节点的外观
- 复杂叶子节点内容的模板示例
Headers and Labels
标题与标签
📄 Read: references/headers-and-labels.md
- Header templates (HeaderTemplate property)
- Header styling and customization
- Label visibility and content control
- Custom header content with data binding
- Positioning headers within levels
📄 阅读： references/headers-and-labels.md
- 标题模板（HeaderTemplate属性）
- 标题样式和自定义
- 标签可见性和内容控制
- 带数据绑定的自定义标题内容
- 层级内的标题定位
Interactive Features
交互功能
📄 Read: references/interactive-features.md
- Selection support (single and multiple)
- SelectionModes (Default, Multiple)
- SelectedItems property and selection events
- Tooltip configuration and display
- TooltipTemplate for custom tooltips
- Drill-down navigation support
- DrillDownHeaderTemplate customization
- EnableDrillDown property
📄 阅读： references/interactive-features.md
- 选择支持（单选和多选）
- SelectionModes（Default、Multiple）
- SelectedItems属性和选择事件
- 工具提示配置和显示
- TooltipTemplate用于自定义工具提示
- 钻取导航支持
- DrillDownHeaderTemplate自定义
- EnableDrillDown属性
Legend
图例
📄 Read: references/legend.md
- Legend overview and purpose
- ShowLegend property
- LegendType (Gradient, DockPosition)
- LegendHeight and LegendWidth configuration
- LegendTemplate for custom legends
- Legend positioning options
📄 阅读： references/legend.md
- 图例概述和用途
- ShowLegend属性
- LegendType（Gradient、DockPosition）
- LegendHeight和LegendWidth配置
- LegendTemplate用于自定义图例
- 图例定位选项
Accessibility
无障碍访问
📄 Read: references/accessibility.md
- Keyboard navigation support
- Tab and Shift+Tab navigation between items
- SelectionModes impact on keyboard behavior
- WCAG compliance features
- Screen reader support
📄 阅读： references/accessibility.md
- 键盘导航支持
- 使用Tab和Shift+Tab在项之间导航
- SelectionModes对键盘行为的影响
- WCAG合规特性
- 屏幕阅读器支持
Quick Start Example
快速入门示例
Here's a minimal example to create a functional TreeMap displaying population data:
xaml
<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>csharp
// 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; }
}以下是一个创建显示人口数据的功能性TreeMap的最简示例：
xaml
<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>csharp
// 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; }
}Common Patterns
常见模式
Pattern 1: Basic TreeMap with Single Level
模式1：单层基础TreeMap
When displaying flat data without hierarchical grouping:
xaml
<syncfusion:SfTreeMap ItemsSource="{Binding Items}"
WeightValuePath="Value"
ItemsLayoutMode="Squarified">
<syncfusion:SfTreeMap.LeafColorMapping>
<syncfusion:UniColorMapping Color="Crimson"/>
</syncfusion:SfTreeMap.LeafColorMapping>
</syncfusion:SfTreeMap>当显示无层级分组的扁平数据时：
xaml
<syncfusion:SfTreeMap ItemsSource="{Binding Items}"
WeightValuePath="Value"
ItemsLayoutMode="Squarified">
<syncfusion:SfTreeMap.LeafColorMapping>
<syncfusion:UniColorMapping Color="Crimson"/>
</syncfusion:SfTreeMap.LeafColorMapping>
</syncfusion:SfTreeMap>Pattern 2: Multi-Level Hierarchy
模式2：多层级结构
When displaying nested hierarchical data (e.g., Continent → Country):
xaml
<syncfusion:SfTreeMap.Levels>
<syncfusion:TreeMapFlatLevel GroupPath="Continent" GroupGap="10" HeaderHeight="30"/>
<syncfusion:TreeMapFlatLevel GroupPath="Country" GroupGap="5" HeaderHeight="20" ShowLabels="True"/>
</syncfusion:SfTreeMap.Levels>当显示嵌套层级数据（如：大洲→国家）时：
xaml
<syncfusion:SfTreeMap.Levels>
<syncfusion:TreeMapFlatLevel GroupPath="Continent" GroupGap="10" HeaderHeight="30"/>
<syncfusion:TreeMapFlatLevel GroupPath="Country" GroupGap="5" HeaderHeight="20" ShowLabels="True"/>
</syncfusion:SfTreeMap.Levels>Pattern 3: Range-Based Color Mapping
模式3：基于范围的颜色映射
When coloring rectangles based on value ranges:
xaml
<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>当根据数值范围为矩形着色时：
xaml
<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>Pattern 4: Selection and Interaction
模式4：选择与交互
When enabling user interaction:
xaml
<syncfusion:SfTreeMap SelectionModes="Multiple">
<!-- Multiple selection with Ctrl/Shift -->
</syncfusion:SfTreeMap>当启用用户交互时：
xaml
<syncfusion:SfTreeMap SelectionModes="Multiple">
<!-- Multiple selection with Ctrl/Shift -->
</syncfusion:SfTreeMap>Pattern 5: Custom Tooltips
模式5：自定义工具提示
When showing detailed information on hover:
xaml
<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>当鼠标悬停时显示详细信息时：
xaml
<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>Key Properties
关键属性
Essential Properties
核心属性
- ItemsSource - Collection of data objects to visualize
- WeightValuePath - Property name determining rectangle sizes
- ColorValuePath - Property name determining color mapping values
- ItemsLayoutMode - Layout algorithm (Squarified, SliceAndDiceAuto, etc.)
- ItemsSource - 要可视化的数据对象集合
- WeightValuePath - 决定矩形大小的属性名称
- ColorValuePath - 驱动颜色映射的属性名称
- ItemsLayoutMode - 布局算法（Squarified、SliceAndDiceAuto等）
Color Mapping Properties
颜色映射属性
- LeafColorMapping - Color mapping strategy for leaf nodes
- RangeBrushColorMapping.Brushes - Color ranges for value-based coloring
- DesaturationColorMapping - Opacity-based color mapping
- PaletteColorMapping.Colors - Collection of colors to cycle through
- LeafColorMapping - 叶子节点的颜色映射策略
- RangeBrushColorMapping.Brushes - 基于数值的颜色范围
- DesaturationColorMapping - 基于透明度的颜色映射
- PaletteColorMapping.Colors - 循环使用的颜色集合
Level Configuration
层级配置
- Levels - Collection of TreeMapFlatLevel objects
- GroupPath - Property name for grouping data at each level
- GroupGap - Spacing between groups (in pixels)
- HeaderHeight - Height of group headers
- HeaderTemplate - Custom template for headers
- ShowHeader - Show/hide headers at a level
- ShowLabels - Show/hide labels on leaf nodes
- Levels - TreeMapFlatLevel对象的集合
- GroupPath - 每个层级用于数据分组的属性名称
- GroupGap - 组之间的间距（像素）
- HeaderHeight - 组标题的高度
- HeaderTemplate - 自定义标题模板
- ShowHeader - 显示/隐藏某一层级的标题
- ShowLabels - 显示/隐藏叶子节点的标签
Leaf Customization
叶子节点自定义
- LeafItemSettings - Settings for leaf node appearance
- LeafBorderBrush - Border color for leaf nodes
- LeafBorderThickness - Border thickness for leaf nodes
- LeafLabelPath - Property name for leaf labels
- LeafTemplate - Custom template for leaf content
- LeafItemSettings - 叶子节点外观设置
- LeafBorderBrush - 叶子节点的边框颜色
- LeafBorderThickness - 叶子节点的边框厚度
- LeafLabelPath - 叶子节点标签的属性名称
- LeafTemplate - 自定义叶子节点内容的模板
Interactive Features
交互功能属性
- SelectionModes - Selection behavior (Default, Multiple)
- SelectedItems - Collection of currently selected items
- TooltipTemplate - Custom template for tooltips
- EnableDrillDown - Enable drill-down navigation
- DrillDownHeaderTemplate - Template for drill-down headers
- SelectionModes - 选择行为（Default、Multiple）
- SelectedItems - 当前选中项的集合
- TooltipTemplate - 自定义工具提示的模板
- EnableDrillDown - 启用钻取导航
- DrillDownHeaderTemplate - 钻取标题的模板
Legend Properties
图例属性
- ShowLegend - Show/hide legend
- LegendType - Legend display type
- LegendHeight/LegendWidth - Legend dimensions
- LegendTemplate - Custom template for legend
- ShowLegend - 显示/隐藏图例
- LegendType - 图例显示类型
- LegendHeight/LegendWidth - 图例尺寸
- LegendTemplate - 自定义图例的模板
Common Use Cases
常见使用场景
Use Case 1: Stock Portfolio Visualization
场景1：股票投资组合可视化
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
显示股票持仓，其中矩形大小=投资金额，颜色=表现：
指南： 使用RangeBrushColorMapping，设置从负（红色）到正（绿色）的范围。将WeightValuePath设置为投资金额，ColorValuePath设置为涨跌百分比。
参考： color-mapping.md, data-binding.md
Use Case 2: Disk Space Usage Analysis
场景2：磁盘空间使用情况分析
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
显示文件系统层级中的文件夹大小：
指南： 使用多层级TreeMapFlatLevel，将GroupPath设置为文件夹层级。将WeightValuePath设置为文件大小。考虑使用SliceAndDiceAuto布局以提高可读性.
参考： levels-and-hierarchy.md, layout-modes.md
Use Case 3: Sales Performance Dashboard
场景3：销售业绩仪表盘
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
按地区和销售人员显示销售额：
指南： 创建两个层级（地区→销售人员），使用DesaturationColorMapping以更鲜明的颜色突出表现最佳的人员。启用工具提示以显示详细指标。
参考： interactive-features.md, levels-and-hierarchy.md
Use Case 4: Website Traffic Analysis
场景4：网站流量分析
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
按类别和页面可视化页面浏览量：
指南： 使用PaletteColorMapping为不同类别设置不同颜色。添加自定义LeafTemplate以显示页面名称和指标。启用钻取以实现导航。
参考： color-mapping.md, leaf-customization.md, interactive-features.md
Use Case 5: Weather Data Visualization
场景5：天气数据可视化
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
按地理区域显示温度或降水数据：
指南： 使用DesaturationColorMapping，其中透明度代表湿度/降水量。为不同区域设置GroupColorMapping基础颜色。
参考： color-mapping.md
Assembly and Namespace
程序集与命名空间
Assembly: Syncfusion.SfTreeMap.WPF
Namespace: Syncfusion.UI.Xaml.TreeMap
Namespace: Syncfusion.UI.Xaml.TreeMap
Add this namespace to your XAML:
xaml
xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeMap;assembly=Syncfusion.SfTreeMap.WPF"程序集： Syncfusion.SfTreeMap.WPF
命名空间： Syncfusion.UI.Xaml.TreeMap
命名空间： Syncfusion.UI.Xaml.TreeMap
将此命名空间添加到您的XAML中：
xaml
xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.TreeMap;assembly=Syncfusion.SfTreeMap.WPF"Additional Resources
额外资源
Theme Support:
- Apply themes using SfSkinManager
- Create custom themes with ThemeStudio
- See: references/getting-started.md
Accessibility:
- Keyboard navigation (Tab/Shift+Tab)
- WCAG compliance
- See: references/accessibility.md
Next Steps:
- Review getting-started.md for installation and setup
- Choose appropriate layout from layout-modes.md
- Configure data binding using data-binding.md
- Apply color mapping strategies from color-mapping.md
- Add levels and hierarchy as needed from levels-and-hierarchy.md
主题支持：
- 使用SfSkinManager应用主题
- 使用ThemeStudio创建自定义主题
- 查看：references/getting-started.md
无障碍访问：
- 键盘导航（Tab/Shift+Tab）
- WCAG合规
- 查看：references/accessibility.md
后续步骤：
- 查看getting-started.md了解安装和设置
- 从layout-modes.md中选择合适的布局
- 使用data-binding.md配置数据绑定
- 应用color-mapping.md中的颜色映射策略
- 根据需要从levels-and-hierarchy.md添加层级和结构