Join Walt Ritscher for an in-depth discussion in this video Simplifying path layout with the PathListBox, part of Silverlight 4 New Features.
The Path list box is a new control included in Expression Blend 4 that builds on the original functionality of the ListBox. It excels at displaying multiple items in a complex, path-based layout. The PathListBox arranges items based on a defined path called a layout path. You can define a layout path by drawing a path with the pen tool, adding a rectangle, ellipse, or line from the Tools panel, or just by using one of the new shapes in the Assets panel. Let me show you have they work. I'm going to go to Expression Blend and open up a project called ArrangingItemsWithPathListBox, and I'm going to open up MainPage.xaml.
I'm going to draw a path, and I'm going to use the ellipse tool. So I'll click the ellipse and then come over here and I hold on the shift key and draw the ellipse. And I'll change the stroke thickness so you can see it there. Then I'm going to convert this into a PathListBox. I'll right-click and choose Path > Make Layout Path. If you look over here in my Objects in Timeline, you will see that I now have an ellipse. I also have a PathListBox inside my grid.
The PathListBox functions like a regular ListBox. It has an item source. You can bind it to any valid data source, populate the list box with any data, template the data to do all that stuff, but the key difference is when it lays out the item, it's going to lay them out around the edge of the circle. I'm just going to use some of the shapes in the Assets page. I'm going to go in here, and I'm going to find the star shape. I am going to drag that over and drop into my PathListBox. All right, now I just changed the order. The ellipse is now behind the PathListBox, so it is a little bit easier to see.
Next I'm going to go grab a ring and drop that in my PathListBox, and then I'll drag another little star and so on. And what you see is it's arranging those around the outside edge. So it's very simple to use. Again, keep this in mind. It uses any data that a normal ListBox does, but when it arranges them on the screen it uses whatever path. Now I used a circular path here, but naturally I could also do things like a complex path. So let me show what I mean here. I'll delete the ellipse. I'll delete PathListBox.
I'll come and grab my pen tool, and I'll draw a curved line on the screen. Then I'll select it, right-click, choose Make Layout Path, and this time I'm going to use the text block, so I'll select my path, and I'll move this up so it's a little easier to see, and then I'll double-click. Oops, I missed. I needed to have my PathListBox selected. I'll delete these two items. Do it again.
Select my PathListBox and then double- click on the text block over here, and as you can see, it's moving those textblocks around the line. I can control how they are angled on the line. What I need to do is click the PathListBox and then go to my property section and find the section on layout paths, and down here I can choose how the items are distributed on the path, how much padding between the items, how they are orientated. Now the items are tilted based on where they are inside the path.
This makes it a little bit easier if I go to the path itself and change its stroke thickness. See that? Let me go back to the path list, and I can also choose where they start, and how much they span of the list and so on. It's a great, fun way of arranging items around your screen. I'm really excited about this new control. It has become a staple in my layout tools, and I encourage you to give it a try.
Recommended prerequisite: Silverlight 3 Essential Training.
- Alerting users with the Notifications window
- Creating elevated trust applications
- Signing with XAP
- Simplifying binding with the property marker
- Analyzing data with PivotViewer
- Localizing content
- Working with design-time data in Expression Blend
- Adding interactivity with Behaviors