Silverlight scrollbar component: Updated with MouseWheel Support

Posted on September 26, 2007
Filed Under 1.0 Javascript, Components | Leave a Comment


Here is an updated version of the scrollbar component I released earlier but this new version has Mouse Wheel Support:

Example, Source.

Thanks to Adomas Paltanavičius for the Javascript that handles the Mouse Wheel events!

Silverlight with some Flickr

Posted on September 25, 2007
Filed Under 1.0 Javascript, Web Service | Leave a Comment


Here’s a quick example of how to call a method from the Flickr API and display some goodies in Silverlight. This grabs the 100 most interesting photos…

flickr1 - thumbnails: Example, Source

Next uses a larger canvas, 1400×1000, so beware puny monitors/weak video cards!

flick2 - medium size images :  Example, Source

Reposition/Resize Content on Browser resize

Posted on September 24, 2007
Filed Under 1.0 Javascript | Leave a Comment


Resize the browser and the content gets repositioned accordingly.

Example, Source

Resize the browser and the content gets scaled accordingly.

Example, Source

Silverlight Media Viewer

Posted on September 21, 2007
Filed Under 1.0 Javascript, Application | Leave a Comment


This sample application incorporates some of the previous examples (scrollbars, image viewers, etc) into a working Silverlight app. The Media Viewer includes a video player, an image viewer and an RSS reader pulling stories from Yahoo News.

Media Viewer - Example, Source

We’ve also developed a nice looking portal for these examples at http://www.vectorform.com/silverlight/

Silverlight Flyout Navigation

Posted on September 18, 2007
Filed Under 1.0 Javascript, User Interface | Leave a Comment


This example leans a little more towards traditional web site navigation with the tried and true flyout menu. I didn’t really have a need to make one of these but I thought it might come in handy in the future. I’ll also have to write an N-level version but I’ll put that off til later as the need for that rarley seems come up any more. 3 versions including source.

Flyout nav, hide/show - Example, Source

Flyout nav, fade in/out - Example, Source

Flyout nav, animate up/down - Example, Source

Silverlight Tile Navigation

Posted on September 17, 2007
Filed Under 1.0 Javascript, User Interface | Leave a Comment


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 on September 13, 2007
Filed Under 1.0 Javascript, Application | Leave a Comment


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

Silverlight 1.0 Slideshow

Posted on September 12, 2007
Filed Under 1.0 Javascript, Application | Leave a Comment


This is a simple slideshow for viewing a single image at a time. And since reflections are all the rage, I threw those in there just for some style. Here are 3 examples showing some variation in functionality:

Slideshow with a fixed size: Example, Source

Slideshow that scales with the browser window: Example, Source

Slideshow that has autoplay and Fullscreen mode: Example, Source

Click Screen title to launch Fullscreen and autoplay (new image every 3 seconds). Click an arrow to stop autoplay. Click Screen title again to exit Fullscreen or just hit Esc.

Next up: Image viewers and nav bars.

Silverlight 1.0 is official

Posted on September 6, 2007
Filed Under News | Leave a Comment


We’ve been playing around with WPF/e Silverlight since the December CTP release but now thats its official with the recent 1.0 release we thought we’d start to throw out some components/examples. The first will be a scrollbar component. It’s supports dynamic content, horizontal/vertical layouts, and animated scrolling, along with other customized parameters such as position and size. Here are a few examples with source code:

Simple Vertical Scrollbar: Example, Source

Vertical Scrollbar with extras (scroller size based on content length and fading text): Example, Source

Horizontal Scroller: Example, Source


Coming up next will be a simple slideshow component, so stay tuned!

Recently


Categories


Archives