Question

I’m writing code to present the user with a simplified network map. At any given time, the map is focused on a specific item… say a router or a server. Based on the focused item, other network entities are grouped into sets (i.e. subnets or domains) and then rendered around the focused item. Lines would represent connections and groups would be visually grouped inside a rectangle or ellipse.

Panning and zooming are required features.

An item can be selected to display more information in a “properties” style window. An item could also be double-clicked to re-focus the entire network map on that item. At that point, the entire map would be re-calculated.

I am using MVVM without any framework, as of yet. Assume the logic for grouping items and determining what should be shown or not is all in place.

I’m looking for the best way to approach the UI layout. So far, I’m aware of the following options:

1. Use a canvas for layout (inside a ScrollViewer to handle the panning). Have my ViewModel make use of a Layout Manager type of class, which would handle assigning all the layout properties (Top, Left, etc.). Bind my set of display items to an ItemsControl and use Data Templates to handle the actual rendering.

The drawbacks with this approach:

• Highly manual layout on my part. Lots of calculation.
• I have to handle item selection manually.
• Computation of connecting lines is manual.

The Pros of this approach:

• I can draw additional lines between child subnets as appropriate (manually).
• Additional LayoutManagers could be added later to render the display differently.
• This could probably be wrapped up into some sort of a GraphLayout control to be re-used.

2. Present the focused item at the center of the display and then use a PathListBox for layout of the additional items. Have my ViewModel expose a simple list of things to be drawn and bind them to the PathListBox. Override the ListBoxItem Template to also create a line geometry from the borders of the focused item (tricky) to the bound item. Use DataTemplates to handle the case where the item being bound is a subnet, in which case we would use another PathListBox in the template to display items inside the subnet.

The drawbacks with this approach:

• Selected Item synchronization across multiple `PathListBox`es. Only one item on the whole graph can be selected at a time, but each child PathListBox maintains its own selection. Also, subnets cannot be selected, but would be selectable without additional work.
• Drawing the connecting lines is going to be a bit of trickery in the ListBoxItem template, since I need to know the correct side of the focused item to connect to.

The pros of this approach:

• I get to stay out of the layout business, more.

I’m looking for any advice or thoughts from others who have encountered similar issues or who have more WPF experience than I. I’m using WPF 4, so any new tricks are legal and encouraged.

Answer 1

I would take a look at the open source Family Show application. It’s a genealogy application that graphs relationships between family members in a manner a lot like what you’re describing. My guess is the code there will get you 90% of the way to what you want to do.