Create a new WPF<\/a> application and add the necessary assemblies to the project. In the main window, declare the following namespace:<\/p>\n Then declare an instance of the DiagramView<\/a> class inside the root grid:<\/p>\n Creating the custom node<\/strong><\/p>\n To create the custom node, from the “Project -> Add New Item” menu add a new CustomControl (WPF) item to the project. This automatically creates a themes<\/em> folder inside the project and a generic.xaml<\/em> resource dictionary, which contains the template of the newly added class. Rename the newly created file (and class) to OrgChartNode. Ensure that the new class derives from TemplatedNode<\/a> rather than Control. Then define the following dependency properties in the class: Title, FullName, and Image, of types string and ImageSource respectively.<\/p>\n Define the appearance of the node in its template in the generic.xaml<\/em> file. In this case the node will display a round border, an image of the employee, its title, name, and description, and several buttons that can be used to change the role of the employee or add subordinates. The components bind directly to the properties of the node class. For example:<\/p>\n The complete listing of the node’s template can be found in the project below.<\/p>\n To handle the Click event of the buttons in the template, register a routed event handler in the OrgChartNode class:<\/p>\n Declare an Index property in the OrgChartNode class, which will indicate the role of the employee. Changing the role will automatically update the title and background color of the node:<\/p>\n Create the hierarchy<\/strong><\/p>\n Now that the custom node is ready, we can create a diagram representing the hierarchy. In the code behind of the main window, create a series of OrgChartNode objects, each representing an employee in the organization, then link the nodes using the CreateDiagramLink<\/a> method of the diagram Factory<\/a> class:<\/p>\n Finally, arrange the hierarchy by using the built-in tree layout:<\/p>\n The following image illustrates the result:<\/p>\n The source code of the project together with all necessary libraries can be downloaded from here:<\/p>\n Download Organization Hierarchy Sample<\/a><\/p>\n You are welcome to ask any questions about the Diagram<\/a> control at MindFusion discussion board<\/a> or per e-mail at support@mindfusion.dev<\/a>.<\/p>\n Click here here<\/a> to visit the official page of the WPF diagram control.<\/p>\n We hope you find this tutorial useful and thank you for your interest in MindFusion developer tools.<\/p>\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" In this blog you will learn how to create a presentation of a hierarchical organization using MindFusion WPF Diagram control. The hierarchy is presented as a diagram, where each node represents an employee in the organization and each link represents … Continue reading xmlns:diag=\"http:\/\/mindfusion.dev\/diagramming\/wpf\"<\/pre>\n
<diag:diagramview<\/span> x:name<\/span>=\"diagramView<\/a>\">\n<\/span> <diag:diagram<\/span> x:name<\/span>=\"diagram<\/a>\" backbrush<\/span>=\"White<\/a>\">\n<\/span><\/diag:diagram<\/span>><\/diag:diagramview<\/span>><\/pre>\n<textbox<\/span> acceptsreturn<\/span>=\"False<\/a>\" fontfamily<\/span>=\"Verdana<\/a>\" fontsize<\/span>=\"12<\/a>\" borderbrush<\/span>=\"Transparent<\/a>\" background<\/span>=\"Transparent<\/a>\" text<\/span>=\"{Binding FullName}<\/a>\"><\/textbox<\/span>><\/pre>\nAddHandler(Button.ClickEvent, new RoutedEventHandler(OnClick));\n...\nvoid OnClick(object sender, RoutedEventArgs e)\n{\n ...\n}<\/pre>\npublic int Index\n{\n get { return Images.IndexOf(Image); }\n set\n {\n if (value != -1)\n {\n Image = Images[value];\n Title = Titles[value];\n Brush = Fills[value];\n }\n else\n {\n Image = null;\n }\n\n InvalidateVisual();\n }\n}<\/pre>\nvar node1 = new OrgChartNode\n{\n Bounds = new Rect(0, 0, 300, 160),\n FullName = \"Mike Powell\",\n Text = \"This is the leader of the sample organization.\",\n Index = 2\n};\ndiagram.Nodes.Add(node1);\n\nvar node2 = new OrgChartNode\n{\n Bounds = new Rect(0, 0, 300, 160),\n FullName = \"Emily Williams\",\n Text = \"Emily is the leader highest in the PR hierarchy.\",\n Index = 1\n};\ndiagram.Nodes.Add(node2);\n...\ndiagram.Factory.CreateDiagramLink(node1, node2);<\/pre>\nTreeLayout layout = new TreeLayout();\nlayout.Type = TreeLayoutType.Centered;\nlayout.LinkStyle = TreeLayoutLinkType.Cascading3;\nlayout.Direction = TreeLayoutDirections.TopToBottom;\nlayout.KeepRootPosition = false;\nlayout.LevelDistance = 40;\nlayout.Arrange(diagram);<\/pre>\n
![\"Diagramming_Wpf_Templates\"](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/07\/Diagramming_Wpf_Templates-300x225.png\")
<\/a><\/p>\n