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

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.

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

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.