http://www.nvct.org/stendra/
Behavior | Shazaml Design, LLC

You are browsing the archive for Behavior.

Hidden Object: Episode 13 – Give me a Hint

November 17, 2009 in Hidden Object Game, Silverlight

This is episode 13 of Creating a Hidden Object Game is Silverlight 3. In this episode, we will add a hint feature to the game to help the players when they can’t find an item. This will require various animations and a custom behavior.

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

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

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.

Zip Source Code

silverlight Demo

Video: Creating a Silverlight 3 Casual Game using Blend 3 and Triggers, Actions, and Behaviors

November 9, 2009 in Hidden Object Game, Silverlight

On Saturday, November 7, 2009 at 9:00am I presented at the Desert Code Camp in Phoenix, AZ. The topic of my presentation was Silverlight casual game development. In less than an hour I demonstrated how to use triggers, actions, and behaviors in Blend 3 to create a hidden object game. Because all code was contained in the TABs (Triggers, Actions, and Behaviors) there was no code behind for the main UserControl.

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.

Hidden Object: Episode 12 – Custom Mouse Cursor Behavior

October 27, 2009 in Hidden Object Game, Silverlight

This is episode 12 of Creating a Hidden Object Game is Silverlight 3. In this episode, we will create a behavior that allows us to set the shape of the mouse cursor to any Image or Path we desire.

Let start this tutorial in Expression Design. Create a new document that is 25×25 pixels and on the single layer add the shapes shown:

 

102709_1407_HiddenObjec1.png 

Export the document as a PNG making sure that both Transparency and Antialias are checked.

 

If you don’t have a copy of Expression Design, you can use a vector graphics program like Inkscape.

 

Add the image to the Visual Studio project and drag it onto the Canvas. Let’s position the cursor image off screen at: Top = -50 and Left = -5. The -5 positions the cursor so the tip of the arrow is right in the corner and the -50 just to get it off screen. Since this image needs to be over all other objects including the screen Canvas objects, let’s set the ZIndex property to 1000.

We will compensate for the Top value with the OffsetY value in the MouseCursorBehavior that we will create:

 

The two offset values are dependency properties of type Double whereas CursorName is a string. You will notice that the cursor name has the artboard element picker (target symbol) that allows you to pick an object from the artboard.

Under the Interactivity folder, create a folder called MouseCursor and add three class files: MouseCursorBehavior, NameResolvedEventArgs, and NameResolver.

To get NameResolver and NameResolvedEventArgs, I admit that I used .NET Reflector to understand how the TargetedTriggerAction class was able to get a reference to an instance of the Target class using the string dependency property, TargetName.

Here is a sample usage of the NameResolver class as it relates to the MouseCursorBehavior:

NameResolver cursorResolver = new NameResolver();
cursorResolver.NameScopeReferenceElement = AssociatedObject;
cursorResolver.Name = "cursorArrow";
DependencyObject cursor = cursorResolver.Object;
 

After creating an instance of the NameResolver, we must assign an object as the NameScopeReferenceElement and set the name of the element that will be our cursor. Calling the Object property on the resolver will return a reference to the object specified by the Name property. The key method in NameResolver is UpdateObjectFromName:

private void UpdateObjectFromName(DependencyObject oldObject)
{
    DependencyObject resolvedObject = null;
    this.ResolvedObject = null;
 
    if (this.NameScopeReferenceElement != null)
    {
        if (!IsElementLoaded(this.NameScopeReferenceElement))
        {
            this.NameScopeReferenceElement.Loaded += new RoutedEventHandler(this.OnNameScopeReferenceLoaded);
            this.PendingReferenceElementLoad = true;
            return;
        }
        if (!string.IsNullOrEmpty(this.Name))
        {
            FrameworkElement actualNameScopeReferenceElement = this.ActualNameScopeReferenceElement;
            if (actualNameScopeReferenceElement != null)
            {
                resolvedObject = actualNameScopeReferenceElement.FindName(this.Name) as DependencyObject;
            }
        }
    }
    this.HasAttempedResolve = true;
    this.ResolvedObject = resolvedObject;
    if (oldObject != this.Object)
    {
        this.OnObjectChanged(oldObject, this.Object);
    }
}

 

Line 19 shows how NameScopeReferenceElement and Name are used to resolve the actual object.

The MouseCursorBehavior class defines three dependency properties with their corresponding .NET properties:

public static readonly DependencyProperty CursorNameProperty =
     DependencyProperty.Register("CursorName", typeof(string), typeof(MouseCursorBehavior),
     new PropertyMetadata(new PropertyChangedCallback(OnCursorNameChanged)));
 
public static readonly DependencyProperty OffsetXProperty =
    DependencyProperty.Register("OffsetX", typeof(double), typeof(MouseCursorBehavior), null);
    
public static readonly DependencyProperty OffsetYProperty =
    DependencyProperty.Register("OffsetY", typeof(double), typeof(MouseCursorBehavior), null);
 

In the constructor of the behavior, a NameResolver called cursorResolver is created. In the OnAttached method, the resolver’s NameScopeReferenceElement is set to the AssociatedObject. And in the OnCursorChanged method, the Name property is set to the name of the object to be used as the cursor:

private static void OnCursorNameChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
    MouseCursorBehavior behavior = (MouseCursorBehavior)obj;
    behavior.CursorResolver.Name = (string)args.NewValue;
}

To get the artboard element picker to show in the Properties panel for the CursorName, add the CustomPropertyValueEditor attribute to the CursorName property and specify the editor for an Element:

[CustomPropertyValueEditor(CustomPropertyValueEditor.Element)]
public string CursorName
{
    get
    {
        return (string)base.GetValue(CursorNameProperty);
    }
    set
    {
        base.SetValue(CursorNameProperty, value);
    }
}
 

The Cursor property is where the CursorName value is resolved by the NameResolver and the object reference is returned.

Now the behavior has a reference to the image that is being used as a cursor, now it needs to use that instead of the default cursor. In the OnAttached method, the behavior registers to handle the MouseEnter and MouseLeave events of the AssociatedObject. In our case, the MouseCursorBehavior will be attached to the MainPage UserControl which becomes the AssociatedObject. So whenever the mouse enters the area of the UserControl, it will be changed to the arrow:

private void AssociatedObject_MouseEnter(object sender, MouseEventArgs e)
{
    if (!this.IsCursorNameSet)
        return;
 
    FrameworkElement cursor = Cursor as FrameworkElement;
 
    cursor.Visibility = Visibility.Visible;
    AssociatedObject.Cursor = Cursors.None;
    cursor.IsHitTestVisible = false;
 
    this.AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
}

The cursor variable has a reference to the resolved object which is the Image named cursorArrow. We make the image visible and hide the real cursor. We must make the image “invisible” to mouse events so we set the IsHitTestVisible property to false. Finally, we register for the MouseMove event which is responsible for positioning the image wherever the mouse should be:

 

private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
{
    if (!this.IsCursorNameSet)
        return;
 
    FrameworkElement cursor = Cursor as FrameworkElement;
 
    Point mousePosition = e.GetPosition(null);
    cursor.Margin = new Thickness(mousePosition.X + OffsetX, mousePosition.Y + OffsetY, 0, 0);
 
}

To position the image, we use the trick of specifying the top and left values of its Margin based on the current mouse postion and the OffsetX and OffsetY dependency properties we defined.

 

In the MouseLeave event handler, we simply undo what we set in the MouseEnter handler.

 

 

I’ve seen a similar approach to custom cursors various places on the Internet. One requirement that I had was the need to specify a cursor at the UserControl level as shown, but then to have a child (or grandchild, etc.) object of that UserControl also have a unique cursor. If you move the mouse over a hidden rectangle on the left side of the screen the cursor will change to a left-facing arrow. Clicking the arrow will take you to another screen which has a hidden rectangle on the right that displays a right-facing arrow to get you pack to the original screen.

 

 

In the code, I created two path objects for the arrows just to show that any element could be used for a cursor. If I wanted, I could even have a cursor with multiple objects grouped in a Canvas that use animation storyboards.

 

When you look at the complete source for this project, you will notice that I use a Stack data structure to keep track of the nested cursors. I am not completely satisfied with the code as it stands, but it works for the present situation. Two things to note. First, the hidden rectangle must have space all around it so that the cursor properly changes from the left arrow to the cursorArrow. Second, I had to do a workaround because the shapes generated from the ParticlesBehavior was interfering with the custom cursor as sometimes a MouseEnter event was being fired with the star shapes but no MouseLevent event.

 
Check out the code and let me know if you come up with a better solution.

Zip Source Code

silverlight Demo

In the next episode, we will add a hint feature that allows the player to see an area of the screen that still has an object to find.

Hidden Object: Episode 11 – Add Custom Shapes to the Particles Behavior

October 5, 2009 in Hidden Object Game, Silverlight

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

Growing up our family didn’t splurge on Lucky Charms cereal, but I remember the TV commercials with Lucky the leprechaun talking about all the fun marshmallow shapes: pink hearts, yellow moons, orange stars, green clovers, and blue diamonds. In later years other shapes appeared such as purple horseshoes, red balloons, rainbows, and pots of gold.

 

What does this have to do with our hidden object game? Currently the ParticleControl creates only one shape. Circles. Wouldn’t it be great if you could specify the shape of the particles? That’s what I thought and I knew it could easily be done once I saw this discussion post on the CodePlex site for the Silverlight String-To-PathGeometry Converter.

To the existing ParticlesBehavior, we will add two dependency properties with corresponding property get/set blocks:

 

public static readonly DependencyProperty ParticleShapeProperty =
    DependencyProperty.Register("ParticleShape", typeof(ParticleShape),
    typeof(ParticlesBehavior), null);

public static readonly DependencyProperty CustomShapePathDataProperty =
    DependencyProperty.Register("CustomShapePathData", typeof(string),
    typeof(ParticlesBehavior), null);

 

The ParticleShape property is an enum with a list of possible shapes and a custom option:

public enum ParticleShape
{
    Circle,
    Square,
    Star4,
    Star5,
    Star8,
    Custom
}

 

The CustomShapePathData property is a string that holds a special XAML Path markup syntax and is used when the ParticleShape property is set to Custom. Here is an example of a path definition for a triangle:

 

<Path Data="F1 M 50,7.62939e-006L -1.02561e-005,100L 100,100L 50,7.62939e-006 Z "/>

 

The value of the Data property is what is set on CustomShapePathData.

 

The only other change we need to make to ParticlesBehavior is in the OnShowParticles method where we set the ParticleShape and CustomShapePathData on the instance of ParticleControl.

 

In ParticleControl, we add the same two dependency properties for ParticleShape and CustomShapePathData with their corresponding property get and set.

 

The Ellipse, Rectangle, and Path all inherit from the Shape base class. So we change all the methods in ParticleControl that worked on an Ellipse to a Shape. In the SpawnParticle method, we call the newly created CreateShape method:

 

private Shape CreateShape()
{
    string pathData = "";

    switch (ParticleShape)
    {
        case ParticleShape.Circle:
            return new Ellipse();
 
        case ParticleShape.Square:
            return new Rectangle();

        case ParticleShape.Star4:
            pathData = star4;
            break;

        case ParticleShape.Star5:
            pathData = star5;
            break;

        case ParticleShape.Star8:
            pathData = star8;
            break;

        case ParticleShape.Custom:
            if (string.IsNullOrEmpty(CustomShapePathData))
                return new Ellipse();
            else
                pathData = CustomShapePathData;
            break;

        default:
            return new Ellipse();
    }

    string xamlPath = string.Format("<Path xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' " +
             "xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' " +
             "Data='{0}' Stretch='Fill'/>", pathData);

    Path path = (Path)System.Windows.Markup.XamlReader.Load(xamlPath);

    return path;
}

 

If the ParticleShape property is set to Circle or Square, then a new Ellipse or Rectangle is created and returned. If the selected shape is a 4, 5, or 8-pointed star then a string constant containing the Path data syntax is set and a new Path is created using the XamlReader.Load method. If it is a custom shape, then the data is set based on the value of the CustomShapePathData property. If there is no custom path data, then an Ellipse is created.

 

When we compile the project and open Blend, we will now see the additional properties:

 

 

Here is what the custom triangle particles look like as well as the built-in shapes:

 

 

One of the best ways to create these custom shapes is in Expression Design. Create a new document that is 100×100 pixels. Use the Pen, Polygon, or Polyline tools to create a path to your desired shape. Or create multiple paths and use Path operations (Unite, Front Minus Back, etc.) to create a single path.

 

Select the Path and on the Edit menu select Copy XAML. Paste the XAML into Notepad and copy the Data property string and paste it as the CustomShapePathData value:

 

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Layer_1_4" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">

    <Path Width="99.7292" Height="100.79"
        Canvas.Left="-1.84403" Canvas.Top="-1.13409"
        Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000"

        Data="F1 M 31.5808,99.156C 34.4917,98.2985 37.4026,97.441 40.1509,96.3542C 42.8991,95.2675 45.4846,93.9515 47.874,92.4426C 50.2634,90.9336 52.4566,89.2317 54.4271,87.3777C 56.3976,85.5237 58.1453,83.5175 59.6511,81.4035C 61.1568,79.2895 62.4206,77.0676 63.4311,74.7844C 64.4415,72.5011 65.1986,70.1565 65.699,67.7977C 66.1994,65.439 66.4431,63.0661 66.6868,60.6933C 67.6642,61.334 68.6416,61.9748 69.581,62.7785C 70.5203,63.5821 71.4217,64.5487 72.2503,65.6721C 73.0789,66.7954 73.8349,68.0754 74.4845,69.4997C 75.1342,70.9239 75.6777,72.4923 76.0837,74.1863C 76.4897,75.8803 76.7583,77.6999 76.8615,79.6207C 76.9647,81.5416 76.9025,83.5637 76.6513,85.6577C 76.4,87.7517 75.9597,89.9176 75.5194,92.0835C 76.6639,89.273 77.8084,86.4624 78.6723,83.6362C 79.5361,80.81 80.1193,77.9681 80.4293,75.1592C 80.7393,72.3503 80.7762,69.5744 80.5552,66.8778C 80.3342,64.1813 79.8555,61.564 79.1415,59.0687C 78.4275,56.5734 77.4784,54.2 76.3232,51.9865C 75.1681,49.7729 73.8071,47.7191 72.2749,45.8572C 70.7427,43.9953 69.0395,42.3253 67.3363,40.6554C 68.4466,40.2907 69.557,39.926 70.771,39.6927C 71.985,39.4594 73.3028,39.3573 74.6976,39.4098C 76.0925,39.4624 77.5646,39.6695 79.0832,40.0495C 80.6018,40.4296 82.1669,40.9826 83.7444,41.7214C 85.322,42.4601 86.912,43.3846 88.4781,44.5016C 90.0443,45.6185 91.5865,46.9279 93.067,48.4299C 94.5475,49.9319 95.9663,51.6266 97.3851,53.3212C 95.9014,50.6741 94.4176,48.027 92.7466,45.5895C 91.0756,43.152 89.2173,40.9241 87.2145,38.9304C 85.2117,36.9367 83.0644,35.1771 80.8184,33.6686C 78.5723,32.1601 76.2276,30.9026 73.8315,29.905C 71.4354,28.9074 68.9881,28.1697 66.5372,27.6927C 64.0864,27.2156 61.632,26.9993 59.2211,27.0363C 56.8101,27.0733 54.4425,27.3637 52.075,27.6541C 52.4822,26.5587 52.8893,25.4632 53.4638,24.3686C 54.0383,23.2739 54.7801,22.18 55.6909,21.1222C 56.6017,20.0644 57.6814,19.0426 58.9254,18.0923C 60.1693,17.142 61.5775,16.2632 63.1387,15.4904C 64.6999,14.7176 66.414,14.0509 68.2638,13.5228C 70.1135,12.9948 72.0987,12.6054 74.1961,12.3844C 76.2935,12.1634 78.5031,12.1107 80.7127,12.058C 77.7179,11.5676 74.7232,11.0772 71.7757,10.8639C 68.8281,10.6506 65.9276,10.7144 63.1202,11.0372C 60.3127,11.36 57.5982,11.9418 55.0184,12.7573C 52.4386,13.5727 49.9936,14.6219 47.7197,15.8732C 45.4458,17.1245 43.3432,18.578 41.4421,20.1967C 39.5411,21.8155 37.8416,23.5994 36.3674,25.5075C 34.8931,27.4156 33.644,29.4477 32.3949,31.4798C 31.7923,30.4784 31.1897,29.4771 30.6921,28.3454C 30.1944,27.2137 29.8017,25.9518 29.5425,24.5802C 29.2834,23.2085 29.1577,21.7273 29.1903,20.1622C 29.223,18.5971 29.4138,16.9482 29.783,15.2458C 30.1522,13.5434 30.6997,11.7875 31.4402,10.0121C 32.1806,8.23676 33.114,6.44186 34.2489,4.66424C 35.3838,2.88662 36.7202,1.12626 38.0567,-0.634094C 35.8061,1.40149 33.5555,3.4371 31.5509,5.60862C 29.5464,7.78015 27.7879,10.0876 26.2898,12.4839C 24.7918,14.8801 23.5542,17.3651 22.5833,19.8904C 21.6124,22.4158 20.9082,24.9816 20.4687,27.5396C 20.0293,30.0976 19.8547,32.6477 19.935,35.1433C 20.0153,37.6388 20.3505,40.0798 20.9231,42.4221C 21.4956,44.7643 22.3056,47.0079 23.1156,49.2515C 21.957,49.0983 20.7984,48.9451 19.6033,48.6286C 18.4083,48.3121 17.1768,47.8323 15.9428,47.1797C 14.7089,46.5272 13.4724,45.7019 12.2692,44.7006C 11.0659,43.6993 9.89571,42.522 8.79491,41.1719C 7.69411,39.8218 6.66265,38.299 5.73625,36.6131C 4.80985,34.9273 3.9885,33.0785 3.3063,31.0828C 2.6241,29.0872 2.08106,26.9447 1.53801,24.8023C 1.72628,27.8311 1.91455,30.8598 2.36251,33.781C 2.81047,36.7021 3.51811,39.5156 4.45754,42.1809C 5.39696,44.8461 6.56816,47.3631 7.93723,49.6967C 9.30631,52.0304 10.8733,54.1807 12.5992,56.1191C 14.3251,58.0575 16.2101,59.784 18.2112,61.2772C 20.2124,62.7704 22.3298,64.0303 24.5181,65.043C 26.7063,66.0557 28.9654,66.8213 31.2246,67.5869C 30.3824,68.3972 29.5402,69.2075 28.5477,69.9445C 27.5551,70.6815 26.4122,71.3452 25.1326,71.903C 23.8531,72.4609 22.4369,72.913 20.9038,73.2295C 19.3707,73.546 17.7207,73.7268 15.9788,73.7457C 14.237,73.7646 12.4033,73.6215 10.5076,73.2947C 8.61196,72.9679 6.65438,72.4573 4.66878,71.7464C 2.68319,71.0355 0.669576,70.1243 -1.34403,69.2131C 1.14133,70.9543 3.62669,72.6955 6.18983,74.1666C 8.75297,75.6376 11.3939,76.8386 14.0634,77.7659C 16.7329,78.6932 19.4309,79.3468 22.1091,79.7314C 24.7872,80.116 27.4453,80.2316 30.037,80.0908C 32.6286,79.95 35.1537,79.5528 37.5688,78.9192C 39.9839,78.2856 42.2891,77.4156 44.4452,76.3362C 46.6014,75.2568 48.6085,73.9679 50.6156,72.6789C 50.724,73.8426 50.8324,75.0063 50.7898,76.2418C 50.7472,77.4773 50.5534,78.7847 50.1918,80.1329C 49.8302,81.4811 49.3007,82.8702 48.5923,84.2661C 47.8838,85.6621 46.9964,87.0649 45.9251,88.4385C 44.8539,89.8121 43.5987,91.1566 42.1613,92.4349C 40.7239,93.7132 39.1042,94.9254 37.3104,96.0345C 35.5166,97.1437 33.5487,98.1498 31.5808,99.156 Z "/>
</Canvas>

 

It’s that easy:

 


 
Source code
Demo

In the next episode, we will create a custom mouse cursor and manage its use with a behavior.

Hidden Object: Episode 10 – Counting Items Found with Counter Triggers, Actions & a Behavior

October 4, 2009 in Hidden Object Game, Silverlight

In episode 9 of Creating a Hidden Object Game is Silverlight 3 we added additional screens to the game. In this episode, we will add the Win screen and a collection of triggers, actions, & behaviors that work with a global counter.

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:

100409_0710_HiddenObjec3.png 

 

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.

100409_0710_HiddenObjec4.png

 

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

100409_0710_HiddenObjec5.png

 

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:

GlobalCounterTriggers

 

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:

 

 

 100409_0710_HiddenObjec15.png

 

 

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.

Hidden Object: Episode 8 – Loop Game Music with a Behavior

September 28, 2009 in Hidden Object Game, Silverlight

In the last episode of Creating a Hidden Object Game is Silverlight 3 we finished off the magnifier feature. Now it is time to add some background music to the game and have it continually play.

First off, we need to find some appropriate music. I did a search for royalty-free & public domain music and came across a site by Derek R. Audette that contained such music. On the site, I found a piece of music called “Combustible Coffee Pot” written & performed by Derek R. Audette – ©MMV(Socan). Derek’s own description of the music is:

“Out of control drum fills, singing string sections and odd, tense, electronic pads make up this bizarre composition. Created to add a mood of intrigue to an independent film produced in 2005.”

Download the mp3 file and add it to the Audio folder.

In order to use the music in our game, we need to add a MediaElement control to LayoutRoot:

<MediaElement x:Name="musicElement"
    Source="/Audio/Combustible_Coffee_Pot.mp3"
    MediaEnded="musicElement_MediaEnded"/>

To get the continuous loop, we need to handle the MediaEnded event which sets the media position back to 0 and plays it again:

private void musicElement_MediaEnded(object sender, System.Windows.RoutedEventArgs e)
{
    musicElement.Position = new TimeSpan(0);
    musicElement.Play();
}

But as developers, we don’t want to make our designers go into code behind and enter C# code. Since Silverlight doesn’t support continuously lookping media, we are going to package this functionality into a custom behavior.

Create a folder under Interactivity called ContinuousMediaPlayBehavior and create new class based on the Behavior template by the same name. All we are going to do is attach an event handler to the MediaEnded event in the OnAttached method and remove the handler in the OnDetaching method. To get the AssociatedObject property to be strongly typed to a MediaElement and thus allow this behavior to only be attached to the MediaElement type we change the behavior so it is typed to MediaElement. When the MediaEnded event is fired, we set the position of the media back to 0 and replay it:

public class ContinuousPlayMediaBehavior : Behavior<MediaElement>
{
    public ContinuousPlayMediaBehavior() {}

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.MediaEnded += AssociatedObject_MediaEnded;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.MediaEnded -= AssociatedObject_MediaEnded;
    }

    void  AssociatedObject_MediaEnded(object sender, RoutedEventArgs e)
    {
        AssociatedObject.Position = new TimeSpan(0);
        AssociatedObject.Play();
    }
}

This is what the XAML looks like for this:

<MediaElement x:Name="musicMediaElement" Source="/Audio/Combustible_Coffee_Pot.mp3">
    <i:Interaction.Behaviors>
        <local:ContinuousPlayMediaBehavior/>
    </i:Interaction.Behaviors>
</MediaElement>

In the next episode, we will continue to work on the UI by adding various screens including one to control the volume of the background music we just added.

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

September 26, 2009 in Hidden Object Game, Silverlight

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:

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

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.

notepad

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.

Creating an Action to set Properties on Actions & Behaviors

September 22, 2009 in Silverlight

Behaviors and actions have properties of their own and it would be useful to be able to set those properties as a result of a trigger.

For this post, we will use the ShowMessageBox action that is part of the Expression Blend Samples CodePlex project.

To explore this, create a Silverlight project in Blend 3, drop a Rectangle on LayoutRoot, and drop a ShowMessageBox action onto the Rectangle. The ShowMessageBox action is under the Behaviors > Experimental in the Assets tab:

Change the rectangle stroke and fill so that it is easily seen.

Set the Caption and Message properties of ShowMessageBox:

When we run the application and click on the rectangle, the message box shows:

What if we wanted to change the value of the Message property when a CheckBox control is checked or unchecked?

To accomplish this, we will create SetInteractionPropertyAction that derives from TargetedTriggerAction and adds properties for the name of the action or behavior, the property on that action/behavior, and the value to set on that property:

public string ObjectName
{
  get { return (string)GetValue(ObjectNameProperty); }
  set { SetValue(ObjectNameProperty, value); }
}
public static readonly DependencyProperty ObjectNameProperty =
  DependencyProperty.Register("ObjectName",
  typeof(string), typeof(SetInteractionPropertyAction),
  new PropertyMetadata(null));</pre>

public string PropertyName
{
  get { return (string)base.GetValue(PropertyNameProperty); }
  set { base.SetValue(PropertyNameProperty, value); }
}
public static readonly DependencyProperty PropertyNameProperty =
    DependencyProperty.Register("PropertyName",
    typeof(string), typeof(SetInteractionPropertyAction),
    new PropertyMetadata(null));

public string Value
{
  get { return (string)base.GetValue(ValueProperty); }
  set { base.SetValue(ValueProperty, value); }
}
public static readonly DependencyProperty ValueProperty =
  DependencyProperty.Register("Value",
  typeof(string), typeof(SetInteractionPropertyAction),
  new PropertyMetadata(null));

Next we need to implement the Invoke method which finds the action or behavior under the Target control that matches the ObjectName and sets its property defined by PropertyName to the value specified in Value.

To find actions and behaviors associated with a given object, we use the GetTriggers and GetBehaviors static methods defined on the Interaction class in the System.Windows.Interactivity namespace:

  public static TriggerCollection GetTriggers(DependencyObject obj);
  public static BehaviorCollection GetBehaviors(DependencyObject obj);

If we look at some sample XAML we can see that when an action is defined, it becomes part of the Triggers collection and appears under the trigger that causes the action to be invoked. If multiple actions are associated with the same object and use the same trigger, the actions appear together:

<Path>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonDown">
      <ic:ChangePropertyAction x:Name="changeProperty" TargetName="staplerText" PropertyName="Opacity" Value="0.4"/>
      <im:PlaySoundAction x:Name="playSoundAction" Source="/Audio/magic_wand.mp3"/>
      <ic:RemoveElementAction x:Name="removeElement" />
    </i:EventTrigger>
  </i:Interaction.Triggers>
</Path>

Calling Interaction.GetTriggers passing a reference to the hosting Path, will return a single trigger of type EventTrigger. For that trigger, we can use its Actions property to access the three actions.

If we look at some XAML for a behavior, we notice that there is a Behaviors collection containing one or more behaviors and for each behavior there is an optional Triggers collection:

<Canvas>
  <i:Interaction.Behaviors>
    <local:ParticlesBehavior x:Name="particles">
      <i:Interaction.Triggers>
        <i:EventTrigger SourceName="staplerPath" EventName="MouseLeftButtonDown">
          <i:InvokeCommandAction CommandName="ShowParticles"/>
        </i:EventTrigger>
        <i:EventTrigger SourceName="idolPath" EventName="MouseLeftButtonDown">
          <i:InvokeCommandAction CommandName="ShowParticles"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </local:ParticlesBehavior>

    <Behaviors:MagnifierOverBehavior x:Name="magnifier"/>
  </i:Interaction.Behaviors>
</Canvas>

In the case, calling Interaction.GetBehaviors with a reference to the Canvas will return two behaviors: ParticlesBehavior and MagnifierOverBehavior

Just like any object you add to the Object tree, you can set the name of an action or behavior. This adds an x:Name property in the XAML and the name appears in the name textbox in the Properties panel. To access the x:Name property in code, get a reference to the behavior or action and call GetValue passing the FrameworkElement.NameProperty dependency property:

  string actionName = (string)action.GetValue(FrameworkElement.NameProperty);
  string behaviorName = (string)behavior.GetValue(FrameworkElement.NameProperty);

For SetInteractionPropertyAction we define the following methods that will try to find an action or behavior that matches the same name as the ObjectName property:

private object TryFindBehavior()
{
  var behaviors = Interaction.GetBehaviors(Target);

  foreach (Behavior behavior in behaviors)
  {
    string behaviorName = (string)behavior.GetValue(FrameworkElement.NameProperty);

    if (behaviorName == ObjectName)
    {
      return behavior;
    }
  }

return null;
}

private object TryFindAction()
{
  var triggers = Interaction.GetTriggers(Target);

  foreach (System.Windows.Interactivity.TriggerBase trigger in triggers)
  {
    foreach (System.Windows.Interactivity.TriggerAction action in trigger.Actions)
    {
      string actionName = (string)action.GetValue(FrameworkElement.NameProperty);

      if (actionName == ObjectName)
      {
        return action;
      }
    }
  }

return null;
}

Finally, the Invoke method uses the previous two methods to find a matching action or behavior and to set one of its properties. I admit that a large portion of the Invoke method in the full project source code was borrowed from the SetProperty action defined in the Expression.Samples.Interactivity assembly (thanks .NET Reflector) :

Type itemType = null;
object item = null;

item = TryFindBehavior();

if (item == null)
{
  item = TryFindAction();
}

if (item == null)
{
  return;
}
else
{
  itemType = item.GetType();
}

PropertyInfo property = itemType.GetProperty(this.PropertyName);
property.SetValue(item, this.Value, null);

After compiling the code, the SetInteractionPropertyAction will appear in the Assets panel.

Let’s add a CheckBox control to LayoutRoot and drop two instances of SetInteractionPropertyAction onto the CheckBox. Next select the ShowMessageBox action and set its name property to showMessageBox.

Click on the first instance of SetInteractionPropertyAction and set it’s EventName, TargetName, ObjectName, PropertyName, and Value properties:

For the second instance of SetInteractionPropertyAction, set the same properties as follows:

Now run the application. Initially, when you click on the rectangle, you will see a message box that says “Hello World”.

When you click on the CheckBox and then click the rectangle, the message will change to “I am checked”. Unchecking the CheckBox and clicking on the rectangle will cause the message to change to “I am unchecked”.

Install Microsoft Silverlight

 

We have successfully set the property of one action based on a trigger invoking SetInteractionPropertyAction.

If you look at the Common Properties group for our custom action, you will notice that the editors for ObjectName, PropertyName, and Value are just TextBox controls. I would like the design-time experience to be better for this action. Maybe in a future post, this will be revisited. You might have noticed that the Value property is of type string even though the data type of the property that corresponds to PropertyName might be another data type. I originally had Value as type object, but there were times when the textbox would gray out and not allow any input. This would also be solved if custom property editors were defined.

The Microsoft.Expression.Interactions assembly defines an action called ChangePropertyAction that sets the property on an object and has a much better designer experience. It provides a drop-down containing property names and when a property is selected, the editor for the Value reflects the underlying data type of the property:

I would like to include these editors plus one that would show a list of named actions and behaviors for the given Target grouped in the list under the words: Actions or Behaviors.

Source code

Base Classes for Custom Behaviors

September 21, 2009 in Silverlight

Behaviors are a powerful way to encapsulate functionality and make it available for designers to use in Blend 3. As your library of custom behaviors grows, you might notice a number of properties that most of your behaviors use. You know that duplication of each of these properties in each of your behaviors is not the right way to go, so you want to create a base class that all your custom behaviors use.

The TriggerAction base class includes an IsEnabled property which I would like to include in all my custom behaviors. Instead of adding the DependencyProperty and associated code to each custom behavior, let’s create a base behavior class.

The existing behavior base classes are:

If we create a custom behavior, MyBehavior, that inherits from Behavior<DependencyObject> and in Blend 3 drop the behavior on the LayoutRoot Grid, we get a behavior with no properties defined:

 

 

To create a base class for our custom behaviors, create an abstract BaseBehavior class that inherits from Behavior<T>. This is where we add the IsEnabled property and any other common properties we want our custom behaviors to have. Next derive a BaseBehavior<T> class from BaseBehavior. It is from BaseBehavior<T> that we will derive our custom behaviors:

 

092209_0022_BaseClasses4.png

The code for BaseBehavior simply derives from Behavior<T> and defines the property, dependency property, and callback method for the IsEnabled property:

 

public abstract class BaseBehavior : Behavior<DependencyObject>
{
    internal BaseBehavior()
    {
    }

    #region IsEnabled (Dependency Property)

    [Category("Common Properties")]
    public bool IsEnabled
    {
        get
        {            
            return (bool)base.GetValue(IsEnabledProperty);
        }
        set
        {
            base.SetValue(IsEnabledProperty, value);
        }
    }

    public static readonly DependencyProperty IsEnabledProperty =
        DependencyProperty.Register(
            "IsEnabled",
            typeof(bool),
            typeof(BaseBehavior),
            new PropertyMetadata(true, new PropertyChangedCallback(OnIsEnabledChanged)));

    private static void OnIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((BaseBehavior)d).OnIsEnabledChanged(e);
    }

    protected virtual void OnIsEnabledChanged(DependencyPropertyChangedEventArgs e)
    {
    }
    #endregion
}

The BaseBehavior<T> class derives from BaseBehavior and redefines the AssociatedObject property using the new keyword. We do this so that the AssociatedObject can be typed when we derive our custom behavior from it:

 
public abstract class BaseBehavior<T>
    : BaseBehavior where T : DependencyObject
{
    protected BaseBehavior() : base() {}

    protected new T AssociatedObject
    {
        get
        {
            return (T)base.AssociatedObject;
        }
    }
}

In MyBehavior, change the class definition from:

 
public class MyBehavior : Behavior<DependencyObject>

to

public class MyBehavior : BaseBehavior<DependencyObject>

BaseBehavior<T> is a drop-in replacement for Behavior<T>. When we recompile and view the behavior’s properties in Blend, we see that the IsEnabled property has been added:

 

  

As needed, we can add additional properties to BaseBehavior.

What other properties do you think should be added to BaseBehavior?

Source code

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
  • 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:

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.