Silverlight 4 tutorial: HOW TO use PathListBox and Sample Data
Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today.
Sample Data has been available to us from Expression Blend 3, but now with Blend 4, Silverlight 4 and Expression Blend 4 SDK there is a new control – PathListBox enabling you to create list boxes looking however you want them to look – not just rectangular. This allows you to create nice radial, spiral and many other types of layout.
Before we begin, be sure that you have Silverlight 4, Expression Blend 4 – and Expression Blend 4 SDK installed on your computer. PathListBox control is not currently part of the Silverlight 4, therefore you need to install Expression Blend 4 SDK in order to get support for it.
With all tools ready, we are ready to go with this tutorial.
Fire up your Expression Blend 4 and create a new Silverlight Application. Be sure that your Version is set to 4.0 since Expression Blend 4 now supports multi-targeting – meaning that you can build Silverlight 3 and Silverlight 4 apps using the same tool. Enter the desired name and location then hit OK when you are ready.
Go to the toolbar and draw an Ellipse on top of your design surface. You can either click on Ellipse tool or hit L key which will automatically allow you to draw Ellipse object on your design surface. Under Properties pane set its Fill to be None – you can just click that little square (Advanced properties) next to the Fill and select Reset.
If you take a look at the Type under the Properties pane you will notice that it says Ellipse – however, we need Path to work on this tutorial. Right-click on your ellipse and from the drop-down menu select Path and then Convert to Path. Now your ellipse looks exactly the same, but it is Type is now Path.
Next step is to add the PathListBox control itself. Go to Assets pane and start typing “PathListBox” – it will be automatically located. Click on it and draw it on top of your design surface. Since it’s “look less” control you can just draw it anywhere and with pretty much any size – no need to worry about that now.
Now, go to the Data pane. Locate the Create Sample Data icon and click on it. From the drop down menu select New Sample Data… option
New Sample Data dialog will appear – leave all the settings as they are – just be sure that Enable sample data when application is running option is checked.
Now you will notice that some sample data has been automatically generated for you. I won’t go into details explaining how the sample data works for now – if you are interested about that let me know under comments and I will create new tutorials on that.
Anyhow, back to our sample…
You can notice that Collection with two Properties has been created. Property1 is String and Property2 is Boolean. You can easily change their types by clicking on the icon right from them – Change property type. We won’t deal with this for now – we will use String (Property1) for our sample.
Now, click on the Property1 and drag it on top of your PathListBox control. You will notice that cursor has changed and also now there is information that you can bind Property1 to PathListBox.
Release the mouse and binding will be set up.
Since PathListBox needs a Path object to use it as its LayoutPath (or how I tend to call it sometimes – Geometry or Backbone) – you need to tell to PathListBox to use your Path (one that we created from an Ellipse earlier) as its LayoutPath.
To do that – be sure that your PathListBox control is selected and go to Properties pane. Locate the Layout Paths section. Click on the bull’s-eye icon and drag it on top of your Path – again, like it was the case with data binding, cursor will change its look and indicate that you will be selecting Path as LayoutPath for your PathListBox control.
Release the mouse and you will notice that bunch of new items will be now visible on your ellipse following its shape.
And that’s it – simple as that – you can use any Path (try using the Pen or Pencil tools under Blend to draw paths – you can either select them from toolbar or hit P for pen or Y for Pencil) and set it as LayoutPath for your PathListBox.Step further…
You can start exploring different properties related to the layout of different items. Some ideas to explore are related to Padding, Orientation and Start properties – all located under the Layout Path section on the Properties pane.
Just for the fun – you can set the Padding to, let’s say -130 and all items will fall into same location – now imagine animating (by using the Storyboards) that property from -130 to 0 over the course of 1 or 2 seconds. You can achieve really interesting effects.
What about UX?
With great tools comes the great responsibility for end-user and UX in general. Using different (radial, spiral…) layouts as a parts of your user interface certainly makes sense in specific scenarios. Many data visualization and infographics ideas are coming to my mind right now. But be sure to avoid using the PathListBox just to show-off that you can do it without sincerely and significantly enriching the user’s experience.
UX is not about controls and certain software features – it is about how your product, application, service communicates and facilitates user’s actions and helps them. Don’t ever let that out of your mind while designing / developing user interfaces.
More to come?
Yes. I plan to write more about PathListBox and LayoutPath objects / controls in Expression Blend 4 and Silverlight 4 to show you more interesting ideas and approaches. If you have some specific questions or suggestions on what would you like to see – let me know.
Let’s keep in touch – You should follow me on Twitter now!