如何在WPF中轻松绘制图形?

时间:2013-05-10 10:03:52

标签: c# .net wpf graph

我需要绘制代表有限状态机的图表。我尝试使用Graph#。这很酷,但缺少一些东西。没有文档,这使得它很难使用,我不能使用其自定义WPF控件绘制循环(从顶点到自身的边),并且标签边也没有实现。在WPF中是否提供了绘制图形的方法?

我需要的功能:

  • 边缘标签
  • loop(cyclic)edges
  • 顶点标记
  • 在顶点周围绘制单圈/双圈 - 顶点应表示为带有标签的圆圈(或双圈)

有什么想法吗?


编辑:

我有一些主张,我很感激。但是,我想我没有弄清楚。我需要这种图表:

http://static.max99x.com/school/automata-editor1.png.

目前建议使用的所有工具都不适合这种情况,或者我不知道在这种情况下如何应用它们。

6 个答案:

答案 0 :(得分:53)

选项1:Microsoft自动图形布局

http://research.microsoft.com/en-us/projects/msagl/

GitHub的

https://github.com/Microsoft/automatic-graph-layout.git

Winforms>> WPF

它是WinForms,但它可以通过几行代码导入到WPF中。

使用Microsoft自动图形布局可视化节点和边缘

http://www.codeguru.com/csharp/.net/net_wpf/article.php/c16963/Visualizing-Nodes-and-Edges-with-Microsoft-Automatic-Graph-Layout.htm

实施例

http://research.microsoft.com/en-us/projects/msagl/#Layouts

常见问题

http://research.microsoft.com/en-us/projects/msagl/faq.aspx

选项2:QuickGraph - 具有Graphviz支持的100%C#图库

http://quickgraph.codeplex.com/

这个库是100%C#。不要被这条线" Graphviz支持"误导,这意味着它使用C#代码从Graphviz导入输出。看不到C ++代码。

http://www.codeproject.com/Articles/5603/QuickGraph-A-C-graph-library-with-Graphviz-Sup

有一个NuGet包。

2003年至2011年(8年!!)正在开发中。

选项3:GraphSharp

http://graphsharp.codeplex.com/

  • 取决于QuickGraph(100%C#)。
  • 支持async / await(很好!)。

演示

https://sachabarbs.wordpress.com/2010/08/31/pretty-cool-graphs-in-wpf/

注释

这个工作非常好,在几个小时内启动并运行。它还支持DataTemplates,因此每个节点都可以拥有您想要的任何外观。

选项4:Graphviz4net

http://graphviz4net.codeplex.com/

选项5:GoDiagram

$$$

http://www.nwoods.com/products/godiagram/index.html

选项6:WPF的图树绘制控件

http://www.codeproject.com/Articles/29518/A-Graph-Tree-Drawing-Control-for-WPF

不合适。这是一个树形布局。

选项7:使用WPF可视化具有循环依赖关系的图

http://www.codeproject.com/Articles/43776/Using-WPF-to-Visualize-a-Graph-with-Circular-Depen

选项8:GraphViz

http://www.graphviz.org/Download..php

这不是C#,而是使用非托管代码。但是,它有C#包装器。

由AT& T开源,参见" AT& T研究人员 - 发明服务背后的科学"和"研究家>投资组合>软件工具": http://www.research.att.com/software_tools?fbid=NEk8_gxLLEc

来源

http://www.graphviz.org/Download_source.php

他们也开源Rserve!

选项9:Shields.GraphViz

GraphViz的包装。

https://github.com/timothy-shields/graphviz

选项10:NetworkView:用于可视化和编辑网络,图形和流程图的WPF自定义控件

http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a

这个库允许用户在节点之间创建连接,这可能有点过分。

实施例

https://channel9.msdn.com/coding4fun/blog/Noodling-Network-Nodes-Diagraming-with-the-NetworkView-custom-WPF-control

它都是MVVM。

选项11:Gephi - Open Graph Viz Platform

请参阅http://gephi.github.io/

不是WPF图形库,但提供了非常好的图形外观的很好的例子。教程非常好。

选项12:Telerik

$$$

http://www.telerik.com/products/wpf/diagrams.aspx

选项13:Infragistics

$$$

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

选项14:WPF图表设计器

与图形工具不同,它确实向您展示了如何在画布上移动,调整大小和旋转任何类型的对象。

http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1

选项15:MVVM图设计器

并且,有人在MVVM中重新实现了这一点:与图形工具不同,它确实向您展示了如何在画布上移动,调整大小和旋转任何类型的对象。

http://www.codeproject.com/Articles/484616/MVVM-Diagram-Designer

选项16:yWorks - 图表公司

$$$

https://www.yworks.com/en/products_yfiles_practicalinfo_gallery.html https://www.yworks.com/en/products_yfileswpf_about.html

选项17:MindFusion

$$$

http://www.mindfusion.eu/features-wpfdiagram.html http://www.mindfusion.eu/

选项18:Dot2WPF

用于查看DOT图的WPF控件。

http://www.codeproject.com/Articles/18870/Dot-WPF-a-WPF-control-for-viewing-Dot-graphs

选项19:SyncFusion

$$$

https://www.syncfusion.com/products/wpf/diagram

选项20:AddFlow

$$$

https://www.componentsource.com/product/addflow-wpf-standard

选项21:Lassalle

$$$

http://www.lassalle.com/

选项22:动态数据显示

http://dynamicdatadisplay.codeplex.com/

选项23:Nevron

$$$

https://www.nevron.com/

仅适用于WinForms,但可以导入到WPF中。但是,每个单独的项目都不能模板化,这是WPF解决方案的一大优势。

Google搜索字词

  • "工作流程wpf图表"
  • " wpf图表库"
  • " wpf状态机库"

答案 1 :(得分:7)

Graphviz + GraphViz C# Wrapper正是我所寻找的。

答案 2 :(得分:4)

我认为您可以使用GraphX库为WPF轻松实现所有要求。它基于Graph#并具有详细的文档。 http://panthernet.ru/en/projects-en/graphx-en

它支持边缘标记和自循环边以及边和顶点模板。如果您有任何问题,可以在网站的“讨论”部分询问。

答案 3 :(得分:2)

在关于二分图的类似问题中can read here 我在NetworkView

上得到了推荐

它有循环,顶点标注,自定义顶点可视化,您可以轻松编辑为圆形。但是,认为它没有边缘标签。试试吧。

如果您决定自己做这件事,至少这是一个非常好的开始。

您可能想查看the Codeproject article "Visualize a graph with circular dependencies"

答案 4 :(得分:2)

如果是在商业场景中,您还应该查看yWorks' yFiles

它具有您正在寻找的所有功能,其最突出的功能是能够自动排列图表。如果你有一个更大的状态机甚至在代码中创建状态机,这将帮助你自动清楚地安排大型图表。此外,对于标签,还有自动标签放置算法,可以找到标签的放置位置,使它们不会相互重叠或与其他不相关的元素重叠。

您可以在this Youtube Video中查看该库的实际操作,但您也可以立即使用Silverlight live demos online或仅评估该库并使用示例源。

免责声明:我在yWorks工作,但在此我不代表我的雇主。

答案 5 :(得分:1)

以下是一些选项:

我希望你找到你需要的东西。花钱的人也有免费的线索。你可以用telerik或visifire获得一些非常好的结果!