My Silverlight Blog

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.

InnerGlow Effect For Silverlight 2 Beta 2

Tim Rule — Wed, 30 Apr 2008 08:15:00 GMT

I have taken the project from the previous post and extended the effect class to support an Inner Glow.

The basic difference between the composition of the Inner Glow and the previous effects is that the gradients are reversed and the z index is changed to bring the gradient grid to the foreground.

The Inner Glow uses as Clip mask to conform the glow to the Content shape as shown below.

This effect could use some refinement. Ideally this effect control would support effects such as Inner Glow and Drop Shadow simultaneously.

Drop Shadow Effect for Silverlight 2 Beta 2

Tim Rule — Tue, 22 Apr 2008 00:16:00 GMT

A configurable shadow effect can be achieved for Silverlight 2 Beta 1 with the use of the Grid control and gradient fills. This will work for rectangular and rounded rectangular content. The code is built off of the previous glow effect post.

The ShadowBox like thee GlowBox control is composed of a Canvas containing a Grid which is used to build the glow and a ContentPresenter.

The grid contains 8 rectangles with linear or radial gradients. The gradient stop is adjusted to achieve varying degrees of rounding. The shadow is then offset via a Distance and Angle property.

With the glow the gradients radiate from a base shape equal to that of the content. With the shadow the size of the base shape decreases as the spread increases to simulate the effect of a softer light.

The lastest code for this effect can be found in the InnerGlow Post.

Glow Effect for Silverlight 2 Beta 2

Tim Rule — Fri, 18 Apr 2008 04:21:00 GMT

A configurable glow effect can be achieved for Silverlight 2 Beta 1 with the use of the Grid control and gradient fills. This will achieve the effect for rectangular and rounded rectangular controls.

The GlowBox control is composed of a Canvas containing a Grid which is used to build the glow and a ContentPresenter.

The grid contains 8 rectangles with linear or radial gradients. The gradient stop is adjusted to achieve varying degrees of rounding.

A few things that need to be added :

The gradients need extra stops to allow a smoother alpha tapering.
The RoundAmount property should be gleaned from the CornerRadius of the content in the GlowBox.
The properties should be animatable.

The lastest code for this effect can be found in InnerGlow Post.