Exercise 1 – Pixel Shaders and Implicit Styles
During this exercise, we will apply implicit styles, a new feature in Silverlight 4 which allows a style to be applied to all elements of matching type. Following this, we will apply pixel shader effects to an image and animate various properties of these effects. These custom effects include Ripple, Invert, Swirl and Pixelate. Finally we will apply a perspective transform to the canvas and animate it to yield a 3D planar effect.
Task 1 - Implicit Styles
In Silverlight 4 you can create Implicit Styles in addition to Explicit Styles. This new feature allows programmers to override default styles for common and third party controls with their own style, without the need to use explicit keys. In this exercise we will use supplied style and change the default look and feel of the application.
Task 2 - Pixel Shader Effects
Silverlight 3 introduced Pixel Shader Effects, including the ability to add custom effects. Silverlight 3 supports 2 native effects – the blur effect and the drop shadow effect. Every UIElement has an Effect property. An effect outputs a modification of the pixel that is at the same location in the input texture as its destination in the output texture, manipulate color but not position. The Effect class contains an EffectMapping method, which must be overridden by derived methods to return a GeneralTransform that takes a position and returns the post-effect corresponding position.
In order to create a custom effect, use the effects compiler (fxc.exe) from the DirectX SDK to compile a high level shading language (HLSL) .fx file into a .ps file, which is included in the Silverlight project, with its Build Action set to Resource. A .NET class must be created to represent the custom effect, which derives from ShaderEffect and provides a default constructor to initialize the effect.
The WPF Pixel Shader Effects library is available from http://wpffx.codeplex.com/ and can be adapted to work with Silverlight. Pixel Shader Effects are exposed via the System.Windows.Media.Effects namespace.
Open the Shaders solution folder. Note that there are 8 items in the folder: 4 *.ps files and 4 matching class files. These comprise 4 pixel shader effects: InvertColorEffect, RippleEffect, InvertEffect and SwirlEffect.
Pixel Shares in Project Structure
A ShaderEffect class provides a custom bitmap effect using a PixelShader. Each custom Pixel Shader Effect inherits from ShaderEffect and loads a shader model 2 pixel shader. Dependency properties declared in this class are mapped to registers defined in an associated *.ps file. The constructor points to the *.ps file as a relative Uri and creates an instance of the PixelShader. The UpdateShaderValue method notifies the effect that the shader constant or sampler corresponding to the specified dependency property should be updated.
Task 3 - InvertColorEffect
Task 4 - PixelateEffect
Task 5 - SwirlEffect
Task 6 - RippleEffect
Task 7 - Stop Animations
Task 8 - Projection
Silverlight 3 introduced a Projection property on UIElement which can be set to a PlaneProjection, an implementation of a 3D PerspectiveTransform. The UIElement that is projected into this 3D scene is interactive even if projected. Both front and back are interactive. The transforms that PlaneProjection applies to its UIElement are:
In this exercise we will apply plane projection for our application.