{"id":1610,"date":"2016-07-15T11:27:05","date_gmt":"2016-07-15T11:27:05","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1610"},"modified":"2021-01-20T17:45:36","modified_gmt":"2021-01-20T17:45:36","slug":"design-custom-shapes-with-wpf-diagram","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/design-custom-shapes-with-wpf-diagram\/","title":{"rendered":"Design custom shapes with WPF Diagram"},"content":{"rendered":"

Watch here the video for this tutorial.<\/a><\/p>\n

This tutorial will run you through the process of creating custom WPF diagram shapes using the built-in Shape Designer. Keep in mind that the Designer is intended as a sample and is limited in terms of functionality. The designer is available inside the installation of MindFusion.Diagramming for WPF but is also included in this tutorial for convenience. For the purposes of this tutorial, we will create an ‘AND Gate’ circuit diagram shape as illustrated by the following image:<\/p>\n

\"Circuit<\/a><\/p>\n

Run the Shape Designer application through the ShapeDesign.exe<\/em>. The Shape Designer opens up with a single rectangular shape ready to be modified.<\/p>\n

\"Diagramming<\/a><\/p>\n

The Shape Designer does not currently support shape renaming (remember, it’s just a sample), therefore create a new shape through the Shapes menu and name it ‘AndGate’.<\/p>\n

\"Diagramming<\/a><\/p>\n

Select the newly created shape from the list on the left. In the editor select the right segment of the shape’s rectangle and press the DEL button on the keyboard. This will delete the segment and make the shape triangular.<\/p>\n

\"Diagramming<\/a><\/p>\n

Adjust the end points of the shape segments so that it gets deflated on both sides. To adjust a segment, hover it with the mouse (so that its adjustment handles appear), then drag the handles.<\/p>\n

\"Diagramming<\/a><\/p>\n

Select the arc primitive from the list on the right side of the screen. Drag this primitive over the top segment of the shape (until it gets highlighted in red) then drop.<\/p>\n

\"Diagramming<\/a><\/p>\n

This will replace the line segment with an arc. Repeat the same process for the bottom segment of the shape.<\/p>\n

\"Diagramming<\/a><\/p>\n

Adjust the middle point of both segments so that the shape looks protruded. Then drag three line primitives from the list on the right to the editor pane. Be careful not to drop the primitives over existing elements because this will replace the elements.<\/p>\n

\"Diagramming<\/a><\/p>\n

Align the newly created line primitives with the existing shape.<\/p>\n

\"Diagramming<\/a><\/p>\n

From the list with anchor points at the right side of the application, drag two anchor points from the first kind (input only) and one anchor point from the second kind (output only) and drop them inside the editor. Align the anchor points with the end points of the line segments created in the previous step.<\/p>\n

\"Diagramming<\/a><\/p>\n

This will conclude the creation of the ‘AND Gate’ shape. You can test the shape in the preview diagram at the bottom of the screen.<\/p>\n

\"Diagramming<\/a><\/p>\n

Save the shape library. Using the same approach, recreate the other circuit shapes from the image above. The following screenshot illustrates the complete library.<\/p>\n

\"Diagramming<\/a><\/p>\n

The shape designer along with the shape library containing the circuit shapes can be downloaded from the link below:<\/p>\n

Design Circuit Shapes<\/a><\/p>\n

You are welcome to ask any questions about the WpfDiagram 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 control.<\/p>\n

We hope you find this tutorial useful and thank you for your interest in MindFusion developer tools.<\/p>\n","protected":false},"excerpt":{"rendered":"

Watch here the video for this tutorial. This tutorial will run you through the process of creating custom WPF diagram shapes using the built-in Shape Designer. Keep in mind that the Designer is intended as a sample and is limited … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,2],"tags":[420,69,421,3,155,58],"class_list":["post-1610","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-circuit","tag-control","tag-custom","tag-diagram","tag-shape","tag-wpf"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-pY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1610","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=1610"}],"version-history":[{"count":11,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1610\/revisions"}],"predecessor-version":[{"id":2598,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1610\/revisions\/2598"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}