UML class nodes: Infonode8

People sometimes ask about how to create something like a class node as typically seen in a UML diagram.

There are a lot of variations, of course, but I have made another example class for you to use:

This uses two GoCollapsibleHandles to help implement the interactive collapse/expand of the sublists. Each list item is implemented by the InfoNode8Item class, to hold both a GoImage and a GoText.

I figured it would be fun to take an hour to make it look like the Class nodes in Visual Studio 2005's class designer.

Obviously further customizations are possible, such as changing the appearance of the GoCollapsibleHandles.

The source file is now in the Demo1 sample.

Hi Walter,



Its height’s too large when it’s expanded.

How to show port for each item?

How to drag and drop a item to another item in another class?

The height looks fine to me–did you want to change the margins of the GoListGroup that is the node’s Body?
This class was explicitly designed to just have a single port for the whole node, which is why it inherits from GoBoxNode. But maybe you could inherit from GoNode instead and use GoMultiTextNodes instead of GoListGroups in each section, as the second item of each CollapsingItemList.
I’m not sure about your last question–I would investigate customizing the dragging tool, as described in other topics of this forum.

Hi Walter,



I only added InfoNode8 to View without any changing code.

I checked margins. They were normal.

When I debuged, I found that returning of RectangleF.Union(this[0].Bounds, RectangleF.Union(this[1].Bounds, this[2].Bounds)) was large if infoNote8.Bounds was large and it’s raised error “An unhandled exception of type ‘System.ArgumentException’ occurred in system.windows.forms.dll. Additional information: Invalid parameter used.” when it’s Collapsed if infoNote8.Bounds was small

If I just select an expanded InfoNode8 and examine its Bounds, the Height is quite reasonable: about 181.