At Mix, in Las Vegas, we just introduced Blend 4. One of the new features that got great excitement is path-based layout. Let me tell you a bit more about it
Path-based layout opens many interesting creative possibilities, way beyond just laying out things on a path. But more on that later. It is currently supported on Silverlight 4 and WPF, but not yet on Windows Phone.
For Expression Blend, it is an important goal to enable designers to realize their ideas as directly and visually as possible. If you have a great picture, motion or interaction in your mind, you should be able to realize this idea and inspiration with the tools we provide, without having to enlist the help of a programmer.
In modern user experiences, layouts beyond the linear list are becoming more common. Silverlight and WPF have great support for extensible layout, but creating interesting layouts requires code.
Here is an example:
The picture above shows a radial list box from our Mix 2009 keynote demo. Almost the whole demo was created without code, but there were exceptions, most notably the radial list box layout itself, which required a radial layout panel, provided by a developer.
We asked ourselves, why would one need to write code to solve a design problem as basic as that? After all, artists have laid out things around circles for roughly since the dawn of art, and an old trick like that should be easy.
So, we said that geometric layout should be as easy as drawing the geometry that defines the layout. And that really is, in a nutshell, what path-based layout does: You draw one or more paths, assign them to a layout container, and Blend will arrange the items along the path for you.
And path-based layout is truly dynamic: Its layout parameters and the underlying paths can both be animated for great dynamic layout effects.
Update: The video of our Blend intro session at Mix just came online. See the video for some live demos…
If you want to follow the samples below, the demo files that roughly match the following walk through are located here. The archive contains two versions of the project: One with just some basic setup, and the second one with all parts completed. You do need Blend 4 Beta to use these files.
Let’s do the most basic example:
- Create a new Silverlight SketchFlow project in Blend. You don’t need a SketchFlow project, but as we want to experiment with multiple screens/pages, SketchFlow makes it convenient to switch things in the map…
- On the screen, draw a circle, and adjust stroke and fill as desired:
- Next, go to the asset tool and search for the PathListBox. It currently only shows up in the “All” category under Controls – the easiest way to find it is just typing “pa” in the search bar:
- Add a PathListBox anywhere on the page. It does not really matter where it is, or how big it is. I recommend for this exercise to keep it in some corner, out of the way:
- Add some content to the PathListBox. Of course, the traditional way to add content to a list is with data binding, but for this exercise, just draw into the PathListBox. In Blend 4, we have these nice new parametric shapes, so let’s just add a new block arrow. You can find these in the Shapes category of the asset panel. Remember to clear the search field if you searched for PathListBox before…
- Add some fill and recolor the stroke:
Now we’re done preparing. Now let’s do some layout. let’s attach the layout path to the PathListBox.
- Select the PathListBox in your scene
- Find the Layout Items category:
- Click on the little target icon (it indicates an element picker), and then click on the circle. Make sure that the circle highlights before you click.
- As a result you’ll see the arrow move to the top of the circle:
- Select the arrow and copy it a few times. You’ll see that the copies are arranged along the path:
Yay. Now, let’s play with some of the layout properties of PathListBox.
- First, try orientation:
- This option lets you determine if all objects point up in their natural direction, or if they are rotated along the normal of the path:
- Next, try Span and Start. These let you determine which part of the path to use for layout, and where on the path layout starts:
Also try to add other content to the PathListBox. Buttons, complex controls, other shapes – anything goes. And another idea to play with: The elements you choose as Layout Paths do not need to be shapes. They can be any element. If the element chosen is not a shape, PathListBox will treat it as a rectangle, using the bounding box as the layout path…
So much for today. In the next installments of this series, we will data bind some real list content and cover some more possibilities with PathListBox, such as:
- Additional transforms (think radial list box),
- Multiple layout paths
- Animated layout properties and paths
- Text binding
… and some more. Stay tuned! And as always, we appreciate your feedback! Let us know what you think.