C# 如何在 WPF 中轻松绘制图形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16479768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to easily draw graphs in WPF?
提问by pmichna
I need to draw graphs representing finite state machines. I tried to use Graph#. It's cool, but it lacks some things. There is no documentation, which makes it very difficult to use, I cannot draw loops (edges from a vertex to itself) using its custom WPF control and labeling edges is also not implemented. Is there any other library o adviced way of drawing graphs in WPF?
我需要绘制表示有限状态机的图形。我尝试使用Graph#。这很酷，但它缺少一些东西。没有文档，这使得使用起来非常困难，我无法使用其自定义 WPF 控件绘制循环（从顶点到自身的边缘），并且标签边缘也未实现。在 WPF 中是否有其他图书馆或建议的绘制图形的方法？
Functionality I need:
我需要的功能：
- edge labeling
- loop (cyclic) edges
- vertex labeling
- drawing single/double circles around vertices - vertices should be represented either as circle (or double circle) with a label inside
- 边缘标记
- 循环（循环）边
- 顶点标记
- 在顶点周围绘制单/双圆 - 顶点应表示为带有标签的圆（或双圆）
Any ideas?
有任何想法吗？
EDIT:
编辑：
I got some propositions, for which I am grateful. However, I think I have not made my thought clear. I need this kind of graph:
我得到了一些建议，对此我表示感谢。不过，我想我还没有把我的想法说清楚。我需要这样的图表：
All tools suggested as far are not suitable for this or maybe I don't know how to apply them in this situation.
到目前为止建议的所有工具都不适合于此，或者我可能不知道如何在这种情况下应用它们。
采纳答案by pmichna
Graphviz+ GraphViz C# Wrapperare exactly what I was looking for.
Graphviz+ GraphViz C# Wrapper正是我想要的。
回答by Chris
Here are some options:
以下是一些选项：
- VisiFire
- Silverlight Chart Controls running on WPF
- WPF Toolkit
- Telerik
I hope you find what you need. The ones who cost money also have a free trail available. You can get some pretty nice results with telerik or visifire!
我希望你能找到你需要的东西。花钱的人也可以免费使用。您可以使用 Telerik 或 visifire 获得一些非常好的结果！
回答by Mare Infinitus
In a similar question on bipartite graphs which you can read hereI got the recommendation on NetworkView
在你可以在这里阅读的关于二部图的类似问题中， 我得到了关于NetworkView的建议
It has loops, vertex labeling, a custom vertex visualisation that you can easily edit to be circles. Think it has no edge labelling, though. Just give it a try.
它具有循环、顶点标签、自定义顶点可视化，您可以轻松地将其编辑为圆形。不过，认为它没有边缘标签。试试吧。
At least it is a very good start if you decide to do it on your own.
如果你决定自己做，至少这是一个很好的开始。
You probably want to have a look on the Codeproject article "Visualize a graph with circular dependencies"
回答by Alexander Smirnov
I think you can easily implement all of your requirements with GraphX library for WPF. It is based on Graph# and have detailed docs. http://panthernet.ru/en/projects-en/graphx-en
我认为您可以使用 WPF 的 GraphX 库轻松实现您的所有需求。它基于 Graph# 并有详细的文档。 http://panthernet.ru/en/projects-en/graphx-en
It supports edge labeleing and self-looped edges along with the edge and vertex templates. If you have any questions you can ask in the Discussions section on the site.
它支持边标记和自环边以及边和顶点模板。如果您有任何问题，可以在网站的“讨论”部分提问。
回答by Sebastian
If this is in a commercial scenario, you should also take a look at yWorks' yFiles.
如果这是在商业场景中，您还应该查看yWorks 的 yFiles。
It has all the features you are looking for and its most outstanding feature is the capability to automatically arrange your diagrams. If you have a bigger state machine or even create the state-machine in code, this will help you clearly arrange even large diagrams automatically. Also for the labels there are automatic label placement algorithms, which find placements for the labels so that they do not overlap with each other or with other unrelated elements.
它具有您正在寻找的所有功能，其最出色的功能是能够自动排列您的图表。如果你有一个更大的状态机，或者甚至在代码中创建状态机，这将帮助你清楚地自动排列甚至大的图表。此外，对于标签，还有自动标签放置算法，它可以找到标签的放置位置，这样它们就不会相互重叠或与其他不相关的元素重叠。
You can see the library live in action in this Youtube Video, but you can also play immediately with the Silverlight live demos onlineor just evaluate the library and play with the sample sources.
您可以在此 Youtube 视频 中实时查看库，但您也可以立即在线观看Silverlight 实时演示，或者仅评估库并使用示例源进行播放。
Disclaimer: I works for yWorks, but on SO I do not represent my employer.
免责声明：我在 yWorks 工作，但在 SO 上我不代表我的雇主。
回答by Contango
Option 1: Microsoft Automatic Graph Layout
选项 1：Microsoft 自动图形布局
Free
自由
http://research.microsoft.com/en-us/projects/msagl/
http://research.microsoft.com/en-us/projects/msagl/
GitHub
GitHub
https://github.com/Microsoft/automatic-graph-layout.git
https://github.com/Microsoft/automatic-graph-layout.git
Winforms >> WPF
Winforms >> WPF
It's WinForms, but it can be imported into WPF with a few lines of code.
它是WinForms，但只需几行代码即可将其导入WPF。
Visualizing Nodes and Edges with Microsoft Automatic Graph Layout
使用 Microsoft 自动图形布局可视化节点和边缘
Examples
例子
http://research.microsoft.com/en-us/projects/msagl/#Layouts
http://research.microsoft.com/en-us/projects/msagl/#Layouts
FAQ
常问问题
http://research.microsoft.com/en-us/projects/msagl/faq.aspx
http://research.microsoft.com/en-us/projects/msagl/faq.aspx
Option 2: QuickGraph - A 100% C# graph library with Graphviz Support
选项 2：QuickGraph - 具有 Graphviz 支持的 100% C# 图形库
Free
自由
http://quickgraph.codeplex.com/
http://quickgraph.codeplex.com/
This library is 100% C#. Don't be misled by the line "Graphviz Support", this means that it uses C# code to import the output from Graphviz. No C++ code in sight.
这个库是 100% C#。不要被“Graphviz Support”这一行误导，这意味着它使用 C# 代码从 Graphviz 导入输出。看不到 C++ 代码。
http://www.codeproject.com/Articles/5603/QuickGraph-A-C-graph-library-with-Graphviz-Sup
http://www.codeproject.com/Articles/5603/QuickGraph-AC-graph-library-with-Graphviz-Sup
Has a NuGet package.
有一个 NuGet 包。
Under development from 2003 to 2011 (8 years!!).
从 2003 年到 2011 年（8 年！！）正在开发中。
Option 3: GraphSharp
选项 3：GraphSharp
Free
自由
http://graphsharp.codeplex.com/
http://graphsharp.codeplex.com/
- Depends on QuickGraph (which is 100% C#).
- Supports async/await (nice!).
- 取决于 QuickGraph（100% C#）。
- 支持异步/等待（很好！）。
Demo
演示
https://sachabarbs.wordpress.com/2010/08/31/pretty-cool-graphs-in-wpf/
https://sachbarbs.wordpress.com/2010/08/31/pretty-cool-graphs-in-wpf/
Notes
笔记
This one worked really well, was up and running in a couple of hours. It also supports DataTemplates, so each node can have any look and feel that you want.
这个工作得非常好，在几个小时内就启动并运行了。它还支持DataTemplates，因此每个节点都可以拥有您想要的任何外观。
Option 4: Graphviz4net
选项 4：Graphviz4net
Free
自由
http://graphviz4net.codeplex.com/
http://graphviz4net.codeplex.com/
Option 5: GoDiagram
选项 5：GoDiagram
$$$
$$$
http://www.nwoods.com/products/godiagram/index.html
http://www.nwoods.com/products/godiagram/index.html
Option 6: A Graph Tree Drawing Control for WPF
选项 6：WPF 的图形树绘制控件
Free
自由
http://www.codeproject.com/Articles/29518/A-Graph-Tree-Drawing-Control-for-WPF
http://www.codeproject.com/Articles/29518/A-Graph-Tree-Drawing-Control-for-WPF
No suitable. It's a tree layout.
没有合适的。这是一个树状布局。
Option 7: Using WPF to Visualize a Graph with Circular Dependencies
选项 7：使用 WPF 可视化具有循环依赖关系的图形
Free
自由
http://www.codeproject.com/Articles/43776/Using-WPF-to-Visualize-a-Graph-with-Circular-Depen
http://www.codeproject.com/Articles/43776/Using-WPF-to-Visualize-a-Graph-with-Circular-Depen
Option 8: GraphViz
选项 8：GraphViz
Free
自由
http://www.graphviz.org/Download..php
http://www.graphviz.org/Download..php
This is not C#, and uses non-managed code. There are C# wrappers for it, however.
这不是 C#，并且使用非托管代码。但是，它有 C# 包装器。
Opensourced by AT&T, see "AT&T Researchers — Inventing the Science Behind the Service", and "research home > portfolio > software tools": http://www.research.att.com/software_tools?fbid=NEk8_gxLLEc
由 AT&T 开源，请参阅“AT&T 研究人员 — 发明服务背后的科学”和“研究主页 > 投资组合 > 软件工具”：http: //www.research.att.com/software_tools?fbid=NEk8_gxLLEc
Source
来源
http://www.graphviz.org/Download_source.php
http://www.graphviz.org/Download_source.php
They also open sourced Rserve!
他们还开源了 Rserve！
Option 9: Shields.GraphViz
选项 9：Shields.GraphViz
Free
自由
Wrapper for GraphViz.
GraphViz 的包装器。
https://github.com/timothy-shields/graphviz
https://github.com/timothy-shields/graphviz
Option 10: NetworkView: A WPF custom control for visualizing and editing networks, graphs and flow-charts
选项 10：NetworkView：用于可视化和编辑网络、图形和流程图的 WPF 自定义控件
Free
自由
http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a
http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a
This library allows the user to create connections between nodes, which is probably a bit of an overkill.
这个库允许用户在节点之间创建连接，这可能有点矫枉过正。
Example
例子
It's all MVVM.
这都是MVVM。
Option 11: Gephi - The Open Graph Viz Platform
选项 11：Gephi - 开放图形可视化平台
Free
自由
Not a WPF graphing library, but provides great examples of how really nice graphs can look. The tutorial is excellent.
不是一个 WPF 图形库，但提供了很好的图形的很好的例子。教程很棒。
Option 12: Telerik
选项 12：Telerik
$$$
$$$
http://www.telerik.com/products/wpf/diagrams.aspx
http://www.telerik.com/products/wpf/diagrams.aspx
Option 13: Infragistics
选项 13：基础设施
$$$
$$$
http://www.infragistics.com/samples/wpf/network-node/overviewhttp://www.infragistics.com/samples/wpf/network-node/relationship-between-nodeshttp://www.infragistics.com/samples/wpf/network-node/custom-node-style
http://www.infragistics.com/samples/wpf/network-node/overview http://www.infragistics.com/samples/wpf/network-node/relationship-between-nodes http://www.infragistics。 com/samples/wpf/network-node/custom-node-style
Option 14: WPF Diagram Designer
选项 14：WPF 图设计器
Free
自由
Not so much graphing tool, but it does show you how to move, resize and rotate objects of any type on a canvas.
不是很多绘图工具，但它确实向您展示了如何在画布上移动、调整大小和旋转任何类型的对象。
http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1
http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1
Option 15: MVVM Diagram Designer
选项 15：MVVM 图设计器
Free
自由
And, somebody reimplemented this in MVVM: Not so much graphing tool, but it does show you how to move, resize and rotate objects of any type on a canvas.
而且，有人在 MVVM 中重新实现了这一点：不是很多图形工具，但它确实向您展示了如何在画布上移动、调整大小和旋转任何类型的对象。
http://www.codeproject.com/Articles/484616/MVVM-Diagram-Designer
http://www.codeproject.com/Articles/484616/MVVM-Diagram-Designer
Option 16: yWorks - The Diagramming company
选项 16：yWorks - The Diagramming 公司
$$$
$$$
https://www.yworks.com/en/products_yfiles_practicalinfo_gallery.htmlhttps://www.yworks.com/en/products_yfileswpf_about.html
https://www.yworks.com/en/products_yfiles_practicalinfo_gallery.html https://www.yworks.com/en/products_yfileswpf_about.html
Option 17: MindFusion
选项 17：MindFusion
$$$
$$$
http://www.mindfusion.eu/features-wpfdiagram.htmlhttp://www.mindfusion.eu/
http://www.mindfusion.eu/features-wpfdiagram.html http://www.mindfusion.eu/
Option 18: Dot2WPF
选项 18：Dot2WPF
Free
自由
A WPF control for viewing DOT graphs.
用于查看 DOT 图的 WPF 控件。
http://www.codeproject.com/Articles/18870/Dot-WPF-a-WPF-control-for-viewing-Dot-graphs
http://www.codeproject.com/Articles/18870/Dot-WPF-a-WPF-control-for-viewing-Dot-graphs
Option 19: SyncFusion
选项 19：SyncFusion
$$$
$$$
https://www.syncfusion.com/products/wpf/diagram
https://www.syncfusion.com/products/wpf/diagram
Option 20: AddFlow
选项 20：AddFlow
$$$
$$$
https://www.componentsource.com/product/addflow-wpf-standard
https://www.componentsource.com/product/addflow-wpf-standard
Option 21: Lassalle
选项 21：拉萨尔
$$$
$$$
Option 22: Dynamic Data Display
选项 22：动态数据显示
http://dynamicdatadisplay.codeplex.com/
http://dynamicdatadisplay.codeplex.com/
Option 23: Nevron
选项 23：Nevron
$$$
$$$
Only for WinForms, but can be imported into WPF. However, each individual item cannot be templated, which is a big advantage of WPF solutions.
仅适用于 WinForms，但可以导入 WPF。但是，不能对每个单独的项目进行模板化，这是 WPF 解决方案的一大优势。
Google Search Terms
谷歌搜索词
- "workflow wpf graphing"
- "wpf graphing library"
- "wpf state machine library"
- “工作流 wpf 绘图”
- “wpf 图形库”
- “wpf 状态机库”
