Silverlight 4 PathListBox

1 04 2010

I’ve been catching up on the sessions I missed during MIX10. There were quite a few to say the least. I think that Christian Schormann & Peter Blois’s session on Blend 4 was one of the sessions many visitors missed due to it colliding with Joe Belfiore’s introduction to WP7.

Schormann and Blois talked a lot about a new control called PathListBox, which is totally awesome. Jump with me –>

PathListBox Silverlight Blend

Introducing the PathListBox

The PathListBox acts just like an ordinary ListBox with one crucial exception. Instead of displaying your items in a horizontal or vertical straight line, it displays them in whichever fashion you like; circular, pyramid, penis, square. The possibilities are endless.

To use the control, use Expression Blend 4 beta.

  • Open a new project. Sketchflow or Silverlight preferably. The PathListBox works just as well for WPF though.

PathListBox Silverlight Blend

  • Create a basic shape such as a circle, a squiggly line or an arc.

PathListBox Silverlight Blend

  • Add a PathListBox control from controls. You can find it under “All” or just search for it. Size and position doesn’t matter much.
  • Click the PathListBox and click the “Select an object to use as a LayoutPath” option under Layout PathsPathListBox Silverlight Blend
  • Click the path you created earlier to bind the PathListBox to it.
  • To add items to the ListBox, we can either databind a collection to it, or in this case; just a few images. I create them from jpegs. Just drag any object to the PathListBox-Box, hold alt and drop them to add them as an object.

PathListBox Silverlight Blend

  • On second thought, this looks like trash. Of course, if you have a specific design in mind, this can look really well. This however, does not.PathListBox Silverlight Blend

PathListBox Silverlight Blend

  • Let’s try with some text instead. Can’t go wrong with text! I create a basic textbox. When we databind to a textbox from a listbox, each character is a separate item. This means we can line it up on the path.
  • PathListBox Silverlight Blend

    Gothcon, or Gothenburg Convention is an annual convention which focuses on tabletop-, card- and miniature-games. It has nothing to do with black hair, long robes and makeup.

  • Click the PathListBox and choose Common Properties > Itemssource > ElementProperty Binding and click on the textbox.
  • PathListBox Silverlight BlendThis worked great, but the text is very small, I’ll make it a bit bigger and space it by using the Font, Textsize, Orientation, Start and Span in the PathListBox control. These are very useful.

PathListBox Silverlight Blend

I think that although it doesn’t seem to be great for quick demos, the PathListBox is a great control that you’ll come to love. As long as you spend more than five minutes on it, you can do cool things easily. I remade the text in about five minutes and managed to make it a bit more legible. Note that this is one PathListBox which binds to multiple shapes and the same one textbox.

PathListBox Silverlight Blend




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: