A Tree’y Spidery Type WPF Diagram Control

I recently started a new job where I am employed as a WPF developer. When I arrived the guys there gave me a brief that was to make a cool app, and they really liked the look and feel of the FamilyShow exemplar by Vertigo. Which I also love, that and Tangerine by Infragistics are my favourite WPF demos.

What I liked in both where the fluid movements and the diagramming approach used in the FamilyShow exemplar particularly. The guys where I just started working asked me how hard it would be to create something like the diagramming component seen in the FamilyShow exemplar.

So without further ado I contacted my favourite partner in weird WPF briefs, Mr Fredrik Bornander, who I love working with on these stranger ideas. We seem to manage to do a reasonable job together, at least I think anyway.

Here is a screenshot of what we managed to achieve just to wet your appetite:



I have created a full codeproject article to detail the full implementation of this control, which is available using the codeproject article link, A Spider type control tree thingy for WPF

But here is brief list of what it does, hope it helps someone out:

  • Uses a specialized ScrollViewer which allows the user to use the mouse to create a friction enabled drag operation (this is pretty cool actually)
  • Only shows 3 layers of the tree Maximum to keep it clean
  • Current node selected is centered within available area
  • Node collapse expand buttons automatically enabled dependant on number of children the current node has



9 thoughts on “A Tree’y Spidery Type WPF Diagram Control

  1. Thanks for the sample project, I’ll try to check it out, it looks interesting.
    – ralph (vertigo)

  2. Thanks for the sample project, I’ll try to check it out, it looks interesting.
    – ralph (vertigo)

  3. sacha says:

    No worries Ralph, thanks for you and Alan and Vertigo for doing such a great job on FamilyShow to begin with. Tell Bee Tan, I would still love to come work at Vertigo at some point.

  4. […] Barber branches out into A Tree’y Spidery Type WPF Diagram Control (sorry, couldn’t resist) and talks us through Binding And Using Localized Enums In WPF […]

  5. Mike says:

    Maybe you can take some ideas from this control: http://networkvisualiser.com/default.aspx

  6. sacha says:

    Yes its by DotNetSolutions, and I am quite familiar with it, and have even been interviewed by them in the past. We used that control at my last company.

    Thanks anyhow

  7. Dr.Luiji says:

    I liked the article indeed.
    Well done.

  8. sacha says:

    thanks man

  9. Jo says:

    Wow, great control Sacha!

    Just a quick question: Would you help me (of course not for free) to go on with the development of this control? At the moment we are using the above mentioned networkvisualizer control, but I think they stopped developing it and… I need some more cool gimmicks 🙂 (and we’re not able to program them on our own because we don’t have a real WPF Developer in our team)

    If you’d like to, please contact me!

    Regards, Jo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: