Published: 19 Jul 2010
By: Medusa M

In this article, you will learn how to use shader effects in Silverlight.

Contents [hide]

Introduction to Shader Effects

When Microsoft released its products DirectX 8.0 and Direct3D 8.0 almost 10 years back, developers got an opportunity to create never-before-seen effects. Direct3D 8.0 brought in shader capabilities which made it possible to render custom effects on conventional graphics hardware. A shader is sort of a kernel function, typically executed in parallel for each data element. Pixel shaders are specialized shaders that are executed for each pixel of a bitmap. They are typically used to implement per-pixel effects. In Windows and Web applications, pixel shader effects allow you to add effects such as blurs, pixel brightness, and shadows to rendered objects.

Silverlight developers got lucky when Microsoft introduced shader effects as a new feature with Silverlight 3. It is now very easy to add these effects to any UIElement such as buttons and textboxes. Furthermore, you don't need to do any kind of coding beyond the XAML. Just write the appropriate XAML and you're done.

In Silverlight 3 and 4, there are two popular pixel shader effects available namely, DropShadowEffect and BlurEffect. At a time, only one effect can be applied directly to an element.

You can either use the above built-in effect classes or create your own. To use a built-in effect, you can assign the built-in effect class, such as the DropShadowEffect class to the Effect property of the UIElement class that you want to apply this effect to. Creating a custom shader class is far more complicated and is beyond the scope of this article.

All the relevant classes for shader effects are defined in the System.Windows.Media.Effects namespace. It has following classes that provide shader effects.

Table 1: Classes in the System.Windows.Media.Effects namespace

Class Name

Description

Effect

This class acts as a base class for all bitmap effects.

PixelShader

This class acts as a managed wrapper around a High Level Shader Language (HLSL) pixel shader.

BlurEffect

This class represents a blur effect that you can apply to an object. It sort of simulates a look obtained by seeing through an out-of-focus lens.

DropShadowEffect

This class applies a shadow behind a visual object at a slight offset. The offset is determined by mimicking a casting shadow from an imaginary light source.

ShaderEffect

This class provides a custom bitmap effect by using a PixelShader.

Let's examine the DropShadow Effect using a simple example. The DropShadowEffect has several important properties that determine characteristics of the drop shadow:

Table 2: Properties of the DropShadowEffect

Property Name

Description

Color

Specifies the color of the drop shadow. The default is black.

BlurRadius

Specifies how blurred the shadow is. Typical range is between 0 and 1. The default is 5.

Opacity

Specifies how transparent the shadow is. Typical range is between 0 and 1, where 1 means fully opaque and 0 means fully transparent (not visible). The default is 1.

ShadowDepth

Specifies how much the shadow will be displaced from the object that is casting the shadow. The default is 5.

Direction

Specifies in what direction the shadow is cast from the object. It is an angle between 0 and 360 with 0 starting on the right hand side and moving counter-clockwise around the object. The default is 315.

To start with, let us create a new Silverlight 3 application using Visual Web Developer 2008. If you have worked with Silverlight 2, you will find that the new project window is almost the same with just some minor changes (the template Silverlight Navigation Application is new):

Figure 1: New Project window

New Project window

Rename the default application name as ShaderEffects.

The default XAML page is now called MainPage instead of Page as it used to be called earlier in Silverlight 2.

The default code in this XAML file will be seen as follows:

Observe the new namespaces included in the code. For more information on the same, refer the MSDN library.

Next, add a button control between the StackPanel tags and configure it as shown below:

Finally, add the new pixel effects as follows: (this code is to be added between the <Button></Button> tags.

The final MainPage.xaml will look as follows:

When you finally, run the application, you will see the output as follows:

Figure 2: Output

Output

Similarly, you can use the BlurEffect which is far more easier to use than the previously described effect. For this class, you can just specify the Radius property.

The ouput of this can be seen in Figure 3:

If you check MSDN for shader samples, you would find more effects such as bitmap effects and glow effects. However these are applicable only to WPF and not supported in Silverlight. Yet, by making clever use of the ones that are available in Silverlight, you can still work wonders.

Custom Shaders

HLSL stands for High Level Shading Language. It was originally created for DirectX. Using HLSL, you can create programmable shaders for the Direct3D pipeline. The ShaderEffect class mentioned in Table 1 provides support for HLSL in Silverlight. This will enable you to create custom pixel shaders or tweak WPF's shaders that were earlier unavailable in Silverlight.

Before you actually start working with this class, let us first clear up some bask facts you need to know.

A shader is an algorithm compiled and loaded into the Graphics Processor Unit (GPU). This algorithm is run once, for every pixel in an input image. GPUs are efficient parallel processors hence your algorithm will be executed thousands of pixels at a time.

You need to know the basioc constructs and building blocks of HLSL before you start coding with it.

The step by step procedure to create and use custom shaders is described as follows:

1. Download Walt Ritscher's Shazzam Shader Editing Tool.  Shazzam is a ClickOnce application providing a cool interface to edit and test HSLS shaders.

2. Download the Microsoft DirectX SDK (June 2010) from Microsoft (Link: http://www.microsoft.com/downloads/details.aspx?FamilyID=3021d52b-514e-41d3-ad02-438a3ba730ba&displaylang=en )

3. Install both these softwares.

4. In Shazzam, specify the path for the fxc.exe file (present in Microsoft DirectX SDK ).

5. Create a new shader effect file using File-> New Shader File option in Shazzam.

6. Add relevant code. For example, you could add the following simple code in a shaderfile named CustomEffect:

7. Compile the shader file using Tools->Compile Shader.

8. Create a Silverlight library named EffectLibrary. Delete the default class.

9. Include the compiled "ps" file into your project and set its compile type to "Resource".

10. Copy the C# code generated by Shazzam into a new class file and name it CustomEffect.cs.

11. Ensure that the UriSource in the code is changed as follows:

12. Create a new Silverlight application and add reference to the EffectLibrary dll file.

13. Include the namespace and assembly for the library in the XAML code as shown below:

14. Attach the custom effect class to the element you want in XAML. For example, you can add this effect to a button:

Build and test the application.

Conclusion

This article explored how to use shader effects in Silverlight 3 and also demonstrated how to create custom shaders.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Medusa M

Medusa loves experimenting with technology trends, especially that of Microsoft.

This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


Data-binding Telerik CoverFlow for Silverlight + some Routed Commands goodness read more
Silverlight MVP read more
Compiling pixel shaders for Silverlight read more
Mixing Silverlight and MS ASP.NET AJAX 3.5 in the same web application. read more
Building a Silverlight 3 based RIA Image Magagement System (1) read more
Building a Silverlight 3 based RIA Image Management System - 1 read more
Chromeless WPF Windows with Aero Blur read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development read more
Provide startup parameters to Silverlight with InitParams read more
Silverlight Twitter Client with authentication read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Nice and Simple Explained Article Raghuraman Kanchi 7/19/2010 10:54 AM

Please login to rate or to leave a comment.