Silverlight TV 25: No More Boxes! Exploring the PathListBox

Sign in to queue

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

Download

Download this episode

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

Add Your 2 Cents