electric beach

Christian Schormann

Wednesday, March 17, 2010

Blend 4: About Path Layout, Part II

Ok, I’m back for part II of my short series of posts on path layout (see here for part I). Let’s continue where we ended last time:


Before we do something new, return the start and span properties to 0 and 100, respectively. The result should be this:


As we want to build a radial layout, next thing we need to do is replace our arrows in the list box with some binding to a data source.

In the demo project, go to the data pane. I already created a sample data source for you. Drag the collection in the sample data source onto the path list box, either in the object tree or on the art board.


As a result, you’ll get this:


As you can see, the text elements are aligned to the path now in such a way that the up direction of the element on the path is aligned with the normal of the path.

For a radial list box, this is of course not quite what we want – we really would want every item to be rotated by 90 degrees from its normal direction. Let me show you where the best place to do this is. Note that in the video of the mix demo I am using a different place that is slightly faster to demo, but has a drawback I’ll explain in the next post of this series. But let’s do it right first:

  • Select PathListBox in your scene
  • Edit the ItemsContainerStyle (or rather, a copy of it)
  • The default template added by this style looks like this:
  • You might be tempted to edit the transform on the top level grid. But don’t do that – if you touch the RenderTransform of that Grid, you’ll remove the automatic orientation along the normal that PathListBox added. We therefore need an extra level of transform.
  • Select all the children of the top level grid:
  • Right click and select Group Into>Grid. This wraps these four items into an additional Grid, that we can now transform.
  • The newly created Grid should be selected after that operation. You can now edit the RenderTransform of this grid to create a rotated text item, with rotated selection, too.

The next post in this series will be a side bar with a lot of background information on how the various templates in ListBox work in Silverlight and WPF, and why you were doing what you were doing in this example. After that sidebar, I will continue with more fun things that you can do with path-based layout.

Stay tuned!

posted by cs at 09:30  


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

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

  2. [...] Blend 4: About Path Layout, Part II and Blend 4: About Path Layout, Sidebar – More About ListBox Than You Ever Wanted To Know (Christian Schormann) [...]

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

  3. [...] Based Layout – Part 1 and Part 2: Christian Schormann有一篇好博客,是关于Expression Blend 4 和 Silverlight [...]

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

  4. [...] 1, Part 2, Part [...]

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

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

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

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress