Hidden Object: Episode 7 – Use an Action to Toggle the Magnifier Behavior

This is episode 7 of Creating a Hidden Object Game is Silverlight 3.

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.