My Silverlight Blog : silverlight 2 beta 2

WebClient and LINQ Demo

Tim Rule — Mon, 30 Jun 2008 00:29:00 GMT

This sample illustrates a simple usage of the WebClient and a LINQ query. The WebClient makes requests to an RSS feed from Adobe's kuler API which contains color themes defined by kuler users. The themes are then used to colorize an illustration. Silverlight has a SyndicationFeed Class which is designed to work with feeds. This demo however, utilizes the WebClient to show how a xml request can be queried by LINQ.

Select various color themes in the demo below to colorize the picture.

The WebClient makes a URI request to the RSS service. The result is handled by a DownloadStringCompleted handler.

The LINQ builds and array of objects of an inferred type. There is also a swatches array object that is built from a LINQ sub query.

I've added an AnimateColor method to the Animate class used in previous blog posts. The method builds a ColorAnimationUsingKeyFrames animation with with a start and finish SplineColorKeyFrame to support weighted animations.

To make this sample image I used Microsoft Expression Designer. First I drew a simple solid color illustration. I then made a compound path with the similar colored objects. Making the compound path puts the grouped shapes into one path. This means the entire image is defined as just 5 Path elements when exported to XAML.

Windowing Demo for Silverlight 2 Beta

Tim Rule — Thu, 22 May 2008 21:50:00 GMT

Click on the "Toggle Full Screen" to test this example. "Tile Windows" will layout thumbnails of the windows and clicking on a thumbnail will restore the windows.

For this demo a FloatingWindow class has been created which inherits from UserControl. The class has a XAML page and codebehind file rather than the class file and a control template of FrameworkElement inherited controls. This method might be a useful for a multi document interface or XAML pages that are pulled in at runtime.

Scale 9 Image for Silverlight

Tim Rule — Tue, 13 May 2008 03:15:00 GMT

A scale 9 image divides an image into 9 regions which each scale differently when an image is scaled. Click on the "Toggle Full Screen" to try the example. Drag the white square with a red border to resize the shape.

Take the following bitmap for example:

By defining a center Rectangle there is enough information for a smarter scaling of the image. In the case of scale 9 the corners will not scale when the image is resized. The edges will scale parallel to their orientation. The center will scale in both direction.

This type of image construct can be useful for creating rich bitmap graphics for the backgrounds of sizable containers.

Here is a sample usage of the control. The ImageSize is the "Width,Height" of the source image and the CenterRect defines the grow region of the control.

The control is composed of a Grid with a Canvas in each cell of the Grid. Each Canvas contains an Image which has a Clip property as well as a TranslateTransform and a ScaleTransform. All these values are adjusted programmatically when a resize occurs to the control.

Spline Based Animation Helper

Tim Rule — Sat, 03 May 2008 05:04:00 GMT

This code sample demonstrates an animation helper class to wrap up the code needed to animate a FrameworkElement's properties. This will work if the property is a double as well all of the object's transform properties. User defined dependency properties do not appear to be animatable in this beta 1 release via the Animation class.

Below is the sample usage of the animation helper methods for a double animation and a transform animation. The implementation of the AnimateTransform method is more complex than AnimateDouble because in order to animate a transform value a default transform needs to present which requires more pre-animation work.

One overload of the methods has a parameter for an animation complete EventHandler. This is useful for simple sequencing of animations.

I'm calling this spline based because the easing is adjusted by changing the animation spline control points. An alternative would be to use key frame animation which passes the start value, end value, and current time into an easing function at every keyframe. CodePlex has a good example of such approach for Silverlight.

These methods get things moving around the screen but would need a lot more functionality to be useful in an application.