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.