PathListBox Adventures – radial layout

RadialPanel

The PathListBox ROCKS, if you have not heard of this control before then checkout Christians blog for more details and also his session at mix 10. The PathListBox solves some of the tricky issues related to creating custom panels for a ListBox or ItemsControl. Previously when we need custom layout of visual elements inside of these controls we would typically create a custom Panel and crank C# code and some positioning logic to layout the elements as we needed. However, with the introduction of the PathListBox we nolonger have to resort to building a panel and thus lowers the barrier to entry for designers who want to create custom layouts without having to be reliant on a developer to build the panel.

To get going with the PathListBox I wanted to create an simple Silverlight app which pulled back some results from digg, this is something which I have done in the past to illustrate the basics of MVVM in my session from PDC. While on the topic of MVVM its great to see that we now have an MVVM template inside of Blend that we can use. In this post I am not going to talk about the MVVM templates as I have only started out with them and so to give a comparison would not be justifiable at this stage, but I will posting an article when I have it straighten out in my head.

So for this first adventure I created a new MVVM Silverlight application and added a Model and a Service folder. As we already have the code for the digg service and the model created I copied these classes and moved them into their respective folders in the project. Open up the VM that has been added into the project and we can see that it implements INPC. The other thing to notice is that the constructor in parameter less, which is unlike my VM’s where I would normally inject an interface. So for the purposes of this example i am going to new up the interface inside of the constructor.

Ok so there are 3 steps that we need to perform in order to recreate the radial panel visual layout that is illustrated above. First we need to create our path on the design surface and then add the PathListBox to the design surface and associate the path with the PathListBox. As with a regular ItemsControl or ListBox we need to bind it to a list of items which in this case is our collection of FeedItems. Blend 4 Beta does quite alot of work for free, you will notice it has created the DataTemplate, ItemContainerStyle and ItemPanelTemplate which is rather nice. So here we start our 3 Steps and each step is associated with the templates and style.

First select the DataTemplate of the PathListBox either from the crumb bar or from right clicking in the objects panel. What we need to do here is add a ChangePropertyAction which fires when we LeftMouseButtonDown on to the DataTemplate so that we can set a flag on the data bound object so that it gets removed from the current list and added to second list. Once we have added this we need to change the RotateTransform on the StackPanel to 90.

PathListBoxDatatemplateChangePropertyAction

Navigate back to the PathListBox and this time we want to edit the orientation on the items on the path so that they are OrientToPath and check the Wrap Items checkbox.

PathListBoxSettings

The second step is to move into our ItemContainerStyle for the PathListBox and change the VSM states so that we have a nice transition for the items when they are loaded and unloaded. With the release of Blend 4 Beta a new set of states have been added to the ListBoxItem. PathListBoxItem subclasses ListBoxItem and so we have the ability to modify the transitions for the BeforeLoaded and AfterLoaded states. For these I

PathListBoxStyleLayoutStates

simply changed the Opacity on the root element so that we can have a simple fade in type transition. Next we need to change the length of the transition in this case to 0.3 seconds, and change the easing function to your desired choice. The other changes I made here was to enable the Fluid Layout and turned on the design time layout transitions so that you can see your transitions during design time. Navigate back to the PathListBox.

The final piece to the puzzle is to change the ItemPanelTemplate. Edit the template either via the assets panel or the crumb bar. Here we are looking to add  the FluidMoveBehavior on to our PathPanel which will be responsible for providing the animation effect for moving items between the two PathListBox’s.

PathListBoxItemsPanelTemplateFluidMoveBehavior The important things to note here include; we have selected the Children option from the AppliesTo dropdown as we want this particular FluidMoveBehavior to effect all the items in the ListBox; I changed the duration and also the easing functions that I wanted to use; I also selected the DataContext option from the Tag dropdown as I want to capture the data object associated with the item that is being animated. Navigate back to the PathListBox……

And we are done.

3 simple steps for you to add a radial panel layout into your project.

  1. Change the data template so that it can handle a user interaction
  2. Change the ItemContainerStyle BeforeLoaded and AfterLoaded States
  3. Change the ItemPanelTemplate by adding in the FluidMoveBehavior

We also used ChangePropertyAction to manipulate the data in our collections exposed by the VM, and  we  used the FluidMoveBehavior to animate selected items from one PathListBox to another. The ability to do this without having to write any C# is a great step forwards, it does have some consequences but the advantages from my prospective outweigh the disadvantages.

The next thing that I want to do is animate each individual PathListBoxItem depending on where they are on the Path associated with the PathListBox.

All the code for this example you can find on my SkyDrive Folder.

<iframe title =”Preview” scrolling=”no” marginheight=”0″ marginwidth=”0″ frameborder=”0″ style=”width:98px;height:115px;padding:0;background-color:#fcfcfc;” src=”http://cid-118ee1873690fc1d.skydrive.live.com/embedicon.aspx/Silverlight4/MvvmApplication3.zip”></iframe>

Be Sociable, Share!

Tags: ,

8 Responses to “PathListBox Adventures – radial layout”

  1. [...] This post was mentioned on Twitter by Richard Griffin, Richard Griffin. Richard Griffin said: blogged about PathListBox http://bit.ly/c8QYYe love to hear your comments, not fully polished visuals but will give you an idea [...]

  2. Hi, I was wondering if you know of any way to make the pathlistbox panel scollable? (say the path was a straight line and you bind it to a datasource of more than a 1000 rows but set the pathlistbox to show a max of 10 items. If you set it to auto it will squash all 1000 rows into view)

    Thanks

    Adam Whittaker
  3. Hi Adam,
    One of the problems with displaying a 1000 items is that you a going to see a perf hit as the PathPanel is not virtualised. I have not fully tested to see what the acceptable number would be but more than a 100 items and i think that you will start to see an issue, but it also depends on how heavy the objects are in the visual tree.

    So you would need to do some sort of pagination. I am wondering if you could build a behavior that you can attach to a pathlistboxitem so that when it reached a particular point along the path while being animated the behavior loaded in the next page of data and removed the previous page.

    Are you familiar with building behaviors ?

    rich
  4. Thanks for the info Rich.
    I built a paginated observablecollection and set the item source to that i couldnt get the smooth scroll affect that i was after.
    I thought maybe i could just add the fluidmove behaviour to the itemspanel and then do everything in vb with the observable collection but it turns out that the items that are leaving the path are animated along the path (nicely) but the newly added items (brought in by the paging) sort of fly into the path from the top right (sort of a strange effect).

    I am not familiar with building behavours at all so if you have any ideas it would be appreciated.

    Thanks

    Adam Whittaker
  5. it whould be nice have a link to that SkyDrive folder .

    xusan
  6. Hi Rich,

    That’s awesome! Thanks for sharing it!

    Could you share the link to your SkyDrive folder? It seems that you missed to put it.

    Thank you!

    Emil

    Emil Stoychev
  7. Hello Rich,
    great read! One question though: I cannot seem to find the Visual States for Layout (BeforeLoaded, etc.), but all the others like Validation or Selection States are there. Do you have any Idea why these might be missing?

    Thanks and best regards
    Gope

    Gope
  8. Think I found it: I was doing WPF and though the PathListBox works it does not support the Before- /AfterLoad stuff. Sad… or is there any way to achieve this behaviour?

    Thanks

    Gope

Leave a Reply