The Vectorblog Has Moved!

The Official Vectorform Blog has moved to its new home at vectorform.com/blog

Please update your bookmarks and your rss feeds.

Silverlight scrollbar component: Updated for easy implementation

Another update to the scrollbar component. Just made some tweaks to make it easier to implement/instantiate. It’s getting closer to more of an OOP style but it’s not all the way there yet. Now all you have to do is call/instantiate the scroller like this:

myScrollPanel=new createScrollablePanel(”sp1″,10,10,100,160,”V”,the_text,”#FFF”,9,null,”#0000FF”)

with the following parameters…

unique name, xpos, ypos, width, height, direction, text, [text_color, text_size, text_font, bg_color]

bracketed items are optional, I haven’t converted the horizontal portion yet so only “V” (vertical) is available

This makes it way easier when you have multiple scrollers on the page. The mouse wheel support also got carried over and works when the mouse is over the particular textfield you want to wheel thru. There are now properties in the constructor to control other options like color, spacing, etc.

Example, Source.

Silverlight scrollbar component: Updated with MouseWheel Support

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

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

Silverlight Media Viewer

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

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

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

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

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

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!