Add a ScrollViewer and Diagram to the window markup:<\/p>\n
<scrollviewer<\/span>>\n<\/span>\t<diag:diagram<\/span> x:name<\/span>=\"diagram<\/a>\">\n<\/span><\/diag:diagram<\/span>><\/scrollviewer<\/span>><\/pre>\nThere are two conventions for drawing PERT networks: activity on arrow and activity on node. Activity on arrow shows activity information on arrows, and the nodes they connect represent project milestones. Activity on node shows activity information on nodes and the arrows between them display relationships. We will use the first convention.<\/p>\n
Let\u2019s define a model class to hold activity data:<\/p>\n
public class Activity\n{\n\t\/\/ activity name\n\tpublic string Name { get; set; }\n\n\t\/\/ start milestone name\n\tpublic string From { get; set; }\n\n\t\/\/ end milestone name\n\tpublic string To { get; set; }\n\n\t\/\/ time in months\n\tpublic int Time { get; set; }\n}\n<\/pre>\nDefine a simple PERT project consisting of five milestones and six activities:<\/p>\n
var network = new[]\n{\n\tnew Activity { Name = \"A\", From = \"10\", To = \"30\", Time = 3 },\n\tnew Activity { Name = \"B\", From = \"10\", To = \"20\", Time = 4 },\n\tnew Activity { Name = \"C\", From = \"20\", To = \"50\", Time = 3 },\n\tnew Activity { Name = \"D\", From = \"30\", To = \"40\", Time = 1 },\n\tnew Activity { Name = \"E\", From = \"30\", To = \"50\", Time = 3 },\n\tnew Activity { Name = \"F\", From = \"40\", To = \"50\", Time = 3 }\n};\n<\/pre>\nCreate a diagram node for each milestone in the project:<\/p>\n
\/\/ create diagram nodes for each milestone\nforeach (var activity in network)\n{\n\tif (diagram.FindNodeById(activity.From) == null)\n\t{\n\t\tvar node = diagram.Factory.CreateShapeNode(bounds, Shapes.Ellipse);\n\t\tnode.Id = node.Text = activity.From;\n\t}\n\n\tif (diagram.FindNodeById(activity.To) == null)\n\t{\n\t\tvar node = diagram.Factory.CreateShapeNode(bounds, Shapes.Ellipse);\n\t\tnode.Id = node.Text = activity.To;\n\t}\n}\n<\/pre>\nCreate a diagram link for each activity and display the activity name and estimated time as link labels:<\/p>\n
\/\/ create a diagram link for each activity\nforeach (var activity in network)\n{\n\tvar link = diagram.Factory.CreateDiagramLink(\n\t\tdiagram.FindNodeById(activity.From),\n\t\tdiagram.FindNodeById(activity.To));\n\n\tvar label1 = link.AddLabel(activity.Name);\n\tlabel1.RelativeTo = RelativeToLink.Segment;\n\tlabel1.Index = 0;\n\tlabel1.VerticalOffset = -20;\n\tlabel1.TextBrush = new SolidColorBrush(Colors.Red);\n\n\tvar label2 = link.AddLabel(string.Format(\"t={0}mo\", activity.Time));\n\tlabel2.RelativeTo = RelativeToLink.Segment;\n\tlabel2.Index = 0;\n\tlabel2.VerticalOffset = 10;\n\tlabel2.TextBrush = new SolidColorBrush(Colors.Blue);\n}\n<\/pre>\nUse automatic graph layout algorithm to arrange the PERT network chart:<\/p>\n
\/\/ arrange the diagram from left to right\nvar layout = new LayeredLayout();\nlayout.Margins = new Size(100, 100);\nlayout.EnforceLinkFlow = true;\nlayout.Orientation = Orientation.Horizontal;\nlayout.Arrange(diagram);\n<\/pre>\nThe final result is displayed below.
\n![\"PERT](\"http:\/\/mindfusion.dev\/_samples\/PertNetworkWpf.png\")
<\/p>\n
For more information on the PERT methodology, see this Wikipedia article:
\nhttp:\/\/en.wikipedia.org\/wiki\/PERT<\/a><\/p>\nThe complete sample project is available for download here:
\nhttps:\/\/mindfusion.dev\/_samples\/PertNetwork.zip<\/a><\/p>\nAll MindFusion.Diagramming libraries expose the same programming interface, so most of the sample code shown above will work with only a few modifications in Windows Forms, ASP.NET, Silverlight and Java versions of the control.<\/p>\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post we show how to build a PERT network chart using MindFusion.Diagramming for WPF. First, create a new WPF project and add a mindfusion.diagramming.wpf.dll reference. Add the appropriate Xaml namespace to the window Xaml file: xmlns:diag=”http:\/\/mindfusion.dev\/diagramming\/wpf” Add a … Continue reading