Here is a link to the presentation video in WMV format.

If you like you can see all the episodes and follow along with the tutorial.

In the last few posts we have been working on the magnifier feature of the game which we will finish in this episode.

Please review the following posts:

• Episode 5 – Add a Magnifier Behavior
• Base Classes for Custom Behaviors
• Creating an Action to set Properties on Actions & Behaviors
• Episode 6 – Create a CheckBox from an Image

First we will add in the following files into the ClutteredCube project:

• Interactivity folder (from Base Classes for Custom Behaviors)
  • BaseBehavior.cs
  • BaseBehaviorT.cs
• Interactivity\SetInteractionPropertyAction folder (from Creating an Action to set Properties on Actions & Behaviors)
  • ConverterHelper.cs
  • SetInteractionPropertyAction.cs

The first thing we want to do is to change MagnifierOverBehavior so that it inherits from our custom behavior base class thus inheriting the IsEnabled property:

public class MagnifierOverBehavior : BaseBehavior<FrameworkElement>

The only other change we need to make this behavior is not set the Effect property on MouseEnter but instead in MouseMove based on the value of the IsEnabled property:

private void AssociatedObject_MouseEnter( object sender, MouseEventArgs e )
{
  this.AssociatedObject.MouseMove += new MouseEventHandler( AssociatedObject_MouseMove );
  //this.AssociatedObject.Effect = this.magnifier;
}

private void AssociatedObject_MouseMove( object sender, MouseEventArgs e )
{
  if (IsEnabled)
  {
    if (this.AssociatedObject.Effect != this.magnifier)
    {
      this.AssociatedObject.Effect = this.magnifier;
    }
    ...
  }
}

In Blend, open the MainPage and select the MagnifierOverBehavior in the Object tree under magnifierCanvas. Name the behavior magnifierBehavior and set IsEnabled to false:

From the Assets tab drag two instances of SetInteractionPropertyAction onto the CheckBox magnifier control:

On the first one, set the properties as follows:

• EventName: Checked
• TargetName: magnifierCanvas
• ObjectName: magnifierBehavior
• PropertyName: IsEnabled
• Value: true

Set the second the same as the first, except:

• EventName: Unchecked
• Value: false

Make sure that the CheckBox control IsChecked property is false to match the InEnabled value of false for magniferBehavior.

Run the game and verify that magnification is only turned on when the CheckBox is checked.

Let’s do one more thing to finish this episode. Notice that magnifier.png has a white background behind the glass part of the magnifying glass. The image should be on top of something white like a notepad. Import the notepad image and drop it at the bottom of LayoutRoot.

Position it how you want it and move the magnifier CheckBox on top of it.

Source Code

Demo

There are many features to add so I will keep the next episode contents a surprise.

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.