Panels

TreeMapsPanel & SquarifiedTreeMapsPanel usage is identical. The only difference is the resulting layout.
  • TreeMapsPanel implement a simple algorythm that distribute the elements in a single row or column ( according to the larger side of the available area.
  • SquarifiedTreeMapsPanel implement an algorythm that arrange the elements in a way that there resulting layout are the most possible square

Theses to panel have an attached property to indicate the Weight of each element.
When resizing, layout is recomputed to reflect the relative are according to the new size.

TreeMapsPanel usage sample:
<l:TreeMapsPanel Grid.Column="0">
        <Rectangle Fill="Red" l:TreeMapsPanel.Weight="10"/>
        <Rectangle Fill="Blue" l:TreeMapsPanel.Weight="2"/>
        <Rectangle Fill="Gray" l:TreeMapsPanel.Weight="4"/>
        <Rectangle Fill="Black" l:TreeMapsPanel.Weight="3"/>
        <Rectangle Fill="Yellow" l:TreeMapsPanel.Weight="5"/>
        <Rectangle Fill="Pink" l:TreeMapsPanel.Weight="2"/>
        <Rectangle Fill="Cyan" l:TreeMapsPanel.Weight="12"/>
</l:TreeMapsPanel>

...gives the following result :
TreemapspanelSample.PNG

And SquarifiedTreeMapsPanel usage sample :
<l:SquarifiedTreeMapsPanel Grid.Column="0">
      <Rectangle Fill="Red" l:TreeMapsPanel.Weight="10"/>
      <Rectangle Fill="Blue" l:TreeMapsPanel.Weight="2"/>
      <Rectangle Fill="Gray" l:TreeMapsPanel.Weight="4"/>
      <Rectangle Fill="Black" l:TreeMapsPanel.Weight="3"/>
      <Rectangle Fill="Yellow" l:TreeMapsPanel.Weight="5"/>
      <Rectangle Fill="Pink" l:TreeMapsPanel.Weight="2"/>
      <Rectangle Fill="Cyan" l:TreeMapsPanel.Weight="12"/>
</l:SquarifiedTreeMapsPanel>

...gives the following result :
SquarifiedTreemapspanelSample.PNG
...after a vertical resizing ,for example, it become :
SquarifiedTreemapspanelResizedSample.PNG

Last edited Nov 10, 2007 at 3:29 PM by woopef, version 7

Comments

No comments yet.