Silverlight Tile Navigation
Posted by Dan Dobbs – September 17, 2007
Im gonna try to do the next couple of examples relating to navagtion elements. Ill start off with this one which uses image tiles for buttons. On rollover they animate and scale to give the illusion of depth. Reflections thrown in of course.
The tiles are generated and placed by code so the xaml file will be relatively empty.
Horizontal Tile Nav – Example, Source
Horizontal Tile Nav with stagered depths – Example, Source
Silverlight Image Viewer
Posted by Dan Dobbs – September 13, 2007
This one was a little tricky because I have the images lined up horizontally. Since the images are different sizes and ratios, to place them correctly you need to know the width of the image, but Silverlight doesn’t know the width and height of the loaded image until slightly after the image fires its Loaded event. At first I was just setting a timeout of 150ms and that seemed to work, until I moved the files to an actual remote server, then it worked sometimes. So then I ended up doing a setInterval to check whether each image has a width and height>0. That did the trick. I could then position each one accordingly. Here are two versions. 1st one loads images individually, 2nd one pulls images from a zip file and has animation for both enlarging and shrinking images. Drag left and right (or throw) to scroll through the images. Click (or drag and drop) to enlarge.
Load Individual Files – Example, Source
Load From Zip – Example, Source
Also, here is a Mac type slideshow that auto plays with a Ken Burns effect (click for fullscreen). Although this seems to only run nicely on faster machines. I used images at 800×600 to reduce the choppiness but it still seems to lag on my P4 2.8Ghz PC with 2Gb Ram. But it does run nice and silky though on my MacBook Pro 2Ghz with 2Gb ram. I guess the Core 2 Duo proc helps move those big images around.
Mac type slideshow - Example, Source
« go back