electric beach

Christian Schormann

Sunday, June 6, 2010

New Utility, Links and Tutorials for Path-Based Layout

If you have been using the path list box introduced with the preview versions of Expression Blend 4, here is something fun for you… 


With Blend 4, there is a new way of creating interesting, geometrically complex, animate-able layouts of elements and data. It works by simply drawing one or more paths and then making these paths the guidelines for the layout. Your content or data will then layout along the guide paths, and you can control (and animate) density, orientation, overflow and all kinds of other things interactively. 

Also, this is not just a design-time feature, but it works at runtime: If the path get resized as part of dynamic layout, your layout resizes. If you animate the path, using just standard animation tools, your layout will animate. If your data source changes, the layout will update.

See the following article series for an introduction:

Blend 4: About Path Layout, Part I

New Utility

As I hinted at in this article (at the very end), the list box items generated by PathListBox provide a lot of extra information that enables for example scaling of elements dependent on their position on the layout path. Unfortunately, this information is only accessible from code with the components shipping in Blend 4.

Joanna to the rescue… Joanna Mason is one of the PM Leads on the Expression Blend team. She has written a sample utility component that lets you apply a whole bunch of position-specific effects without having to write any code. This component is available on codeplex here, and Joanna has a blog post explaining it is here.


New Learning Material

There is also some great new learning material up on the designer toolbox at:


In particular:

· PathListBox Carousel tutorial -  http://microsoft.com/design/toolbox/tutorials/pathlistbox/carousel.aspx

· First tutorial in the PathListBox Series -  http://microsoft.com/design/toolbox/tutorials/pathlistbox/

We hope you have fun with this… If you do something interesting with path-based layout, please send us some screenshots – we’d love to see it!

posted by cs at 23:53  

1 Comment

  1. [...] New Utility, Links and Tutorials for Path-Based Layout (Christian Schormann) [...]

    Pingback by Markus Tamm » Blog Archive » Links 14.06.2010 — June 13, 2010 @ 23:33

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress