Custom Panel: TreeMapPanel

TreeMaps have been all the rage. I figured it would be cool to see how easy it would be to build such a thing in WPF.

It turns out that getting started in pretty easy. There are a number of implementations of TreeMaps around. I found a Java one that looked like a good place to start. After a bunch of editing and debugging I had an algorithm that worked pretty well. The trick was fitting it into the Panel paradigm in WPF.

The model for Panels in WPF is attached properties. You drop in a bunch of children and then you assign Panel-specific properties. Canvas: Left and Top. Grid: Column and Row. DockPanel: Dock. Pretty simple.

For TreeMapPanel the obvious property to expose was Area. A TreeMap will lay out its children so that they fill the space and their respective areas stay proportionate. That's what I did with my panel. The only thing left was to throw some data at it. Similar to my FolderPicker demo, I created a data object to generate a directory and file structure.

NOTE: I hard-wired a path in Data.cs. Make sure you change it to a directory that actually exists on your computer. You may also want to pick a shallow directory (without many nested sub-directories.) My default style makes heavy use of Viewbox which gets expensive when they are nested.

Props to my friends at UMD for the starting spot. Make sure if you reuse my code you stay compliant with their original license.

Comments

• Anonymous
  February 19, 2006
  We're not nearly as entertaining as Don and Chris, but Robby and I are in another video on Channel 9...