Silverlight TV 25: No More Boxes! Exploring the PathListBox

Sign in to queue

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