Sorry for the long delay. Here’s another installment of my series on path-based layout.
In our demo at Mix 2010, we showed that path layout can also provide a neat stand-in for some features that are missing from the Silverlight runtime: Motion path and text on a path.
Let me show you how these are done. Also, I’m going to give you a sneak preview on some other more advanced stuff you can do with path layout that my colleague Joanna Mason is going to blog about in detail soon…
Motion path is really easy:
- Create a path you want to use for the motion
- Create a path list box
- Draw something in the path list box. For example, a right-pointing arrow
- Select the path list box in the object tree
- Attach the path list box to the path. Use the object picker in the Layout Paths section of the path list box
- Set the orientation property on the path
- Animate the “start” property of the path in the itemlayout category of the path listbox. You do this by first creating a storyboard, then moving the timeline to a desirable position, and setting the start property to a desired value between 0 and 100. You can also set an easing function for the keyframe you make. And off the arrow goes…
Note that you don’t need to set a start key frame, unlike in most other animation systems. If you don’t use a start key frame, Silverlight and WPF automatically interpret this as starting at wherever value the system is, and animate smoothly from there. This is called a hand-off animation. You can also animate the Start property using a visual state.
Text on a Path
You can use path list box to simulate text on a path. Path list box was really not designed for this on purpose, but it just happens to work out, even if it needs a couple of extra steps.
Here is how it works:
- First you create a path and a path list box as described above.
- Next, you need a source for a string. The easiest thing to do is to just drop a TextBox on the screen. But if you have any data source anywhere in your project that has a field of type string, you can use this too. Just make sure that you use that field in details mode, if the data source has a collection.
- Once you have your text source you need to data bind the text to the ItemsSource property of the path list box. The following explains how to do this for a text box.
- Select the path list box in the object tree
- Find the ItemsSource property in the property inspector. It is in the Common category.
- Click on the property marker to the right
- Select the “Element Property Binding” entry from the menu. This gets you a pickwhip, so just pick the text box
- When you click the textbox, you get a dialog to choose the desired property of the text box. By default, this property should be set to “Text”. If you see anything else, make sure you have picked text from the combobox. Click OK when you are done:
This creates a connection between the text box and the ItemsSource of the path list box. The reason this works for text on a path is that the .NET string type is effectively a collection of characters. And when you bind any collection to the ItemsSource of a list box, the list box takes every item (here, every character) and makes it into a list box item…
As a result, we see text on a path indeed.
If you look closer, you realize, however, that the characters are small and almost certainly not in the font you want. So, let’s adjust the look of this text.
Just find the text properties in the property inspector and set them as desired:
Now try to animate the start and / or span values!
If you want to adjust more sophisticated things, such as if the text baseline is centered on the path or below or above, you can also do that, but that requires a little bit more work. What you need to do for this is a little bit more complicated. Here are the steps:
- Create a data template for the path list pox. In WPF, you can also edit the default one.
- Just say ok in the following dialog.
- The default item template does not contain anything useful. Add a text block to grid:
As you can see, the individual characters of the text have been replaced by the the text “TextBlock” which is simply the default content of a text block.
So, why does the text block not show the individual characters from the data source? Because we have not connected the text to the data context, and because it is alone and lonely it just displays the default text.
In order to make it do our bidding we just data bind the text block.
- Make sure the text block is not in edit mode – it usually is right after creation. Just hit escape.
- Next, find the text property (important, not the category!)
- Use the property marker, as explained above, and open the data binding dialog.
- Select the string in the dialog box:
- As a result, everything is back to where it was before we created the data template:
- Within the data template, we now have additional levers to use. For example, here are a few render transforms (an offset in y to raise the text above the path, and a little bit of extra rotation):
Path list box has a few more tricks up its sleeve. A few people asked us how the incremental scaling and blurring in this example was done:
To explain this, I need to say a few words about how one feature of path layout works. Whenever an item is added to a PathListBox, it is wrapped into a PathListBoxItem. The whole Russian doll of templates and containers in list box is explained in this post.
On PathListBoxItem, we expose a number of useful additional properties. For example, every PLBI that is generated as part of a path list box gets its relative position on the path, its orientation and a bunch of other number with it on its way. These numbers can be used to drive scaling opacity or any other property you want. In the example above, they are used to drive scale and the amount of blur applied to each element. This enables a wide range of additional effects.
Currently, these values unfortunately cannot be accessed from within Blend – some small bit of code is required to do this. But stay tuned for Joanna Mason’s blog post on this that is coming sometime soon.