courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

school.tutorials

PathListBox Series

This series of tutorials introduces the PathListBox control and explores different techniques using path layout.

More tutorials...

Text on a Path with the PathListBox

Text on a Path with the PathListBox

Another useful technique possible with the PathListBox is arranging text on a path. In Silverlight the default control to display text is a TextBlock. This is, as the name implies, a control that arranges text in a standard block format. In this tutorial, we’ll use element binding and the ItemsSource property’s implementation of breaking strings into character collections to arrange text along a path.

Setup the PathListBox

If you’ve been working your way through this series of tutorials you should be pretty familiar with this process, but we’ll walk through the steps so we share the same starting scene.

  1. Create a new “Silverlight Application + Website” and name it “PLBTextOnAPath”.
  2. Draw a Path, change the Fill to “No Brush” and the Stroke to Blue.
  3. Change the StrokeThickness property to 3.
  4. In the Appearance pane, click the “Show advanced options” dropdown and change the StrokeDashArray property to “1 2”.
  5. Change the StrokeDashCap property to “Triangle”.
  6. Right-click the Path and select the Path -> Make Layout Path option.

The Path is in place and we’ve dressed it up a little using advanced Stroke properties. Plus the PathListBox has been created with a LayoutPath defined.

Add and Bind the Text Source

To make this example dynamic, we will use a TextBox control as the text source and element binding to bind the Text property to the PathListBox ItemsSource property. This way when a new text value is entered in the TextBox the PathListBox will be automatically updated.

  1. Add a TextBox control above the Path
  2. With the PathListBox selected, click the Advanced options square (Advanced options square) next to the ItemsSource property and select the “Element Property Binding…” option.
  3. Move your mouse over the TextBox and you will notice the icon has changed to the Element Picker icon (Element picker icon)
  4. Click the TextBox and in the Create Data Binding dialog, select Text and hit OK.

After the Text property is bound to the ItemSource property, the text value becomes a collection of letters and each letter is rendered within a PathListBoxItem along the Path. And that’s all there is to it, although the text is a little hard to see.

Enhance the Text Display

The default PathListBoxItems template contains a ContentPresenter control which by default displays string values using a TextBlock control. Rather than let the ContentPresenter decide how the letters appear, we will define a custom ItemTemplate.

  1. In the Objects panel, drag the Path, below the PathListBox.
  2. Right-click the PathListBox and select the Edit Additional Templates -> Edit Generated Items (ItemTemplate) -> Create Empty… option.
  3. On the Create DataTemplate Resource dialog hit OK.
  4. Now in template editing mode add a TextBlock to the Grid, by double clicking the TextBox tool icon in the Tools panel.
  5. Click the Advanced options square (Target icon) next to the Text property and select the Data Binding… option.
  6. In the Create Data Binding dialog, click the Data Context tab, select “String” and hit OK.
  7. Set the FontFamily property to “Arial Black” and FontSize to 36 pt.
  8. Change the Foreground to a green color.
  9. Set the Translate Y property to -26, so the letter will be placed above the line.

The custom template does a much better job showing the text, now we will align the letters to the path to create an improved display.

  1. Exit template editing mode.
  2. Select the PathListBox and change the Orientation property to “OrientToPath”.
  3. Lower the Padding to -37, effectively reducing the letter-spacing.
  4. Run the project and type a new text value into the TextBox.

This tutorial covered the basic concept of arranging text on a path, but there is a lot more you could do with this technique including animation, hidden Paths and even more customized ItemTemplates.