electric beach

Christian Schormann

Tuesday, March 16, 2010

Blend 4: About Path Layout, Part I

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 :-)

PLBSampler2

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.

Background

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:

RadialSample

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…

The Basics

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:
    PL-001-Circle
  • 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:
    PL-002-Assets
  • 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:
    PL-003-NewPLB
  • 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…
    PL-004-BlockArrowAssetPL-005-ArrowInPLB
  • Add some fill and recolor the stroke:
    PL-006-ArrowInPLB2

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:
    PL-007-LayoutPath
  • 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:
    PL-008-FirstLayout
  • Select the arrow and copy it a few times. You’ll see that the copies are arranged along the path:
    PL-009-3Copies PL-010-8Copies

Yay. Now, let’s play with some of the layout properties of PathListBox.

  • First, try orientation:
    PL-011-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:
    PL-012-Orientation
  • 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:
    PL-013-SpanPL-014-SpanStart

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.

posted by cs at 16:09  

11 Comments

  1. [...] Blend 4: About Path Layout, Part I (Christian Schormann) [...]

    Pingback by Dew Drop – March 17, 2010 | Alvin Ashcraft's Morning Dew — March 17, 2010 @ 07:00

  2. [...] Interfaz basada en el Path- Parte 1 y Parte 2: Christian Schormann nos habla de la nueva característica de Expression Blend 4 y Silverlight 4 llamada Path Layout. Leed también el post de Andy Beaulieu. [...]

    Pingback by Enlaces de Marzo: ASP.NET, ASP.NET MVC, AJAX, Visual Studio, Silverlight « Thinking in .NET — March 22, 2010 @ 14:01

  3. [...] Path Based Layout – Part 1 и Part 2 [...]

    Pingback by Полезные ссылки 2 - Блог Краковецкого Александра - Microsoft User Group Винница — March 30, 2010 @ 05:16

  4. [...] Path Based Layout – Part 1 and Part 2: Christian Schormann有一篇好博客,是关于Expression Blend 4 和 Silverlight 4中一个名叫“路径布局(Path Layout)”的很酷的新特性的, 也请参阅Andy Beaulieu关于该特性的博客贴子。 [...]

    Pingback by 3月21日链接篇: ASP.NET, ASP.NET MVC, AJAX, Visual Studio, Silverlight-Scott Guthrie 博客中文版 — March 30, 2010 @ 20:53

  5. [...] 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:35

  6. [...] Worth a read – Path Layout [...]

    Pingback by Blend 4 Thoughts « Tales from a Trading Desk — April 12, 2010 @ 03:29

  7. [...] Worth a read – Path Layout [...]

    Pingback by Blend 4 Thoughts » Lab49 Blog — April 12, 2010 @ 04:19

  8. [...] new feature for Blend 4 is path based layout find out more at Electric Beach. [...]

    Pingback by Electric Beach – Blend 4 Path Layout « Creatively Functional — April 12, 2010 @ 23:58

  9. [...] Path Based Layout – Part 1 and Part 2: Christian Schormann has a nice blog post about a really cool new feature in Expression Blend 4 and Silverlight 4 called Path Layout. Also check out Andy Beaulieu’s blog post on this. [...]

    Pingback by March 21st Links: ASP.NET, ASP.NET MVC, AJAX, Visual Studio, Silverlight | OOP – Object Oriented Programing — May 3, 2010 @ 18:06

  10. [...] BLEND 4: ABOUT PATH LAYOUT, PART I http://electricbeach.org/?p=503 ABOUT PATH LAYOUT, SIDEBAR – MORE ABOUT LISTBOX THAN YOU EVER WANTED TO KNOW [...]

    Pingback by Continuous Learner #6 « smnbss's Blog — December 21, 2010 @ 05:11

  11. [...] Path Based Layout – Part 1 and Part 2: Christian Schormann has a nice blog post about a really cool new feature in Expression Blend 4 and Silverlight 4 called Path Layout. Also check out Andy Beaulieu’s blog post on this. Thanks for your time, hope the post was informative.. Follow me on twitter @nithinmohantk to get instant updates and interesting links..Be Sociable, Share! Tweet Posted in General • • Top Of Page [...]

    Pingback by Nice Learning Resources: ASP.NET, ASP.NET MVC, AJAX, Visual Studio, Silverlight » Nithin Mohan T K's Weblog — January 2, 2012 @ 06:11

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress