electric beach

Christian Schormann

Wednesday, March 24, 2010

Blend 4: About Path Layout, Part III

In today’s installment of my series on path-based layout, let me show you that path-based layout can actually be used for dynamic, resizable layout :-)

If you are looking for previous parts of this series, they are here:

A fairly common layout problem is to simply distribute items horizontally or vertically, to fill the available space with equal spacing.

If the number of items is known at design time, you can do this with a grid, using star-sized rows or columns, but that does not work well with a variable number of items to layout.

Using PathListBox or PathPanel, this is quite easy:

  • Draw a vertical or horizontal line with the Line tool (hold shift to snap to angles), within the resizable container you want you dynamic layout to happen in. In this example, the line is in the main user control:
    PL4-LineTool  
    PL4-Line
  • Add a PathListBox or PathPanel to the same layout container the line is in.
  • Add the line as a layout path, and make sure that the distribution mode for the path is set to Even:
    PL4-Distrib
  • Add some items to the path list box or the path panel:
    PL4-Layout1
  • As you can see, the items are evenly spaced along the line. Now try resizing the container the path and list box are in:
    PL4-Layout3 PL4-Layout2 PL4-Layout4

As you can see, you get a dynamic version of a “distribute” layout that resizes properly in the context of application resizing.

Here is a slightly more complex example, using 3 separate paths with overflow from one to the next:

PL4-Layout5

PL4-Layout6

PL4-Layout7

posted by cs at 14:12  

3 Comments

  1. [...] in SketchFlow and Blend 4: About Path Layout, Part III (Christian [...]

    Pingback by Dew Drop – March 25, 2010 | Alvin Ashcraft's Morning Dew — March 25, 2010 @ 04:40

  2. Very good series about new features of Blend 4. Do you plan on releasing any tutorials and/or best practices on using the new MVVM templates in Blend? Thanks again.

    Comment by shaggygi — March 25, 2010 @ 07:59

  3. [...] Part 1, Part 2, Part 3 [...]

    Pingback by Windows Client Developer Roundup for 4/12/2010 - Pete Brown's 10rem.net — April 12, 2010 @ 00:41

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress