Intelligent Node Resizing in Essential Diagram for WPF | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (174).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (915)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (628)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (507)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (592)What's new  (332)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Intelligent Node Resizing in Essential Diagram for WPF

Most diagrams require users to specify the dimensions of each node object added to the drawing area. This is a big limitation given the dynamic nature of the diagram nodes and the vast extent of content that can be hosted inside them. It becomes very difficult to predetermine the dimensions of the content that is going to be hosted inside the nodes. Most of the time we may take a pessimistic approach and specify a very large width so that all the content fits in, or we may end up getting the content trimmed. For instance, consider a scenario where you want to create an organizational chart of a company and you wish to show the name of the managers and the employees under them.  Let’s fix the width of the node as 120 pixels and the height as 60 pixels and see the output:

NodeResizing_1

The width (120 pixels) that has been specified suits two of the four nodes; however, the designation of “Joe Robert” does not fit within the specified width and is therefore cut.  Same is the case with the last node. Now one possible solution, as specified previously, is to specify a width large enough to fit all the content. So, maybe a width of 150 pixels will suffice the needs with respect to this scenario. However, clearly this is not a generic solution as we will have the same issues when more nodes with larger text are added. Therefore, practically the best solution will be not to specify any width at all and let the nodes stretch themselves to fit their content. Essential Diagram for WPF provides this support. The diagram will look something like this:

NodeResizing_2

Now we see that the nodes themselves intelligently calculate the space needed to fit the content and expand just enough to fit. The same functionality has been implemented in our Silverlight version of Essential Diagram. I will blog more about the upcoming features in the Silverlight version, including the much awaited Save and Load compatibility between WPF and SL diagrams.

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed