Introduction
Since I have started developing Silverlight applications, I have had an interest in creating a richer, more dynamic user experience. After-all, the promise of a Flash-beating platform where I can write code in C# allows the mind to wander...
I cannot take credit for the idea, it is detailed in this article by Jose Fajardo. Please read it as it provides a good understanding of what is being attempted with this sample. The original author did NOT provide any source code, just some screenshots. I did my best to recreate the effect and to improve on it in some places.
This article will be fairly short, I can make it long and tedious by including a reference to each and every file for the total of 9 files that we have. I'd rather just let you download the sample and run it. I have some screenshots included for this article, and descriptions of basic concepts.
Background
For the background, I chose a simple radial design. There is an XAML storyboard included to change the main background colour between the 6 colours of the South African flag. This is in support for the World Cup 2010 which is currently ongoing in South Africa.
Shape Layers
To create the effect described by Jose Fajardo, we have three layers (Canvas's) on top of which we draw the shapes. Each layer has a progressively more transparent and smaller shape that is displayed. As with the animation, it is also progressively slower in its animation to create a more fluid feeling when you move your mouse.
The shapes are simple XAML Paths, below are some examples of basic shapes. Shapes inherit from ShapeBase, which includes standard methods to handle transformations such as scale and rotation. This is to allow the background to dynamically rotate and size each shape as it is added to the layer. If we did not allow for this, we would end up having all of the shapes aligned North-South and the same size. If all of the shapes were the same size, there would be no perspective in the presentation. If all of the shapes were aligned North-South, it would be pretty boring.
Controls Layer
On top of the Background layer, and all of the Shape layers is the Controls Layer. This layer contains the visual elements required on the screen, and is also animated. The animation is the least responsive of all of the layers so that controls don't simply jump out from under the users' mouse when they reach for it.
Layout
The Background and Shape layers are displayed in a region that is 2520 pixels wide and 1680 high. This is to enable a visual layout for High Definition (HD). I know HD is only 1920x1080, but I added a margin of 300 to the top, bottom, left and right sides of the screen to enable a much larger display, and a continuous feel to the application even at HD resolution.
The Controls Layer is displayed in a region that is slightly smaller than the visual window on the Client to prevent any controls from slipping out of reach off the side of the screen.
Changes and Modifications
I have changed some of the ways in which the original author implemented his system, one of them is that I created a ShapeBase class that all shapes have to inherit from. This allows for us to dynamically change the Shapes that are rendered by changing a property, instead of having to actually create new pages for each Shape.
All of the changes were to create a more reusable set of code so that I can use this concept for Active Dynamic Backgrounds for the Genesis Smart Client Framework v2.0 (Project Ruby).
Updates
- 11 June 2010 - Published original article
