Silverlight TV 25: No More Boxes! Exploring the PathListBox

Download this episode

Download Video


In this video, Adam Kinney explains what the PathListBox is and why it is so compelling. Then, he demonstrates several ways of using it in creative examples. The PathListBox is one of the newest features available in Expression Blend, Silverlight 4 and WPF 4. It redefines how users look at lists of data as it breaks the mold of a list "box" and opens the possibilities to use any shape or path. Don't miss this episode and be sure to download Adam's sample code.

Relevant links:

Follow us on Twitter @SilverlightTV or on the web at

Don’t miss the next episode on Thursday May 13th...Exposing SOAP, JSON, and OData Endpoints to RIA Services.



Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image

      Great video!  I think we need a "Greatest Blend 4 Video Ever" in the near future:)  How do you setup a simple transition when clicking the Move button on last example?  Meaning.... how would you add easing to animated between the location of PLB?



    • User profile image

      I can see the pathlistbox being used for gaming and possibily 3D stuff.

    • User profile image

      Very cool - (I'm currently looking at integrating this into

    • User profile image
      Alan Beasley

      Great Stuff guys, I love the PathListBox to bits!!!


      As you have asked on what others have done.

      Checkout my BusyBee animation on CodeProject:

      It uses the PathlistBox, along with some Spirographic Layout Paths created by Ken Johnson.


      Ken's done some amazing work here

      And a perfect compliment for the PathListBox....

    • User profile image

      Perfect!  Thank you very much!

    • User profile image

      I looking at the posibility of using the control in a complex business application that I am developing, this would require manipulating the PathListBox in c# at runtime, but I couldnt find any examples of this anywhere it posible?

    • User profile image
      Thomas Shields

      I could see this being used, like MadLibrarian said, in gaming... suppose you make the items "enemies" that travel around on the path...

    • User profile image

      Exactly! I have a space-invaders-like sample I should share. Smiley

    • User profile image
      Thomas Shields

      Do you mind sharing? that'd be neat to take a peek at, even though i'm more of a web programmer than a game developer... oh yeah, another idea, that i'm using... i'll post the code in a moment, is custom loading, use an ellipse as the path, put a few smaller circles on it, and animate the "start" property to get the classic spinning-ball loading icon...

    • User profile image
      Thomas Shields

      Here's the code...


      <UserControl.Resources> <Storyboard x:Name="LoadingSpin"> <DoubleAnimation Duration="0:0:0.8" To="0.91" Storyboard.TargetProperty="(PathListBox.LayoutPaths)[0].(LayoutPath.Start)" Storyboard.TargetName="pathListBox" d:IsOptimized="True"/> </Storyboard> </UserControl.Resources>



      <StackPanel Orientation="Horizontal" x:Name="loadingSP" Visibility="Collapsed" Margin="0,4,0,0"> <Ellipse x:Name="ellipse" Fill="#FFF4F4F5" HorizontalAlignment="Center" Margin="10,0,0,0" Stroke="Black" Width="21" Height="21" VerticalAlignment="Center"> </Ellipse> <sdk:Label VerticalAlignment="Center" HorizontalAlignment="Center" Content="Loading..." Margin="5,0,0,0" /> </StackPanel> 


       <ec:PathListBox x:Name="pathListBox" HorizontalAlignment="Left" Height="23" Width="23"> <ec:PathListBox.LayoutPaths> <ec:LayoutPath SourceElement="{Binding ElementName=ellipse}" Padding="0" Start="-0.08" /> </ec:PathListBox.LayoutPaths> <Ellipse Fill="Black" Stroke="Black" Height="9.25" Width="9.25" /> <Ellipse Fill="Black" Stroke="Black" Height="9.25" Width="9.25" /> <Ellipse Fill="Black" Stroke="Black" Height="9.25" Width="9.25" /> <Ellipse Fill="Black" Stroke="Black" Height="9.25" Width="9.25" /> <Ellipse Fill="Black" Stroke="Black" Height="9.25" Width="9.25" /> <Ellipse Fill="Black" Stroke="Black" Height="9.25" Width="9.25" /> <Ellipse Fill="Blue" Stroke="Blue" Height="9.25" Width="9.25" /> </ec:PathListBox>


      and then, the Code Behind...

      loadingSP.Visibility = Windows.Visibility.Visible Dim sb As Storyboard = DirectCast(Me.Resources("LoadingSpin"), Storyboard) sb.Begin() sb.RepeatBehavior = RepeatBehavior.Forever


      ...and then of course, you could tweak it...make ball 1 white, ball 2 light light gray, ball 3 light gray, ball 4 gray, ball 5 black, etc. for a more graphically appealing image...i'll give it a try. in the mean time, there it is. Smiley

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.