{"id":1968,"date":"2018-04-03T16:13:56","date_gmt":"2018-04-03T16:13:56","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=1968"},"modified":"2021-01-23T16:37:23","modified_gmt":"2021-01-23T16:37:23","slug":"fishbone-ishikawa-diagram-in-wpf","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/fishbone-ishikawa-diagram-in-wpf\/","title":{"rendered":"Fishbone (Ishikawa) Diagram in WPF"},"content":{"rendered":"<p>In this blog post we will use the <a title=\"WPF Diagram Control by MindFusion\" href=\"https:\/\/mindfusion.dev\/wpf-diagram.html\">WPF Diagram component<\/a> to build a fishbone diagram as described in the <a title=\"Ishikawa Diagram\" href=\"https:\/\/en.wikipedia.org\/wiki\/Ishikawa_diagram\">Wikipedia \u201cIshikawa diagram\u201d article<\/a> cited below:<\/p>\n<p><em>\u201cIshikawa diagrams (also called fishbone diagrams, herringbone diagrams, cause-and-effect diagrams, or Fishikawa) are causal diagrams created by Kaoru Ishikawa that show the causes of a specific event.<\/em><\/p>\n<p><em>Common uses of the Ishikawa diagram are product design and quality defect prevention to identify potential factors causing an overall effect. Each cause or reason for imperfection is a source of variation. Causes are usually grouped into major categories to identify and classify these sources of variation.\u201d<\/em> Read more on <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ishikawa_diagram\">https:\/\/en.wikipedia.org\/wiki\/Ishikawa_diagram<\/a><\/p>\n<p>This tutorial will demonstrate how easy it is to create the same diagram using the WPF diagram library and writing several lines of code. This is the final diagram:<\/p>\n<div id=\"attachment_1971\" style=\"width: 638px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/04\/Ishikawa-diagram-wpf.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1971\" class=\"size-full wp-image-1971\" src=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/04\/Ishikawa-diagram-wpf.png\" alt=\"Ishikawa (fishbone) diagram in WPF with MindFusion WPF Diagram library\" width=\"628\" height=\"392\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/04\/Ishikawa-diagram-wpf.png 628w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/04\/Ishikawa-diagram-wpf-300x187.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/04\/Ishikawa-diagram-wpf-481x300.png 481w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/a><p id=\"caption-attachment-1971\" class=\"wp-caption-text\">Ishikawa (fishbone) diagram in WPF with MindFusion WPF Diagram library<\/p><\/div>\n<p><strong>I. General Settings<\/strong><\/p>\n<p>We create an empty WPF project in Visual Studio called \u201cFishbone\u201d. There we create an Assemblies folder where we place the necessary dll-s:<\/p>\n<ul>\n<li>MindFusion.Common.dll<\/li>\n<li>MindFusion.Diagramming.Wpf.dll<\/li>\n<\/ul>\n<p>Then in the MainWindow.xaml file we create a mapping to the Diagramming namespace:<\/p>\n<pre id=\"line1\">&lt;<span class=\"start-tag\">window<\/span> <span class=\"attribute-name\">x:class<\/span>=\"<a class=\"attribute-value\">Fishbone.MainWindow<\/a>\" <span class=\"attribute-name\">xmlns<\/span>=\"<a class=\"attribute-value\">http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation<\/a>\" <span class=\"attribute-name\">xmlns:x<\/span>=\"<a class=\"attribute-value\">http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml<\/a>\" <span class=\"attribute-name\">xmlns:diag<\/span>=\"<a class=\"attribute-value\">http:\/\/mindfusion.dev\/diagramming\/wpf<\/a>\" <span class=\"attribute-name\">title<\/span>=\"<a class=\"attribute-value\">MindFusion Fishbone Diagram<\/a>\" <span class=\"attribute-name\">height<\/span>=\"<a class=\"attribute-value\">387<\/a>\" <span class=\"attribute-name\">width<\/span>=\"<a class=\"attribute-value\">622<\/a>\"&gt;\n<span id=\"line259\"><\/span>&lt;\/<span class=\"end-tag\">window<\/span>&gt;<\/pre>\n<p>Then we create the diagram inside the default Grid WPF control:<\/p>\n<pre id=\"line1\">&lt;<span class=\"start-tag\">grid<\/span>&gt;\n<span id=\"line262\"><\/span> &lt;<span class=\"start-tag\">diag:fishbonediagram<\/span> <span class=\"attribute-name\">x:name<\/span>=\"<a class=\"attribute-value\">fdiag<\/a>\"&gt;\n<span id=\"line263\"><\/span> &lt;\/<span class=\"end-tag\">diag:fishbonediagram<\/span>&gt;\n&lt;\/<span class=\"end-tag\">grid<\/span>&gt;<\/pre>\n<p>The code creates a new instance of the <a href=\"#remark\">FishboneDiagram*<\/a> class with the name \u201cfdiag\u201d. We can use this name to access the object in code.<\/p>\n<p><strong>II. Diagram Data<\/strong><\/p>\n<p>The FishboneDiagram class exposes an ItemsSource property that provides data for the diagram. The data is an object that contains the label for the main Clause and a list with the labels of the subclauses. We create a special class called FBClause that will represent each fishbone:<\/p>\n<pre>public class FBCause\n\t{\n\t\tpublic FBCause()\n\t\t{\n\t\t\tSubCauses = new List();\n\t\t}\n\t\tpublic string Label { get; set; }\n\t\tpublic List SubCauses { get; set; }\n\t}\n<\/pre>\n<p>Next, we create the necessary fishbones this way:<\/p>\n<pre>var c1 = new FBCause { Label = \"Measurements\" };\nc1.SubCauses = new List { \"Inspectors\", \"Microscopes\", \"Calibration\" };\n\u2026\u2026\u2026\u2026\n<\/pre>\n<p>Once we are done with all fishbones, we create the model, which will serve as data source for the fdiag object:<\/p>\n<pre>var model = new List { c1, c2, c3, c4, c5, c6 };\n<\/pre>\n<p><strong>III. Building the Diagram<\/strong><\/p>\n<p>Now that the data is ready, we can assign it to the ItemsSource property of the FishboneDiagram class:<\/p>\n<pre>fdiag.ItemsSource = model;\n<\/pre>\n<p>We will use the LabelPath and SubCausesPath properties to bind the respective fields of our FBClause objects to the correct data properties of FishboneDiagram:<\/p>\n<pre>fdiag.LabelPath = \"Label\";\nfdiag.SubCausesPath = \"SubCauses\";\n<\/pre>\n<p>If the subclauses of your model were objects instead of strings as in our FBClause class you should use the SubLabelPath property to set the name of the field that will provide data for the subclause labels.<\/p>\n<p>Finally we call the diagram\u2019s <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/wpfdiagram\/index.htm?M_MindFusion_Diagramming_Wpf_Diagram_ResizeToFitItems_1_Double.htm\">ResizeToFitItems<\/a> method to make sure all fishbones will be visible:<\/p>\n<pre>fdiag.ResizeToFitItems(30);\n<\/pre>\n<p>Compile and run the sample and you will see a perfect fishbone diagram.<br \/>\nThat\u2019s the end of our tutorial, you can download the sample together with all necessary dll-s from this link:<\/p>\n<p align=\"center\"><a href=\"https:\/\/www.mindfusion.dev\/samples\/wpf\/diagram\/Fishbone.zip\">Download MindFusion Fishbone (Ishikawa) Diagram in WPF Sample<\/a><\/p>\n<p><a name=\"remark\"><\/a>* The FishboneDiagram class will be officially released with the next version of the WPF Diagram Tool.<\/p>\n<p><em>About Diagramming for WPF:<\/em> This is the right tool to create flowcharts in WPF that always meet your requirements. The library offers more than 100 predefined node shapes, extensive event set and more than 15 exporters and importers. Each diagram that you build has a completely customizable look through styles, themes and appearance properties for each part of the flowchart. The numerous samples and detailed documentation help you learn quickly how to integrate the component into your own application. You can download the trial version, which has no feature restrictions and does not expire from the <a title=\"MindFusion WPF Diagram Control\" href=\"https:\/\/mindfusion.dev\/wpf-diagram.html\">WPF Diagram Page on MindFusion website.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog post we will use the WPF Diagram component to build a fishbone diagram as described in the Wikipedia \u201cIshikawa diagram\u201d article cited below: \u201cIshikawa diagrams (also called fishbone diagrams, herringbone diagrams, cause-and-effect diagrams, or Fishikawa) are causal &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/fishbone-ishikawa-diagram-in-wpf\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"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,74],"tags":[508,507,511,512,510,509],"class_list":["post-1968","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-sample-code","tag-fishbone-diagram","tag-ishikawa-diagram","tag-wpf-cause-and-effect-diagram","tag-wpf-fishikawa-diagram","tag-wpf-herringbone-diagram","tag-wpf-ishikawa-diagram"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-vK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1968","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=1968"}],"version-history":[{"count":10,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1968\/revisions"}],"predecessor-version":[{"id":2645,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1968\/revisions\/2645"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}