The hint feature can be segmented into three parts:

• Recharging hint button
• Hint overlay image with animation
• HintBehavior to randomly position the hint overlay image

Hint Button

To make the hint button, we will use an image of a laptop, a TextBlock (hintTextBlock), and a ProgressBar (progressBar) wrapped in a Canvas (hintCanvas):

The idea is that the TextBlock will contain the text “HINT” and act as a button to trigger the hint feature. When the TextBlock is clicked, the TextBlock is hidden and the ProgressBar shown. This is accomplished by adding a HintStates group to the main UserControl:

When the HintState is active, the TextBlock is shown and its IsHitTestVisible property is set to true so that it can be clicked. When the RechargeState is active, the TextBlock’s Opacity property is set to 0 and its IsHitTestVisible property is set to false so that it can’t be clicked.

To set the RechargeState, we add a GoToStateAction to the TextBlock:

A storyboard is added to change the value of the ProgressBar to indicate that the hint is recharging.

<Storyboard x:Name="RechargingStoryboard">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="progressBar"
        Storyboard.TargetProperty="(RangeBase.Value)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:10" Value="100"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

In this example, the storyboard will recharge in 10 seconds. For the game, the recharge duration should be somewhere between 30 seconds and 2 minutes.

This storyboard is started using a ControlStoryboardAction on the TextBlock:

The change from RechargeState to HintState is handled by the GoToStateAction and the StoryboardCompletedTrigger waiting on RechargingStoryboard. So as soon as the recharging animation ends, then the Hint button displays again.

Hint Overlay

The hint overlay was created in Expression Design and consists of 10 starbursts or flares set in a circular pattern. After the image is added to the project, drag it onto the LayoutRoot Canvas and locate it “off screen” (Left = 500, Top = -300). Set the ZIndex of the image to 99 so that it will be over any item on the game screen, but always under the cursor image.

When the hint TextBlock is clicked, two storyboards are started. The ShowHintStoryboard changes the opacity from 0% to 80% in 2 seconds and then auto reverses back to 0% over the next 2 seconds. The RotateHintStoryboard uses a RotateTransform to rotate the overlay 360 degrees over 4 seconds.

<Storyboard x:Name="ShowHintStoryboard" AutoReverse="True">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="hintFlareImage"
        Storyboard.TargetProperty="(UIElement.Opacity)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:02" Value="0.8"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Name="RotateHintStoryboard">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="hintFlareImage"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:04" Value="360"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
 

To start the storyboards, use the ControlStoryboardAction with the EventTrigger:

Hint Behavior

The last thing we need to do is figure out where to put the hint overlay image. To do this, we will use a behavior that exposes a ShowHint command as well as a HintItems collection and a HintOverlayName property:

In the same way that the MouseCursorBehavior exposes the CursorName property to allow selection of the cursor, the HintBehavior exposes the HintOverlayName so that we can select the hint overlay image. An EventTrigger causes the ShowHint command to fire when the HINT TextBlock is clicked.

The HintItems collection contains one HintItem object for each item that can have a hint. The HintItem object contains a TargetName property to identify the Path or object representing the item and an X and Y variance for the location of the overlay.

The HintBehavior uses two NameResolver instances (see episode 12). The first NameResolver changes the HintOverlayName into a reference to the overlay image control. The second NameResolver is used once a HintItem is randomly picked to see if the object still exists and if so gets a reference to it. Even though a HintItem exists for all clickable items in the hidden object game, it may no longer exist in the visual tree as it could have been removed by the RemoveElementAction as discussed in episode 4.

When the ShowHint command is executed, the private OnShowHint method is called. This is the heart of the HintBehavior:

private void OnShowHint()
{
  DependencyObject item = null;
 
  if (!this.IsHintOverlayNameSet)
    return;
 
  FrameworkElement hintOverlay = HintOverlay as FrameworkElement;
 
  //mix up the order of item names
  HintItems.Randomize();
 
  for (int index = 0; index < HintItems.Count; index++)
  {
    this.ItemResolver.Name = HintItems[index].TargetName;
    item = this.ItemResolver.Object;
 
    if (item != null)
    {
      double itemX = (double)item.GetValue(Canvas.LeftProperty);
      double itemWidth = (double)item.GetValue(FrameworkElement.ActualWidthProperty);
      double itemY = (double)item.GetValue(Canvas.TopProperty);
      double itemHeight = (double)item.GetValue(FrameworkElement.ActualHeightProperty);
    
      double newX = RandomWithVariance(itemX + (itemWidth / 2) - (hintOverlay.ActualWidth / 2), HintItems[index].OriginXVariance);
      double newY = RandomWithVariance(itemY + (itemHeight / 2) - (hintOverlay.ActualHeight / 2), HintItems[index].OriginYVariance);
 
      hintOverlay.SetValue(Canvas.LeftProperty, newX);
      hintOverlay.SetValue(Canvas.TopProperty, newY);

      break;
    }
  }
}

If the HintOverlayName is not set we exit the method, otherwise we get a reference to it. We then randomize the order of the items in the HintItems list. This is done using an extension method called Randomize(). Since some items named in the list may no longer exist on the Canvas, we do a null check after we access an item in the list and resolve it. If the item exists, then we determine the location of the item with its width and height so that we can center the overlay image over the item. The RandomWithVariance method uses the OriginXVariance and OriginYVariance values set on HintItem to make sure that the overlay image is over the item but that the item is not necessarily exactly centered.

The hint feature of our hidden object game is fairly simple once we break it into its three main components and work on them individually. Stay tuned for the next episode of Creating a Hidden Object Game in Silverlight 3.

Source Code

Demo

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.

The Win screen is shown after all 13 items have been clicked. What we need is an integer counter that subtracts one for each item clicked and when the count gets to zero change the state of the MainPage UserControl to show the screen.

Similar to what we did in the last episode, create a new Canvas called winCanvas and position it to the left of the UserControl on the artboard.

In the States panel, add the WinScreen state to the ScreenStates group:

With recording mode on for the WinScreen state, set the Top and Left properties of winCanvas to 0.

All we need to do is figure out a way to trigger a state change to show this screen.

The solution is a variation of the Global State Behavior sample by Christian Schormann which uses a Singleton object containing a Dictionary to hold values based on a key (or tag).

Let’s go step-by-step through the use of the GlobalCounter classes before we look at any code.

The counter store (GlobalCounterStore) has an empty dictionary keyed using a CounterKey. Some trigger invokes SetGlobalCounterAction which sets the initial values for Value, MinValue, and MaxValue in a dictionary item with a CounterKey of “HiddenItems”. In this case the trigger that sets the values is an EventTrigger on the MainPage UserControl for the Loaded event:

Any time that an entry is changed in the counter store, the Changed event is raised which passes Key, Value, MinValue, and MaxValue. Both the ShowGlobalCounterBehavior and the GlobalCounterChangedTrigger handle this event. Since every instance of the GlobalCounterChangedTrigger & ShowGlobalCounterBehavior handle the Changed event they need to have a CounterKey property to determine if they should take any action for that event. In the case of ShowGlobalCounterBehavior, the associated TextBlock’s Text property is set to Value. For the GlobalCounterChangedTrigger any actions are invoked. In this episode, the GlobalCounterChangedTrigger is not used but is included for completeness.

Now that the counter store has been initialized with values, we can use the IncrementGlobalCounterAction to increment the value. In this case we are incrementing the value by -1 which updates the value in the counter store causing the Changed event to fire which is handled by the ShowGlobalCounterBehavior which sets the text on the TextBlock.

The IncrementGlobalCounterAction is invoked for each Path object clicked until the counter reaches the MinValue:

The Changed event is fired to update the TextBlock, but the MinValueReached event is also fired. This is handled by the GlobalCounterMinReachedTrigger which compares its CounterKey with the Key passed in the event and if they match then the trigger invokes its actions. For this episode, there is a GoToStateAction associated with the UserControl that responds to the GlobalCounterMinReachedTrigger and sets the current state to WinScreen which shows winCanvas.

In cases where you want an incrementing counter instead of a decrementing one, pass a positive value for the IncrementCounterValueBy property of IncrementGlobalCounterAction and use the GlobalCounterMaxReachedTrigger.

The global counter classes can be used for many things including a lives counter, health, shield strength, or to keep track of a player’s score.

Here are a class diagram of the GlobalCounterStore and related classes:

Besides the implementation of the Singleton pattern, the most interesting code can be found in the SaveToStore and IncrementCounter methods of GlobalCounterStore:

internal sealed class GlobalCounterStore
{
    private Dictionary<string, GlobalCounterItem> store;

    internal void SaveToStore(string key, int value, int minValue, int maxValue)
    {
        if (key == null)
            return;
        var item = new GlobalCounterItem() {Value = value, MinValue = minValue, MaxValue = maxValue };

        if (store.ContainsKey(key))
        {
            store[key] = item;
        }
        else
        {
            store.Add(key, item);
        }

        OnChanged(key, item);
    }

    internal void IncrementCounter(string key, int incrementBy)
    {
        if ((key == null) || !store.ContainsKey(key))
            return;

        int newValue = store[key].Value + incrementBy;
        store[key].Value = newValue;

        OnChanged(key, store[key]);

        if (newValue >= store[key].MaxValue)
            OnMaxValueReached(key, store[key]);

        if (newValue <= store[key].MinValue)
            OnMinValueReached(key, store[key]);
    }
}

The SetGlobalCounterAction is a TriggerAction that defines four dependency properties for CounterKey, CounterValue, CounterMinValue, and CounterMaxValue. The Invoke method calls the SaveToStore method on GlobalCounterStore.

The IncrementGlobalCounterAction is a TargetedTriggerAction that defines dependency properties for CounterKey and IncrementCounterValueBy. It’s Invoke method calls the IncrementCounter method on GlobalCounterStore.

The three triggers are very similar in that each defines a CounterKey dependency property and each adds a handler to an event raised by GlobalCounterStore:

In the case of GlobalCounterMinReachedTrigger, the OnAttached method adds a handler for the GlobalCounterStore’s MinValueReached event whereas the handler is removed in the OnDetaching method:

public class GlobalCounterMinReachedTrigger : TriggerBase<DependencyObject>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        GlobalCounterStore.Instance.MinValueReached += Instance_MinValueReached;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        GlobalCounterStore.Instance.MinValueReached -= Instance_MinValueReached;
    }

    void Instance_MinValueReached(object sender, GlobalCounterEventArgs e)
    {
        if (CounterKey == null)
            return;

        if (CounterKey == e.Key)
            this.InvokeActions(e);
    }
}

When the MinValueReached event is raised due to a change in the GlobalCounterStore to any dictionary entry regardless of its key, the passed key (e.Key) is compared to the CounterKey property. If the values match, then the actions for this trigger are invoked.

ShowGlobalCounterBehavior is a behavior that can be attached to a TextBlock control and functions is a similar way as the triggers:

It defines the CounterKey property and handles the Changed event raised by GlobalCounterKey:

public class ShowGlobalCounterBehavior : Behavior<TextBlock>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        GlobalCounterStore.Instance.Changed += Instance_Changed;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        GlobalCounterStore.Instance.Changed -= Instance_Changed;
    }
 
    void Instance_Changed(object sender, GlobalCounterEventArgs e)
    {
        if (CounterKey == e.Key)
        {
            if (e.Value > e.MaxValue)
                AssociatedObject.Text = e.MaxValue.ToString();
            else if (e.Value < e.MinValue)
                AssociatedObject.Text = e.MinValue.ToString();
            else
                AssociatedObject.Text = e.Value.ToString();
        }
    }
}

It is possible to increment the Value in the counter store by more than 1 so I added checks so that the TextBlock will never show values greater than MaxValue or less than MinValue.

Now it is time to use these classes in Blend. Drop an instance of SetGlobalCounterAction on the UserControl, a GoToStateAction on LayoutRoot, and a IncrementGlobalCounterAction on a Path:

The values for SetGlobalCounterAction are set as follows:

The new GoToStateAction uses GlobalCounterMinReachedTrigger and sets the StateName to WinScreen:

Each path will have an IncrementGlobalCounterAction set with these values:

Finally, we add a TextBlock to our Canvas to hold the count of remaining items and add the ShowGlobalCounterBehavior to it:

The only property to set on the behavior is the CounterKey: 

Once we add IncrementGlobalCounterAction to each Path, we can run the game and as we find items the counter will decrement by 1. When the value reaches 0, then the winning screen is shown.

Source code

Demo

In the next episode we will update the Particles Behavior to allow particle custom shapes.

When the game is finished, it will have a screen flow as follows:

 Currently we have been working on the Game screen which in the project is a UserControl called MainPage.xaml. We are going to create the menu, options, and splash screens as Canvas objects that are off screen of MainPage and are at the bottom of the Objects tree (or top of the z-order) so they show up over all other controls. I chose to do this since I want the background music to play during all of these screens and the MediaElement on MainPage is the one that is playing it. There are various other ways to approach this.

Let’s open Blend, add 3 Canvas controls, and name them splashCanvas, menuCanvas, and optionsCanvas. Make each Canvas have a black background and position them on the artboard so that they are to the left of MainPage:

On splashCanvas, add 4 TextBlock controls and enter the title information:

On menuCanvas, add the page title in a TextBlock and 2 Buttons:

On optionsCanvas, add a TextBlock for the page title, a TextBlock for the slider title, a Slider control, and a Button:

Since the silder’s Value property will be used in a Binding for the MediaElement’s Volume property, we will name the slider as sliderMusicVolume.

To control the screen flow, we will use the States panel to create a ScreenStates group with the following states: GameScreen, SplashScreen, MenuScreen, OptionsScreen.

On the States tab, click the Add state group button:

Then next to the ScreenStates group, click the Add state button:

As I entered the following states, I didn’t worry about setting any properties for any of the controls and after adding OptionsScreen I just turned off recording.

The GameScreen state represents when the MainPage is visible which is how it currently is shown on the artboard. No change will need to be made for this state. Click on the SplashScreen state in the States tab to turn on recording mode. Then click splashCanvas and change its Top and Left properties both to 0. Turn off recording of the SplashScreen state.

Repeat for the MenuScreen and OptionsScreen states so that when one of these states is active, MainPage will be covered by menuCanvas or optionsCanvas.

Click on the Base state at the top of the States tab to make sure you are completely out of state editing mode.

We now need to add a TextBlock with the Text property set to “MENU” and add it to LayoutRoot in MainPage. Because I added this control after the Canvas controls for the other screens, I need to change its order in the Objects tree so that it doesn’t appear above those screens. We will worry about making the MENU TextBlock into a Button at a later time.

Now it is time to use the GoToStateAction to connect the screen flow. Drop the first GoToStateAction onto LayoutRoot and change the EventName to Loaded and the StateName to SplashScreen:

This will cause the splash screen to show first.

NOTE: While we are still in development, we can set the loaded StateName to GameScreen to reduce testing time.

Drop another GoToStateAction onto splashCanvas and change the StateName to MenuScreen. When the splash screen is clicked, we will advance to the menu screen:

Drop two more GoToStateAction actions onto the Start and Options buttons on menuCanvas. Change the StateNames to GameScreen and OptionsScreen respectively.

Start button:

Options button:

Drop another GoToStateAction onto the Close button in optionsCanvas and change the StateName to MenuScreen:

Finally, drop the last GoToStateAction onto the MENU TextBlock in MainPage and set the StateName to MenuScreen:

We have just put together the majority of our screen flow with 6 instances of GoToStateAction and no code!

The last thing we need to do is to connect the slider value to the volume of the background music. In the Objects tree, select the musicMediaElement and in the Properties pane, click the peg to the right of the Volume property and click Data Binding to open the Create Data Binding window:

Select the ElementProperty tab. In the Scene elements list, open optionsCanvas and select sliderMusicVolume. In the Properties list, select Value. Now when the slider in the options screen is changed, it will set the volume on the MediaElement playing the background music.

The last thing we need to do is set some values on the slider control. Select the control and change the following properties found in the Common Properties group: LargeChange, Maximum, and Value.

In the next episode, we will try to figure out a way to determine when all the objects have been found so we can show a Win screen.

Demo
Source code