Silverlight TV 25: No More Boxes! Exploring the PathListBox

Download this episode

Download Video

Description

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 http://silverlight.tv/

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

Embed

Format

Available formats for this video:

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

    The Discussion

    • User profile image
      shaggygi

      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?

       

      Thanks

    • User profile image
      MadLibrarian

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

    • User profile image
      Ian2

      Very cool - (I'm currently looking at integrating this into http://FromTheMalverns.com)

    • 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: http://www.codeproject.com/KB/expression/BusyBee.aspx

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

       

      Ken's done some amazing work here http://www.codeproject.com/KB/WPF/SpirographShapes.aspx

      And a perfect compliment for the PathListBox....

    • User profile image
      tburger

      Perfect!  Thank you very much!

    • User profile image
      lexius

      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 ...is 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
      jopapa

      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 control...so, 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...

      XAML:

      <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 continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.