You are browsing the archive for Effect.

Hidden Object: Episode 6 – Create a CheckBox from an Image

September 26, 2009 in Hidden Object Game, Silverlight

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

In our last official episode, we added the MagnifierOverBehavior, but now the magnifier is on all the time. To allow the player to turn it on or off, we will create a CheckBox control from an image of a magnifying glass. Creating controls from objects on the artboard is really powerful.

Magnifying glass image

Start Blend and add the image of the magnifying glass to the Images folder then drag an instance of it onto the bottom of LayoutRoot. With the image still selected, right click and select Make Into Control… from the context menu.

Select the CheckBox control from the list, enter the name as MagnifierCheckBoxStyle and define it in the Application. Click OK to create the control and have it open on the artboard.

  • Select the image and set its Stretch to Uniform.
  • Select the ContentPresenter and move it below the image.
  • Select the Grid and set the Height to 70 and the Width to 100.

Now we are going to change the States associated with this CheckBox. In this case the Checked state will show the ContentPresenter while the UnChecked state will set the Opacity to 0%

Click on the States tab and then on the Unchecked state in the CheckStates group. There will be a red dot next to Unchecked indicating that state recording is on. Click on the ContentPresenter and set the Opacity to 0%:


Click on the Unchecked state to turn recording off.

For the MouseOver state, we will add a glow effect using the DropShadowEffect. Click on the MouseOver state in the CommonStates group to turn on recording. Click the Image and set its Effect property to a DropShadowEffect:

I changed the Direction and ShadowDepth to 0 and the Color to Yellow.

Click on the MouseOver state to turn off recording.

Close the style editor and with the styled CheckBox selected, set the Content value to the text: “x2″. You might also want to set the Text size to about 14 pt and change the Foreground color of the text.

Run the application and verify the Checked, Unchecked, and MouseOver states.

The completed style looks like this:

<Style x:Key="MagnifierCheckBoxStyle" TargetType="CheckBox">
<Setter Property="Template">
<ControlTemplate TargetType="CheckBox">
<Grid Height="70" Width="100">
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked"/>
<VisualState x:Name="Indeterminate"/>
<VisualState x:Name="Unchecked">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused"/>
<VisualState x:Name="InvalidFocused"/>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Direction)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFEFFF00"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Normal"/>
<Image x:Name="image" Source="Images/magnifier.png" Margin="0,0,0,19">
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Bottom" Margin="0,0,0,3"/>

Now we have a control to use to toggle the magnification state. In the next episode we will use the behavior base classes, SetInteractionPropertyAction, and this styled CheckBox to complete the magnification feature.

Hidden Object: Episode 5 – Add a Magnifier Behavior

September 18, 2009 in Hidden Object Game, Silverlight

 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
  • 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 then we don’t have to worry about it.

More details on HLSL, can be found at the following links:

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/” to “Interactivity/MagnifierOverBehavior/” 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.