In this post we\u2019ll show how to animate container’s fold and unfold operations using some event handling and custom drawing. You can download the complete project here:<\/p>\n
AnimatedFold.zip<\/a><\/p>\n The sample code will demonstrate several features of the Diagram control and .NET:<\/p>\n Let’s start by creating some items and containers when the form loads:<\/p>\n We’ll use LINQ extensions methods to find all items within a ContainerNode, including ones contained recursively in child containers:<\/p>\n Add handlers for ContainerFolded and ContainerUnfolded events that will start animation for the container:<\/p>\n The StartAnimation method stores a list of items that should be redrawn during animation and a few other animation attributes:<\/p>\n The Animate method starts a timer whose Tick event invalidates the DiagramView and stops the timer when final frame has been reached:<\/p>\n Add a DrawForeground event handler that applies scale transform proportional to current frame of animation and draws the container’s descendants stored in animatedItems list:<\/p>\n Same technique can be applied to animate collapse and expand operations on tree branches. To implement that, handle NodeExpanded and NodeCollapsed events instead, and collect items reachable recursively from the branch’ root by following outgoing links.<\/p>\n The code above uses MindFusion\u2019s .NET API and can be used with Windows Forms, WPF, Silverlight and ASP.NET diagramming components. The Java API for Android and desktop Swing application will look similar, with setter method calls instead of property assignments.<\/p>\n You can download the trial version of any MindFusion.Diagramming component from this page<\/a>.<\/p>\n Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":" In this post we\u2019ll show how to animate container’s fold and unfold operations using some event handling and custom drawing. You can download the complete project here: AnimatedFold.zip The sample code will demonstrate several features of the Diagram control and … Continue reading \n
private void Form1_Load(object sender, EventArgs e)\n{\n var ctr = diagram.Factory.CreateContainerNode(20, 20, 100, 100, true);\n var node1 = diagram.Factory.CreateShapeNode(30, 35, 15, 15);\n var node2 = diagram.Factory.CreateShapeNode(80, 45, 15, 15);\n diagram.Factory.CreateDiagramLink(node1, node2);\n\n ctr.Add(node1);\n ctr.Add(node2);\n\n var ctr2 = diagram.Factory.CreateContainerNode(20, 20, 100, 100, true);\n ctr2.Add(ctr);\n}\n<\/pre>\nList GetDescendents(ContainerNode container)\n{\n var nodes = diagram.Nodes.Where(\n container.ContainsRecursively);\n\n var links = diagram.Links.Where(l =>\n nodes.Contains(l.Origin) ||\n nodes.Contains(l.Destination));\n\n return\n nodes.Cast().Concat(\n links.Cast()).ToList();\n}\n<\/pre>\nvoid OnContainerFolded(object sender, NodeEventArgs e)\n{\n var container = (ContainerNode)e.Node;\n StartAnimation(container, true);\n}\n\nvoid OnContainerUnfolded(object sender, NodeEventArgs e)\n{\n var container = (ContainerNode)e.Node;\n StartAnimation(container, false);\n}\n<\/pre>\nvoid StartAnimation(ContainerNode container, bool fold)\n{\n var bounds = container.Bounds;\n var scaleCenter = new PointF(\n (bounds.Left + bounds.Right) \/ 2, bounds.Top);\n\n \/\/ collect items that will be unfolded\n animatedItems = GetDescendents(container);\n\n \/\/ animation will also draw this rectangle as background\n ctrBounds = bounds;\n ctrBounds.Size = container.UnfoldedSize;\n ctrBounds.Y += container.CaptionHeight;\n ctrBounds.Height -= container.CaptionHeight;\n\n \/\/ start animation timers\n Animate(scaleCenter, fold);\n\n if (!fold)\n {\n \/\/ temporarily fold back when animating unfold operation\n \/\/ so that contained items stay invisible\n container.Folded = true;\n toUnfold = container;\n }\n}\n<\/pre>\nvoid Animate(PointF scaleCenter, bool scaleDown)\n{\n if (scaleDown)\n {\n frameCounter = maxFrames;\n frameIncrement = -1;\n }\n else\n {\n frameCounter = 0;\n frameIncrement = +1;\n }\n this.scaleCenter = scaleCenter;\n\n animationTimer = new Timer();\n animationTimer.Tick += OnAnimationTimer;\n animationTimer.Interval = duration \/ maxFrames;\n animationTimer.Start();\n}\n\nvoid OnAnimationTimer(object sender, EventArgs e)\n{\n frameCounter += frameIncrement;\n diagramView.Invalidate();\n if (frameCounter == 0 || frameCounter == maxFrames)\n {\n animationTimer.Stop();\n animationTimer.Dispose();\n animationTimer = null;\n animatedItems = null;\n\n if (toUnfold != null)\n {\n toUnfold.Folded = false;\n toUnfold = null;\n }\n }\n}\n<\/pre>\nvoid OnDrawForeground(object sender, DiagramEventArgs e)\n{\n if (animatedItems != null && frameCounter > 0)\n {\n var options = new RenderOptions();\n var g = e.Graphics;\n\n \/\/ apply scale corresponding to current frame\n var scale = (float)frameCounter \/ maxFrames;\n g.TranslateTransform(scaleCenter.X, scaleCenter.Y);\n g.ScaleTransform(scale, scale);\n g.TranslateTransform(-scaleCenter.X, -scaleCenter.Y);\n\n \/\/ draw container background\n g.FillRectangle(Brushes.White, ctrBounds);\n g.DrawRectangle(Pens.Black, ctrBounds);\n\n \/\/ draw contained items\n foreach (var item in animatedItems)\n item.Draw(e.Graphics, options);\n }\n}\n<\/pre>\n