This is episode 5 in the series, Creating a Hidden Object Game in Silverlight 3.
In this episode, we will add an existing MagnifierOverBehavior to our project to allow the user to get a closer look at areas of the picture.
On the SilverlightShow site, there is an article titled, Behaviors and Triggers in Silverlight 3, by Pencho Popadiyn. The article does a great job showing the base classes for Actions and Behaviors as well as shows some custom Behaviors. One of them is the MagnifierOverBehavior which magnifiers an oval area as you move the mouse around the image:
It does this by setting the Effect property on the AssociatedObject to a custom pixel shader effect.
Go to the Behaviors and Triggers in Silverlight 3 and download the source. Open Visual Studio and under the Interactivity folder create a folder called MagnifierOverBehavior. Into that folder copy the following files from the Behaviors and ShaderEffectsLibrary projects:
- MagnifierOverBehavior.cs
- EffectLibrary.cs
- Magnifier.cs
- Magnifier.fx
- Magnifier.ps
- ShaderEffectBase.cs
Include the files into your project.
I have spent little time researching effects (classes derived from System.Windows.Media.Effects.Effect), but here is an introduction. Silverlight 3 ships with two concrete effects (BlurEffect & DropShadowEffect) and one abstract effect (ShaderEffect). Any class that derives from UIElement has a single Effect property that can be set. To apply multiple effects, you need to use a hierarchy of UIElement-derived objects assigning the Effect property on different objects to get a composite effect. The pixel shader effect is software rendered in Silverlight and hardware rendered in WPF.
In our case, the Magnifier.cs file contains the Magnifier class that derives from ShaderEffectBase which derives from ShaderEffect which derives from Effect. A good article is Pixel Effects in Silverlight 3. The next file to look at is Magnifier.fx which contains code in High Level Shading Language (HLSL). The important thing to know is that the fx file must be compiled into a ps file. Since we already have Magnifier.ps then we don’t have to worry about it.
More details on HLSL, can be found at the following links:
- Silverlight Slide Show (using Pixel Shader effects)
- MSDN DirectX SDK – HLSL
- Wikipedia – High Level Shader Language
- Compiling pixel shaders for Silverlight
The EffectLibrary.cs file contains helper method, MakePackUri, which is used in line 42 of Magnifer.cs. We need to change the string to identify the correct location in our project of the pixel shader file. Change “Source/Magnifier.ps” to “Interactivity/MagnifierOverBehavior/Magnifier.ps” since the ps file resides in the MagnifierOverBehavior project folder under the Interactivty folder.
Compile and then open the solution in Blend 3.
We want the magnifier to show when over the main office picture. But if we attach the behavior to the image, then magnification will turn off when we mouse over one of the path objects. To solve this problem, we will group the office image and all paths into a canvas object which we will name magnifierCanvas. Now drag the MagnifierOverBehavior from the Assets panel to associate it with magnifierCanvas:
Run the game and now you will see that when mouse is over the image it shows a magnifier. You can click when in magnification mode and the items will be removed from the list:
We don’t want to always be in magnification mode, we need a way to toggle the magnifier on or off. We will tackle that in the next episode as we create an action that is able to set a property on an action or behavior that is associated to an object.
