In this post we\u2019ll show how to implement Visio-like dynamic pagination of the diagram canvas, expanding or shrinking it while users draw nodes interactively, and rendering custom page borders. This is demonstrated using MindFusion Windows Forms Diagram control, but equivalent APIs are provided by MindFusion diagramming libraries for other platforms.<\/p>\n\n\n\n\n\n\n\n
Start by creating a new WinForms project and adding the MindFusion.Diagramming package in NuGet Package Manager. After installing the package, add DiagramView and Diagram instances to the form, setting view’s Diagram property to the form’s member.<\/p>\n\n\n\n
Add the following fields to the form class to keep track of the current pages:<\/p>\n\n\n\n
In form’s Load event handler, set the following properties to let us control the canvas size manually, and render the area outside diagram.Bounds in a different color:<\/p>\n\n\n\n
diagram.ExteriorBrush = new SolidBrush(Color.Gray);\ndiagram.AutoResize = AutoResize.None;\ndiagram.Bounds = new RectangleF(new PointF(), pageSize);\ndiagram.RestrictItemsToBounds = RestrictToBounds.NoRestriction;<\/code><\/pre>\n\n\n\n
Handle NodeCreating and NodeModifying events in order to add or remove pages while users draw on the canvas. Handle DrawForeground event to draw custom page borders:<\/p>\n\n\n\n
Page borders are drawn by looping over the grid rows and columns:<\/p>\n\n\n\n
void OnDrawForeground(object sender, DiagramEventArgs e)\n{\n\tvar pen = new System.Drawing.Pen(Color.Black)\n\t{\n\t\tWidth = 0,\n\t\tDashStyle = System.Drawing.Drawing2D.DashStyle.Dot\n\t};\n\n\t\/\/ draw vertical page borders\n\tfor (int c = 0; c <= pageCols; c++)\n\t{\n\t\tfloat x = c * pageSize.Width;\n\t\te.Graphics.DrawLine(\n\t\t\tpen, x, 0, x, diagram.Bounds.Height);\n\t}\n\n\t\/\/ draw horizontal page borders\n\tfor (int r = 0; r <= pageRows; r++)\n\t{\n\t\tfloat y = r * pageSize.Height;\n\t\te.Graphics.DrawLine(\n\t\t\tpen, 0, y, diagram.Bounds.Width, y);\n\t}\n\n\tpen.Dispose();\n}<\/code><\/pre>\n\n\n\n
Now if you drag a node outside the initial page boundaries, the page grid will expand to accommodate the new node position:<\/p>\n\n\n\n<\/figure>\n\n\n\n
The complete sample project is available for download here:<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/mindfusion.dev\/_samples\/custom_paging.png\")
<\/figure>\n\n\n\n