syncfusion-wpf-diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Diagram (SfDiagram)

实现Syncfusion WPF Diagram (SfDiagram)

The Syncfusion WPF Diagram control (SfDiagram) is a feature-rich diagramming library for building interactive flowcharts, org charts, BPMN diagrams, UML diagrams, network diagrams, and more in WPF applications. It provides nodes, connectors, annotations, ports, automatic layouts, and extensive customization options.

Syncfusion WPF Diagram控件（SfDiagram）是一个功能丰富的图表库，用于在WPF应用中构建交互式流程图、组织结构图、BPMN图、UML图、网络图等。它提供节点、连接器、注释、端口、自动布局以及丰富的定制选项。

When to Use This Skill

何时使用此技能

Creating any visual diagram in a WPF application (flowchart, org chart, mindmap, etc.)
Adding nodes, connectors, annotations, or ports to a diagram
Implementing BPMN or UML diagrams
Setting up automatic diagram layouts (hierarchical, org, mindmap, flowchart, radial)
Configuring a symbol palette (stencil) for drag-and-drop diagram building
Binding a data source to generate diagrams dynamically
Enabling diagram interaction (selection, drag, resize, zoom, keyboard shortcuts)
Exporting or printing diagrams
Customizing diagram appearance (gridlines, rulers, themes, page settings)

在WPF应用中创建任何可视化图表（流程图、组织结构图、思维导图等）
为图表添加节点、连接器、注释或端口
实现BPMN或UML图
设置自动图表布局（层级、组织、思维导图、流程图、放射状）
配置符号面板（模具）以支持拖拽构建图表
绑定数据源以动态生成图表
启用图表交互（选择、拖拽、调整大小、缩放、键盘快捷键）
导出或打印图表
定制图表外观（网格线、标尺、主题、页面设置）

Quick Start

快速入门

1. Install NuGet Package

1. 安装NuGet包

powershell

Install-Package Syncfusion.SfDiagram.WPF

powershell

Install-Package Syncfusion.SfDiagram.WPF

2. Add Namespace in XAML

2. 在XAML中添加命名空间

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

xaml

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

3. Declare SfDiagram

3. 声明SfDiagram

xaml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:SfDiagram x:Name="diagram">
            <syncfusion:SfDiagram.Nodes>
                <syncfusion:NodeCollection/>
            </syncfusion:SfDiagram.Nodes>
            <syncfusion:SfDiagram.Connectors>
                <syncfusion:ConnectorCollection/>
            </syncfusion:SfDiagram.Connectors>
        </syncfusion:SfDiagram>
    </Grid>
</Window>

xaml

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ...>
    <Grid>
        <syncfusion:SfDiagram x:Name="diagram">
            <syncfusion:SfDiagram.Nodes>
                <syncfusion:NodeCollection/>
            </syncfusion:SfDiagram.Nodes>
            <syncfusion:SfDiagram.Connectors>
                <syncfusion:ConnectorCollection/>
            </syncfusion:SfDiagram.Connectors>
        </syncfusion:SfDiagram>
    </Grid>
</Window>

4. Add a Node and Connector in Code-Behind

4. 在代码后置文件中添加节点和连接器

csharp

using Syncfusion.UI.Xaml.Diagram;

// Add nodes
var node1 = new NodeViewModel { ID = "Start", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 100, Shape = this.Resources["Ellipse"] };
var node2 = new NodeViewModel { ID = "End", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 250, Shape = this.Resources["Rectangle"] };
(diagram.Nodes as NodeCollection).Add(node1);
(diagram.Nodes as NodeCollection).Add(node2);

// Add connector
var connector = new ConnectorViewModel { SourceNodeID = "Start", TargetNodeID = "End" };
(diagram.Connectors as ConnectorCollection).Add(connector);

csharp

using Syncfusion.UI.Xaml.Diagram;

// 添加节点
var node1 = new NodeViewModel { ID = "Start", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 100, Shape = this.Resources["Ellipse"] };
var node2 = new NodeViewModel { ID = "End", UnitWidth = 120, UnitHeight = 40,
    OffsetX = 200, OffsetY = 250, Shape = this.Resources["Rectangle"] };
(diagram.Nodes as NodeCollection).Add(node1);
(diagram.Nodes as NodeCollection).Add(node2);

// 添加连接器
var connector = new ConnectorViewModel { SourceNodeID = "Start", TargetNodeID = "End" };
(diagram.Connectors as ConnectorCollection).Add(connector);

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Assembly deployment and NuGet setup
Adding SfDiagram via XAML or code
License key registration
Merging built-in shape resource dictionaries
Creating a minimal flowchart example

📄 阅读： references/getting-started.md

程序集部署与NuGet设置
通过XAML或代码添加SfDiagram
许可证密钥注册
合并内置形状资源字典
创建最小化流程图示例

Nodes

节点

📄 Read: references/nodes.md

Defining and positioning nodes (XAML and C#)
Built-in shapes and custom shape templates
Node appearance: fill, stroke, shadow, tooltip
Node groups and containers
Node constraints (lock, select, resize, rotate)
Node events

📄 阅读： references/nodes.md

定义和定位节点（XAML和C#）
内置形状与自定义形状模板
节点外观：填充、描边、阴影、工具提示
节点组与容器
节点约束（锁定、选择、调整大小、旋转）
节点事件

Connectors

连接器

📄 Read: references/connectors.md

Defining connectors between nodes
Connector types: straight, orthogonal, cubic Bezier, arc, quadratic
Appearance: line style, arrows, dashes
Connector routing and segments
Connector constraints and interaction
Connector splitting at intersection

📄 阅读： references/connectors.md

定义节点间的连接器
连接器类型：直线、正交、三次贝塞尔曲线、弧线、二次曲线
外观：线条样式、箭头、虚线
连接器路由与分段
连接器约束与交互
连接器在交点处拆分

Annotations

注释

📄 Read: references/annotations.md

Adding text labels to nodes and connectors
Positioning and alignment of annotations
Appearance customization (font, background, border)
Editing annotations at runtime
Annotation events

📄 阅读： references/annotations.md

为节点和连接器添加文本标签
注释的定位与对齐
外观定制（字体、背景、边框）
运行时编辑注释
注释事件

Ports

端口

📄 Read: references/ports.md

Defining connection ports on nodes
Port types and visual appearance
Hover effects on ports
Automatic port creation
Port-to-port connector creation

📄 阅读： references/ports.md

在节点上定义连接端口
端口类型与视觉外观
端口悬停效果
自动创建端口
端口到端口的连接器创建

Interaction

交互

📄 Read: references/interaction.md

Selection (single, multi, select by type)
Drag and drop nodes and connectors
Resize, rotate, and flip
Zoom and pan
Keyboard shortcuts
Tooltips and user handles
Scroll settings, drag limits, snapping

📄 阅读： references/interaction.md

选择（单选、多选、按类型选择）
拖拽节点和连接器
调整大小、旋转与翻转
缩放与平移
键盘快捷键
工具提示与用户手柄
滚动设置、拖拽限制、对齐吸附

Commands

命令

📄 Read: references/commands.md

Alignment (left, right, top, bottom, center)
Clipboard operations (cut, copy, paste, duplicate)
Delete nodes and connectors
Undo/Redo via commands
Nudge (arrow key movement)
Rotate, flip, fit-to-page
Spacing, sizing, Z-order
Expand/collapse nodes
Custom command manager

📄 阅读： references/commands.md

对齐（左、右、上、下、居中）
剪贴板操作（剪切、复制、粘贴、复制副本）
删除节点和连接器
通过命令实现撤销/重做
微移（箭头键移动）
旋转、翻转、适应页面
间距、尺寸、Z轴顺序
展开/折叠节点
自定义命令管理器

Automatic Layouts

自动布局

📄 Read: references/automatic-layouts.md

Hierarchical Tree Layout
Organization Chart Layout
Mind Map Layout
Flowchart Layout
Radial Tree Layout
Force Directed Layout
Layout configuration (spacing, orientation, margin)

📄 阅读： references/automatic-layouts.md

层级树布局
组织结构图布局
思维导图布局
流程图布局
放射状树布局
力导向布局
布局配置（间距、方向、边距）

BPMN Shapes

BPMN形状

📄 Read: references/bpmn-shapes.md

BPMN activities (tasks, sub-processes)
BPMN events (start, intermediate, end)
BPMN gateways
BPMN data objects and data stores
BPMN connectors and text annotations
BPMN groups and symbol palette

📄 阅读： references/bpmn-shapes.md

BPMN活动（任务、子流程）
BPMN事件（开始、中间、结束）
BPMN网关
BPMN数据对象与数据存储
BPMN连接器与文本注释
BPMN组与符号面板

UML Diagrams

UML图

📄 Read: references/uml-diagrams.md

UML shape types (class, component, use case, activity, state, sequence)
UML sequence diagram elements
Configuring UML shapes and relationships

📄 阅读： references/uml-diagrams.md

UML形状类型（类、组件、用例、活动、状态、序列）
UML序列图元素
配置UML形状与关系

Swimlane

泳道

📄 Read: references/swimlane.md

Creating swimlane diagrams
Defining lanes and phases
Swimlane symbol palette
Swimlane interaction and customization

📄 阅读： references/swimlane.md

创建泳道图
定义泳道与阶段
泳道符号面板
泳道交互与定制

Stencil (Symbol Palette)

模具（符号面板）

📄 Read: references/stencil.md

Setting up a drag-and-drop symbol palette
Symbol groups and categories
Symbol filtering and search
Adding custom shapes to palette
Stencil appearance

📄 阅读： references/stencil.md

设置支持拖拽的符号面板
符号组与分类
符号过滤与搜索
向面板添加自定义形状
模具外观

Data Source

数据源

📄 Read: references/data-source.md

Binding a flat data collection to diagram
Parent-child data relationships
Self-referencing hierarchical data
Dynamic data update

📄 阅读： references/data-source.md

将扁平数据集合绑定到图表
父子数据关系
自引用层级数据
动态数据更新

Serialization & Undo/Redo

序列化与撤销/重做

📄 Read: references/serialization-undo-redo.md

Save and load diagram as XML
Serialize to/from JSON or stream
Undo/Redo history manager
Custom undo/redo entries

📄 阅读： references/serialization-undo-redo.md

将图表保存为XML并加载
与JSON或流之间进行序列化/反序列化
撤销/重做历史管理器
自定义撤销/重做条目

Diagram Customization

图表定制

📄 Read: references/diagram-customization.md

Gridlines (visibility, style, snapping)
Rulers (appearance, measurement units)
Page settings (size, orientation, margins, background)
Scroll settings and auto-scroll
Themes and styles
Localization
Context menu
Diagram Ribbon
Drawing tools
Overview control

📄 阅读： references/diagram-customization.md

网格线（可见性、样式、对齐吸附）
标尺（外观、度量单位）
页面设置（尺寸、方向、边距、背景）
滚动设置与自动滚动
主题与样式
本地化
上下文菜单
图表功能区
绘图工具
概览控件

Export & Print

导出与打印

📄 Read: references/export-print.md

Export diagram to PNG, JPEG, BMP
Export to PDF
Print with print settings
Preview before printing

📄 阅读： references/export-print.md

将图表导出为PNG、JPEG、BMP格式
导出为PDF
带打印设置的打印功能
打印预览

Performance & Constraints

性能与约束

📄 Read: references/performance-constraints.md

Virtualization for large diagrams
Diagram-level constraints
Node and connector constraints
Performance optimization tips

📄 阅读： references/performance-constraints.md

大型图表的虚拟化
图表级约束
节点与连接器约束
性能优化技巧

Common Patterns

常见模式

Pattern: Flowchart with Automatic Layout

模式：带自动布局的流程图

When users want an auto-arranged diagram from data — read

references/automatic-layouts.md

and

references/data-source.md

当用户希望通过数据自动排列图表时，请阅读

references/automatic-layouts.md

和

references/data-source.md

。

Pattern: Org Chart from Business Data

模式：基于业务数据的组织结构图

Bind employee data with parent-child relationships and apply Organization Layout — read

references/data-source.md

and

references/automatic-layouts.md

绑定带有父子关系的员工数据并应用组织布局，请阅读

references/data-source.md

和

references/automatic-layouts.md

。

Pattern: BPMN Process Diagram

模式：BPMN流程图表

For business process modeling with standardized shapes — read

references/bpmn-shapes.md

对于使用标准化形状的业务流程建模，请阅读

references/bpmn-shapes.md

。

Pattern: Interactive Diagram Builder

模式：交互式图表构建器

For apps where users drag shapes from a palette — read

references/stencil.md

and

references/interaction.md

对于支持用户从面板拖拽形状的应用，请阅读

references/stencil.md

和

references/interaction.md

。

Pattern: Save/Load Diagram State

模式：保存/加载图表状态

For persisting diagram state across sessions — read

references/serialization-undo-redo.md

如需在会话间持久化图表状态，请阅读

references/serialization-undo-redo.md

。