{"id":1919,"date":"2017-11-17T12:54:28","date_gmt":"2017-11-17T12:54:28","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=1919"},"modified":"2021-01-23T16:31:05","modified_gmt":"2021-01-23T16:31:05","slug":"logic-model-software-demo","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/logic-model-software-demo\/","title":{"rendered":"Logic Model Software Demo"},"content":{"rendered":"<p><a title=\"Logic Model\" href=\"https:\/\/en.wikipedia.org\/wiki\/Logic_model\">The logic model<\/a> is a tool that helps managers evaluate the effectiveness of a program. The tool allows the user to list the input, output and outcomes of the process.<\/p>\n<div id=\"attachment_1921\" style=\"width: 960px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/logic-model.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1921\" class=\"size-full wp-image-1921\" src=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/logic-model.png\" alt=\"Logic Model Software Demo\" width=\"950\" height=\"634\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/logic-model.png 950w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/logic-model-300x200.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/logic-model-768x513.png 768w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/logic-model-450x300.png 450w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/a><p id=\"caption-attachment-1921\" class=\"wp-caption-text\">Logic Model Software Demo<\/p><\/div>\n<p>In our sample we have used the <a title=\"WinForms Diagram Control\" href=\"https:\/\/mindfusion.dev\/flowchart-net.html\">WinForms Diagram Control<\/a> to create a sample software that lets users:<\/p>\n<ul>\n<li>drag and drop tables that represent popular items in each of the three sections of the logic mode: input, output and outcomes;<\/li>\n<li>edit the tables: add and delete rows, edit the text on rows;<\/li>\n<li>connect table rows to illustrate the process flow.<\/li>\n<\/ul>\n<p><strong>I. Project Setup<\/strong><\/p>\n<p>We create a new project in Visual Studio and name it &#8220;LogicModel&#8221;. We add references to the following diagramming libraries:<\/p>\n<div id=\"attachment_1923\" style=\"width: 394px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/required-libraries.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1923\" class=\"size-full wp-image-1923\" src=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/required-libraries.png\" alt=\"MindFusion Libraries Used by the Logic Model Software\" width=\"384\" height=\"336\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/required-libraries.png 384w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/required-libraries-300x263.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/11\/required-libraries-343x300.png 343w\" sizes=\"auto, (max-width: 384px) 100vw, 384px\" \/><\/a><p id=\"caption-attachment-1923\" class=\"wp-caption-text\">MindFusion Libraries Used by the Logic Model Software<\/p><\/div>\n<p>After that we drag and drop the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_NodeListView.htm\">NodeListView<\/a> control from the Toolbox and set its <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_WinForms_NodeListView_IconSize_0.htm\">IconSize<\/a> property to Size(50,50). This property tells the control how big the items in the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_NodeListView.htm\">NodeListView<\/a> should be rendered.<\/p>\n<pre>nodeListView1.IconSize = new System.Drawing.Size(50, 50)\n<\/pre>\n<p>Then we drag and drop a <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_DiagramView.htm\">DiagramView<\/a> object that creates automatically a <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?N_MindFusion_Diagramming.htm\">Diagram<\/a> instance that represents the diagram. Here we need to set the AllowDrop and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_WinForms_DiagramView_AllowInplaceEdit_0.htm\">AllowInplaceEdit<\/a> properties to &#8220;true&#8221;. This means the diagram can create new nodes from the items in the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_NodeListView.htm\">NodeListView<\/a> that are dropped onto it. Then it allows the user to edit the nodes e.g. modify the text in the table cells:<\/p>\n<pre>this.diagramView1.AllowDrop = true;\nthis.diagramView1.AllowInplaceEdit = true;\n<\/pre>\n<p>Last but not least we set the Resize mode of the DiagramView to Fill, which means it will occupy all available space when the user changes the size of the application window.<\/p>\n<p><strong>II. The NodeListView<\/strong><\/p>\n<p>It holds <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> instances that represent items in the logic model. Let&#8217;s look at a simple table. The first table called &#8220;Investment&#8221;. Here are the first three lines of code for it:<\/p>\n<pre>\/\/the table with resources\nTableNode tbResources = new TableNode();\ntbResources.RedimTable(2, 4);\ntbResources.Caption = \"Investment\";\n<\/pre>\n<p>The RedimTable method changes the number of rows and columns of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> to be the ones specified as arguments. Each of the tables in the logic model has two columns &#8211; one for a bullet and one for the label. The count of rows varies.<\/p>\n<p>Then we edit the text that is rendered by this TableNode:<\/p>\n<pre>tbResources[1, 0].Text = \"People\";\ntbResources[1, 1].Text = \"Money\";\ntbResources[1, 2].Text = \"Technology\";\ntbResources[1, 3].Text = \"Space\";\n<\/pre>\n<p>Now is time for some styling. We set the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?O_T_MindFusion_Drawing_Pen_Pen.htm\">Pen<\/a> for the table, the pen for the caption and the CaptionBackBrush:<\/p>\n<pre>tbResources.Pen = new MindFusion.Drawing.Pen(Color.FromArgb(192, 192, 192));\n\ntbResources.CaptionBrush = new MindFusion.Drawing.SolidBrush(Color.White);\ntbResources.CaptionBackBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(247, 150, 70));\n<\/pre>\n<p>Then we set the background of the rest of the TableNode:<\/p>\n<pre>tbResources.Brush = new LinearGradientBrush(Color.FromArgb(252, 213, 181), Color.FromArgb(248, 234, 223));\n<\/pre>\n<p>Each diagram item has a <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> property. This useful property holds any information you find useful. It is of type Object and you can use it to store data used by your node. In our application we use the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> property of a <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> to store the URL to the bullet rendered before each of its labels:<\/p>\n<pre>\/\/keep the bullet as a tag\ntbResources.Tag = Image.FromFile(\"..\/..\/Resources\/orange.png\");\n\/\/set an orange bullet before each label\n\nfor (int i = 0; i &lt; tbResources.Rows.Count; i++)\n     {\n        tbResources[0, i].Image = Image.FromFile(\"..\/..\/Resources\/orange.png\");\n        \/\/save the row index as a tag for cells with text\n        tbResources[1, i].Tag = i;\n     }\n<\/pre>\n<p>Then we use the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> property of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?C_MindFusion_Diagramming_TableNode+Cell_TableNode.Cell_ctor_1_TableNode.htm\">TableNode.Cell<\/a> objects to store their row index. We will use it later when we handle events.<\/p>\n<p>Finally, let&#8217;s not forget to add the new <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> to the NodeListView:<\/p>\n<pre>nodeListView1.AddNode(tbResources);\n<\/pre>\n<p>The other tables are created in a similar way.<\/p>\n<p><strong>III. The Containers<\/strong><\/p>\n<p>The three rectangles where users drop tables are ContainerNode-s. These are special kinds of <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_DiagramNode.htm\">DiagramNode<\/a> -s that can hold other nodes. Once placed into them, the containing nodes move with the container. Containers can resize automatically to fit all items but in our case we will forbid this.<\/p>\n<p>Here is the code that creates the third container &#8211; &#8220;Outcomes&#8221;:<\/p>\n<pre>\/\/the last container\nContainerNode cOutcomes = diagram1.Factory.CreateContainerNode(0, 0, 20, 20);\ncOutcomes.Tag = 2;\ncOutcomes.Caption = \"Outcomes\";\n<\/pre>\n<p>Note that we use again the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> property this time to keep the index of the container &#8211; first, second or third e.g. 0, 1 or 2. Then we add some styling using the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Drawing_Pen.htm\">Pen<\/a>, <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?O_T_MindFusion_Diagramming_Fluent_TableNodeExtensions_CaptionBrush.htm\">CaptionBrush<\/a>, <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_TableNode_CaptionBackBrush_0.htm\">CaptionBackBrush<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Drawing_Brush.htm\">Brush<\/a> properties to define the background and border of the container and its caption:<\/p>\n<pre>cOutcomes.Pen = new MindFusion.Drawing.Pen(Color.FromArgb(80, 80, 80));\ncOutcomes.CaptionBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(80, 80, 80));\ncOutcomes.CaptionBackBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(168, 192, 120));\ncOutcomes.Brush = new LinearGradientBrush(Color.FromArgb(209, 224, 180), Color.FromArgb(235, 238, 229));\n<\/pre>\n<p>Then we set some properties that define how the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_ContainerNode.htm\">ContainerNode<\/a> responds to new items being added or removed:<\/p>\n<pre>cOutcomes.AllowAddChildren = true;\n\/\/do not allow the container to change size or be folded\ncOutcomes.AutoGrow = false;\ncOutcomes.AutoShrink = false;\ncOutcomes.Foldable = false;\n<\/pre>\n<p>We let the container accept new children and do not allow the user to fold, which means to collapse it.<\/p>\n<p>The containers are sized relatively to the client area of the DiagramView:<\/p>\n<pre>\/\/resize the containers according to the current size of the diagramView\nprivate void resizeContainers()\n  {\n    \/\/convert the size of the rectangle from client measure units to diagram units\n    RectangleF viewRect = diagramView1.ClientToDoc(diagramView1.ClientRectangle);\n   ...\n}\n<\/pre>\n<p>First we convert the size of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_DiagramView.htm\">DiagramView<\/a> to diagram units calling the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?O_T_MindFusion_Diagramming_WinForms_DiagramView_ClientToDoc.htm\">ClientToDoc<\/a> method. Then we need to find the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_ContainerNode.htm\">ContainerNode<\/a> -s of the diagram and arrange them next to each other. When we do this we use the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> property of each container that tells us which is the order of the container and where we should pace it:<\/p>\n<pre>\/\/identify the containers\nforeach (DiagramNode node in diagram1.Nodes)\n     {\n       ContainerNode c = node as ContainerNode;\n\n       if (c != null)\n       {\n          \/\/get the index that tells us if this is the first, second or third container\n          int index = (int)c.Tag;\n          \/\/relocate the container rectangle based on its index\n          c.Bounds = new RectangleF(viewRect.Left + viewRect.Width * (0.02F + index * 0.34F),\n          viewRect.Top + viewRect.Height * 0.02F, viewRect.Width * 0.27F, viewRect.Height * 0.96F);\n       }\n    }\n<\/pre>\n<p>We call this method each time the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_DiagramView.htm\">DiagramView<\/a> is resized by handling the ClientSizeChanged event:<\/p>\n<pre>\/\/raised when the size of the ClientRectangle has changed.\nprivate void diagramView1_ClientSizeChanged(object sender, EventArgs e)\n  {\n    \/\/adjust the size of the containeres\n     resizeContainers();\n     ...\n  }\n<\/pre>\n<p><strong>IV. Diagram Events<\/strong><\/p>\n<p>We handle the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?E_MindFusion_Diagramming_Diagram_NodeCreated.htm\">NodeCreated<\/a> diagram event each time the user drops a new node from the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_NodeListView.htm\">NodeListView<\/a> onto any of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_ContainerNode.htm\">ContainerNode<\/a>-s:<\/p>\n<pre>this.diagram1.NodeCreated += new System.EventHandler(this.diagram1_NodeCreated);\n<\/pre>\n<p>The method that handles the event should do three important things: 1) resize the new <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> so all text fits into it; 2)assign to each cell its correct <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> (e.g. row index) and 3) find the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_ContainerNode.htm\">ContainerNode<\/a> onto which the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> was placed and add it to it. Here is the first part of the method:<\/p>\n<pre>\/\/raised when the user has dropped a new TableNode\nprivate void diagram1_NodeCreated(object sender, NodeEventArgs e)\n  {            \n     TableNode tNode = e.Node as TableNode;\n\n    if (tNode != null)\n    {\n        \/\/adjust the node size\n        resizeNode(tNode);\n        \/\/arrange the tags for the table cells\n        arrangeTags(tNode);\n                   \n     }\n<\/pre>\n<p>The resizeNode and arrangeTags methods adjust the size of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> and assign to each cell in the second column of the node its row index as a <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?F_MindFusion_Diagramming_DiagramItemProperties_Tag.htm\">Tag.<\/a> We won&#8217;t list the methods here, you can check them in the source code available for download.<\/p>\n<p>We find the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_ContainerNode.htm\">ContainerNode<\/a>, if any onto which the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> was placed by checking if its top left corner is inside the container:<\/p>\n<pre>\/\/find out the container onto which the node was dropped, if any\nforeach (DiagramNode diagramNode in diagram1.Nodes)\n  {\n    if (diagramNode.ContainsPoint(e.Node.Bounds.Location))\n    {\n       ContainerNode container = diagramNode as ContainerNode;\n       if (container != null)\n       {                       \n         \/\/add the new node to its container\n         container.Add(tNode);\n                       \n         break;\n       }\n }\n}\n<\/pre>\n<p>If it is within the container we add the node.<\/p>\n<p><strong>V. Context Menu<\/strong><\/p>\n<p>The context menu is rendered at right mouse click. We handle the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?E_MindFusion_Diagramming_Diagram_CellClicked.htm\">CellClicked<\/a> event of a diagram to show it:<\/p>\n<pre>\/\/tracks when the user clicks on a table cell\ndiagram1.CellClicked += new EventHandler(diagram1_CellClicked);\n<\/pre>\n<p>We also declare a global <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?C_MindFusion_Diagramming_TableNode+Cell_TableNode.Cell_ctor_1_TableNode.htm\">TableNode.Cell<\/a> clickedCell variable that keeps track of the clicked cell. We will use the data later:<\/p>\n<pre>\/\/keeps the cell the user has clicked on\nTableNode.Cell clickedCell = null;\n<\/pre>\n<p>In the diagram1_CellClicked event we check if the right mouse button was clicked and then show a ContextMenuStrip object:<\/p>\n<pre>\/\/handles the cellClicked event\nvoid diagram1_CellClicked(object sender, CellEventArgs e)\n  {\n    \/\/if the user has clicked with the right mouse button\n    if(e.MouseButton == MouseButton.Right)\n      {\n        \/\/we should keep track of the clicked cell\n        clickedCell = e.Cell;\n        \/\/and show the context menu\n        cMenu.Show(Cursor.Position);\n              \n       }\n  }\n<\/pre>\n<p>We handle the ItemClicked event of the ContextMenuStrip:<\/p>\n<pre>if (clickedCell != null)\n   {\n      TableNode tNode = clickedCell.Table;\n\n      \/\/if the user has selected to add a row\n      if (e.ClickedItem.Text.Equals(\"Add row\"))\n         {\n            \/\/add a row\n            tNode.AddRow();\n            \/\/assign the image URL kept as a tag to the first cell in the new row\n            tNode[0, tNode.Rows.Count - 1].Image =\n                 tNode.Tag as Image;\n            \/\/type in some dummy text in the text cell\n            tNode[1, tNode.Rows.Count - 1].Text = \"[edit text]\";               \n        }\n..............\n}\n<\/pre>\n<p>In the first part of the method we handle the case when the user has chosen to add a new row. The new row is inserted at the end of the table with the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?M_MindFusion_Diagramming_TableNode_AddRow_0.htm\">AddRow<\/a> method. We use the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> property of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_TableNode.htm\">TableNode<\/a> which points to the location of the bullet for this table and we render it to the first cell of the new row.<br \/>\nIf the user wants to delete a row we show first a warning message. Here we render the name of the detected row to be deleted. If the user agrees we get the index of the row using its <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_DiagramItem_Tag_0.htm\">Tag<\/a> and we remove it from the TableNode:<\/p>\n<pre> else if (e.ClickedItem.Text.Equals(\"Delete row\"))\n      {\n          cMenu.Close();\n\n          \/\/display a warning, which shows which row is about to be deleted\n          string message = \"Do you want to delete row \" + clickedCell.Text + \"?\";\n          string caption = \"Confirm Delete\";\n          MessageBoxButtons buttons = MessageBoxButtons.YesNo;\n          DialogResult result;\n\n          \/\/ Displays the MessageBox.\n          result = MessageBox.Show(message, caption, buttons);\n          \/\/if the user has decided to delete the row\n          if (result == System.Windows.Forms.DialogResult.Yes)\n            {\n                                        \n             \/\/get the index of the row that is to be deleted\n             int rowIndex = (int)clickedCell.Tag;                        \n             tNode.DeleteRow(rowIndex);                        \n                        \n           }   \n...\n}\n<\/pre>\n<p>Both actions of delete and insert of a new row require the indices of the table rows to be rearranged and the size of the table to be adjusted. We call:<\/p>\n<pre>\/\/adjust the node size\nresizeNode(tNode);\n\/\/arrange the table tags\narrangeTags(tNode);\n<\/pre>\n<p><strong>VI. Links<\/strong><\/p>\n<p>Users can draw links between rows of the tables. To achieve this we first change the default <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_Behavior.htm\">Behavior<\/a> of the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_WinForms_DiagramView.htm\">DiagramView<\/a> :<\/p>\n<pre>this.diagramView1.Behavior = MindFusion.Diagramming.Behavior.LinkTables;\n<\/pre>\n<p>Then we add some styling for the links:<\/p>\n<pre>\/\/styling the links\ndiagram1.LinkShape = LinkShape.Cascading;\ndiagram1.LinkCascadeOrientation = MindFusion.Diagramming.Orientation.Horizontal;\ndiagram1.LinkHeadShape = ArrowHeads.Triangle;\ndiagram1.LinkHeadShapeSize = 4;\n<\/pre>\n<p>Here we define the shape of the links as &#8220;Cascading&#8221; and we change the default <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_Diagram_LinkHeadShape_0.htm\">LinkHeadShape<\/a> and <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?P_MindFusion_Diagramming_Diagram_LinkHeadShapeSize_0.htm\">LinkHeadShapeSize<\/a> properties. Further styling of the links is done with a <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Diagramming_Theme.htm\">Theme<\/a> and a DiagramLinkStyle:<\/p>\n<pre>\/\/create a theme to apply additional link styling\nTheme theme = new Theme();\nDiagramLinkStyle style = new DiagramLinkStyle();\nstyle.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(192, 192, 192));\nstyle.Stroke = new MindFusion.Drawing.SolidBrush(Color.FromArgb(80, 80, 80));\ntheme.RegisterStyle(typeof(DiagramLink), style);\ndiagram1.Theme = theme;\n<\/pre>\n<p>There we specify the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?T_MindFusion_Drawing_Brush.htm\">Brush<\/a> for the links and the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?O_T_MindFusion_Diagramming_Fluent_DiagramItemStyleExtensions_Stroke.htm\">Stroke.<\/a> When new links are created we want them to have 3 segments because this looks good. So, we handle the <a href=\"https:\/\/www.mindfusion.dev\/onlinehelp\/flowchartnet\/index.htm?E_MindFusion_Diagramming_Diagram_LinkCreated.htm\">LinkCreated<\/a> event to specify this:<\/p>\n<pre>this.diagram1.LinkCreated += new System.EventHandler(this.diagram1_LinkCreated);\n\n..................\n\n\/\/raised when the user draws a link between two tableNode-s.\nprivate void diagram1_LinkCreated(object sender, LinkEventArgs e)\n  {\n    \/\/the link should have 3 segments\n    e.Link.SegmentCount = 3;\n  }    \n<\/pre>\n<p>With this our Logic Mode demo application is ready. The complete code for the application with all necessary libraries of the diagramming component is available for free direct download download from here:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/samples\/winforms\/diagram\/LogicModel.zip\">Download the Logic Model Demo Application Source Code<\/a><\/p>\n<p><em>About MindFusion.Diagramming for WinForms:<\/em> A programming component that provides any WinForms application with a full set of features for creating and customizing all types of diagrams, flowcharts, schemes, hierarchies, trees, graphs etc. The control provides numerous ways to save and load a diagram, six auxiliary controls and more than 15 automatic graph layout algorithms. Diagram elements include scrollable tables, container nodes, multi-segment arrows, custom diagram item types and many more. Further details <a href=\"https:\/\/mindfusion.dev\/features-net.html\">here<\/a>.<\/p>\n<p>Diagramming for WinForms is a royalty-free component, clients get 12 month upgrade subscription when buying a license. The source code is also available for purchase. Visit <a href=\"https:\/\/mindfusion.dev\/buy-flowchart-net.html\">the buy page<\/a> for a list with the current license prices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The logic model is a tool that helps managers evaluate the effectiveness of a program. The tool allows the user to list the input, output and outcomes of the process. In our sample we have used the WinForms Diagram Control &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/logic-model-software-demo\/\">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":[496,134,493,494,431,495],"class_list":["post-1919","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-sample-code","tag-c-diagram-tool","tag-diagram-component","tag-logic-model","tag-logic-model-software-demo","tag-winforms-diagram-control","tag-winforms-flowchart-control"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-uX","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1919","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=1919"}],"version-history":[{"count":6,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1919\/revisions"}],"predecessor-version":[{"id":2641,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1919\/revisions\/2641"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}