Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Silverlight 1.1 TreeView and Animated Wrap Panel Controls with Source Code

Pete Brown - 01 November 2007

Over the past couple nights, I've had a few hours to work on a wallpaper viewer for my site.

As part of that development, I need a panel that I can use to display image thumbnails. For grins, I also decided to build a very simple treeview. While each is a partially complete (and non-optimized) work-in-progress, I think the code has reached a state where it could be useful to others.

The treeview has the ability to display any arbitrary FrameworkElement (such as your own usercontrol), or straight text, on a node-by-node basis. The code in the treeview shows, among other things, a custom observable collection.

The wrap panel uses a simple animation to shuffle around various FrameworkElements (a custom image button, in this case). Currently only the horizontal works, but vertical is easy enough to implement. The code for the wrap panel shows how to create an observable collection that wraps a canvas's Children collection, as well as how to use some basic extension methods. The images are included in the download (they are thumbnails from my wallpaper site) and are currently hard-coded, so you can run the whole thing from your own machine. Resize the browser window to see the panel in action.

You can view the live demo here.

Neither control currently support scrolling. That's going to come soon, if Microsoft doesn't beat me to the punch :)

More design/construction details coming soon. In the mean time, please feel free to download the work-in-progress code here.

[ NOTE: Everything here is based on the Silverlight 1.1 Alpha September Refresh. If you come to this blog post after subsequent releases of Silverlight, the demo will likely not work, as I expect significant changes in the control model. Take a look at the latest blog entries to see what updates or suggestions I have ]

[Update: New Source code and updates available here.]

 

   
posted by Pete Brown on Thursday, November 1, 2007
filed under:    

14 comments for “Silverlight 1.1 TreeView and Animated Wrap Panel Controls with Source Code”

  7. Gravatar of MrCypromReply
    MrCypromsays:
    Wednesday, November 14, 2007 at 4:34:52 PM
    Hi,

    I am trying to use your WrapPanel with my Controls but it fails. With debug I can see that in the UpdateLayout funtion when the storyboard begins the iteration stops. So I think it's a problem with it.
    Does my Controls need to be specific for being used with your WrapPAnel ?
    Regards.
  8. Gravatar of Pete BrownReply
    Pete Brownsays:
    Wednesday, November 14, 2007 at 4:48:09 PM
    Since I am creating an animation in xaml (the only way to do it in code right now), any controls you add must have a name. If the control doesn't have a name set with testEllipse.SetValue(FrameworkElement.NameProperty, "testEllipse"); or similar, you will get a Catastrophic Failure.

    I'm going to try to make some updates to the control set later today and post those.

    FWIW, I tested it by putting this code in Page_Load between the foreach and the thumbnails.ResumeLayout() call:

    // this is there just to show that you can add any other control to this as well
    Ellipse testEllipse = new Ellipse();
    testEllipse.Width = 200;
    testEllipse.Height = 200;
    testEllipse.StrokeThickness = 5;
    testEllipse.Stroke = new SolidColorBrush(Colors.White);
    testEllipse.SetValue(FrameworkElement.NameProperty, "testEllipse");
    thumbnails.Children.Add(testEllipse);
  12. Gravatar of MichaelReply
    Michaelsays:
    Monday, March 31, 2008 at 6:40:37 PM
    Peter,
    Could you please confirm whether VisualCollection is missing in Silverlight V2 beta ?

    Can't compile
    public class PanelChildrenCollection : IList<Visual>
    {
    private VisualCollection _associatedCollection;

    Intellisense doesn't show VisualCollection under System.Windows.Media and I failed to reference it anywhere else. If so, any substitute you may think of ?
    TIA
    Michael
  14. Gravatar of Pete BrownReply
    Pete Brownsays:
    Thursday, July 24, 2008 at 11:14:55 AM
    @Azhar

    The code and sample on this page was written for Silverlight 1.1. I have not yet updated it for Silverlight 2 Beta 2 or RTM, so it won't run on current bits, and the source code will be very different.

    Pete

Comment on this Post

Remember me

7 trackbacks for “Silverlight 1.1 TreeView and Animated Wrap Panel Controls with Source Code”

  1. Public Sector Developer Weblogsays:
    Thursday, November 1, 2007 at 9:14:01 AM
    If you haven't been paying attention to Pete Brown's blog, then you are missing out. Pete continues to
  2. Noticias externassays:
    Thursday, November 1, 2007 at 9:43:18 AM
    If you haven't been paying attention to Pete Brown's blog, then you are missing out. Pete continues
  4. Christopher Steensays:
    Friday, November 2, 2007 at 4:41:07 AM
    ASP.NET Dangers of the new ASP.NET MVC framework [Via: Mads Kristensen ] Link Blogs Links from the...
  5. WynApsesays:
    Friday, November 2, 2007 at 9:40:00 AM
    Silverlight Cream for November 2, 2007 -- #116
  6. Community Blogssays:
    Friday, November 2, 2007 at 1:09:34 PM
    I've been jammed up the last couple days, so this Cream is only ones submitted to me, later I'll
  7. POKE 53280,0: Pete Brown's Blogsays:
    Wednesday, November 14, 2007 at 5:19:38 PM
    I made some updates to the panel and treeview controls described in this post . Changed the name from