SHAZAML! » Development

Infragistics XamWebOutlookBar & Caliburn

Mark Tucker — Mon, 14 Jun 2010 21:38:44 +0000

Last week I set out to build a simple Caliburn sample that included the Infragistics Silverlight XamWebOutlookBar. I made progress and got to a point where Rob Eisenberg was able to help me get the rest of the way. The approach I was taking was trying to figure out what conventions I should add to get Caliburn to recognize the XamWebOutlookBar. Rob’s answer was that not everything needs to be a convention.

When you run the application, you will see the XamWebOutlookBar hosted in a sidebar. Both groups shown in the OutlookBar have corresponding ViewModels that in turn have associated Views:

At the end of the article is a link to the project source code. In order to get the project to compile, you will need to download the Infragistics assemblies and add references to the following:

A trial of Infragistics can be downloaded from here.

Here is the final project structure:

Application

In typical Caliburn style, the App.xaml has been changed to a CaliburnApplication:

In App.xaml.cs, we setup MEF as the container and the use MEF to find the ShellViewModel:

protected override IServiceLocator CreateContainer()
{
    return new MEFAdapter(CompositionHost.Initialize(new AssemblyCatalog(Assembly.GetExecutingAssembly())));
}

protected override object CreateRootModel()
{
    var shell = ServiceLocator.Current.GetInstance();

    if (IsRunningOutOfBrowser && HasElevatedPermissions)
        MainWindow.Closing += (s, args) => { args.Cancel = !ServiceLocator.Current.GetInstance().CanShutdown(); };

    return shell;
}

ViewModels

MEF is able to find ShellViewModel in the container using the IShell type because it implements IShell and Exports itself as IShell:

[Export(typeof(IShell))]
public class ShellViewModel : ScreenConductor, IShell
{
    private readonly MainViewModel _firstScreen;

    [ImportingConstructor]
    public ShellViewModel(MainViewModel firstScreen)
    {
        _firstScreen = firstScreen;
    }

    protected override void OnInitialize()
    {
        this.OpenScreen(_firstScreen);
    }

}

Because of the ImportingConstructor attribute, an instance of MainViewModel is created. The class is implemented as:

[Export(typeof(MainViewModel))]
public class MainViewModel : ScreenConductor.WithCollection.OneScreenActive
{
    [ImportingConstructor]
    public MainViewModel([ImportMany] IEnumerable sidebars)
    {
        Screens.AddRange(sidebars);
        this.OpenScreen(Screens.First());
    }
}

For the XamWebOutlookBar implementation, the important thing to note is that MainViewModel is setup as a ScreenConductor that manages ISidebarItem instances where only one sidebar screen is active at a time. The ImportingConstructor attribute then finds all items registered in the MEF container as ISidebarItem.

In this example, both ContentAViewAModel and ContentBViewModel are similar:

[Export(typeof(ISidebarItem))]
public class ContentAViewModel : Screen, ISidebarItem
{
    string message = "ContentA is working";

    public ContentAViewModel()
    {
        DisplayName = "Content A Header";
    }

    public string Message
    {
        get { return message; }
        set
        {
            message = value;
            NotifyOfPropertyChange(() => Message);
        }
    }

    public string Icon
    {
        get { return @"../../Images/briefcase2.png"; }
    }
}

Each of the ViewModels export themselves as ISidebarItem, inherit from Screen, and implement ISidebarItem.

Views

In MainView.xaml, the DisplayName and Icon properties are used to render the group’s header and icon:

Notice the GroupsSource property is bound to the Screens property that the ViewModel inherits from its base class. The ContentControl for each group is set to the ViewModel representing the group. The group header is bound to the DisplayName property and the small and large icons are set to the Icon property.

The Message property is bound in the View for the group content:

Download the source of the project here.

Caliburn Book: Chapters 1-3

Mark Tucker — Mon, 07 Jun 2010 19:37:25 +0000

Many months ago I put learning about the Caliburn framework on my “to do” list. A few weeks ago I started the task and decided to write a book about it. I don’t think that I am expert enough at the framework to actually publish a book. Not yet anyway. But I figured if I could grok it well enough to write about it that I would be well on my way to learning the framework.

You can download the book from here.

The first chapter is a simple introduction to Caliburn. Chapter 2 walks you through a simple, Hello Caliburn, application. Chapter 3 is more ambitious and walks you through various aspects of the framework using the Silverlight GameLibrary sample. It covers the same topics that Rob Eisenberg covered in his MIX10 talk. There is also an Appendix included that lists some of the conventions found in Caliburn.

If I decide to write additional chapters, then I would include:

Adding to Conventions
Overriding Conventions
TDD and Caliburn
Caliburn extensibility points
IResult implementations
Coroutines in more depth
UI patterns besides MVVM

There is likely much more to Caliburn that I don’t even know what I don’t know yet.

Please reply with any feedback, corrections, further explanations, or additional chapter ideas.

If a book is ever published about Caliburn, Rob should be the one to do it.

Windows Phone 7 Presentation at Desert Code Camp 2010

Mark Tucker — Mon, 17 May 2010 14:00:32 +0000

Last Saturday I presented at my second Desert Code Camp. The presentation PowerPoint and code for “Windows Phone 7 Silverlight MVVM App the Test-Driven Way” is now available.

Windows Phone 7 Silverlight MVVM App the Test-Driven

View more presentations from Mark Tucker.

The code consists of two phone projects. If you run the first, you will get the application UI. Running the second will bring up the test viewer.

Get the code here.

NOTE:

I told those attending the session that a video of the presentation would be available. But due to an issue with Camtasia Studio, the video was not recorded.

Thanks again to all those who attended the presentation. Let me know about the COOL apps you write for WP7.

Ninject vs. MEF for ASP.NET MVC Apps

Mark Tucker — Fri, 23 Apr 2010 13:33:55 +0000

This week I have been looking at using a dependency injection container for an MVC 2 application. Since I am using .NET Framework 4 with Managed Extensibility Framework (MEF) built in, it is one option to consider. I have also heard good things about Ninject. So lets do a quick comparison between Ninject and MEF with the simplest of implementations.

Ninject

To start off, I downloaded the .NET Framework 3.5 release of Ninject assembly and then reference that as I recompile the Ninject.Web.MVC assembly for .NET 4. Then I created a new ASP.NET MVC 2 project and reference those assemblies:

Next I modified the MvcApplication class in Global.asax.cs to inherit from NinjectHttpApplication and use the OnApplicationStarted and CreateKernal overrides to wire Ninject


public class MvcApplication : NinjectHttpApplication
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );

    }

    protected override void OnApplicationStarted()
    {
        AreaRegistration.RegisterAllAreas();
        RegisterRoutes(RouteTable.Routes);

        RegisterAllControllersIn(Assembly.GetExecutingAssembly());
    }

    protected override IKernel CreateKernel()
    {
        var modules = new INinjectModule[]
            {
                new WebModule()
            };

        return new StandardKernel(modules);
    }

To associate an interface to an implementation, I create a WebModule class that inherits from NinjectModule:


public class WebModule : NinjectModule
{
    public override void Load()
    {
        Bind()
            .To();
    }
}

The service and interface are very basic:


public interface IHelloService
{
    string GetMessage();
}

public class HelloService : IHelloService
{
    public string GetMessage()
    {
        return "Hello there.";
    }
}

Since the Controllers are now wired to use items bound in the module, we can use the interface as a parameter to the constructor or set a property using the [Inject] attribute:

Constructor Injection


public class HomeController : Controller
{
    public IHelloService HelloService { get; set; }

    //Constructor injection
    public HomeController(IHelloService service)
    {
        this.HelloService = service;
    }

    public ActionResult Index()
    {
        ViewData["Message"] = HelloService.GetMessage();

        return View();
    }
}

Property Injection


public class HomeController : Controller
{
    //Property injection
    [Inject]
    public IHelloService HelloService { get; set; }

    public ActionResult Index()
    {
        ViewData["Message"] = HelloService.GetMessage();

        return View();
    }
}

So, how would we accomplish the same thing in MEF?

MEF

To make the comparison easier, I created MefHttpApplication and MefControllerFactory classes.

First, add a reference to System.ComponentModel.Composition as that is where MEF lives:

To get similar functionality that Ninject has in its NinjectHttpApplication, I created a MefHttpApplication:


public abstract class MefHttpApplication : HttpApplication
{
    public void Application_Start()
    {
        var catalog = CreateCatalog();
        var container = new CompositionContainer(catalog);

        ControllerBuilder.Current.SetControllerFactory(new MefControllerFactory(container));

        OnApplicationStarted();
    }

    protected virtual void OnApplicationStarted() {}

    protected abstract ComposablePartCatalog CreateCatalog();
}

When the application starts, the derived class gets the specify catalog used to gather composition information. The MefHttpApplication then creates a CompositionContainer based on that catalog, overrides MVC’s default ControllerFactory, and provides an OnApplicationStarted method for the derived class:


public class MvcApplication : MefHttpApplication
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );

    }

    protected override void OnApplicationStarted()
    {
        AreaRegistration.RegisterAllAreas();
        RegisterRoutes(RouteTable.Routes);
    }

    protected override ComposablePartCatalog CreateCatalog()
    {
        return new AssemblyCatalog(Assembly.GetExecutingAssembly());
    }
}

Comparing this to the NinjectHttpApplication-derived class, there is no need to register the controllers separately or to create a WebModule to define the mapping between IHelloService and HelloService. This will be accomplished in a different way. By creating an AssemblyCatalog for the currently executing assembly, all classes will be scanned to see if there are any Exports to register. In our case, we have one Export on the HelloService:


public interface IHelloService
{
    string GetMessage();
}

[Export(typeof(IHelloService))]
public class HelloService : IHelloService
{
    public string GetMessage()
    {
        return "Hello there.";
    }
}

In MEF, we need to remember the triad: Export, Import, Compose. We already have our Export and the corresponding Import can be found in the Controller on the HelloService property:


public class HomeController : Controller
{
     [Import]
     public IHelloService HelloService { get; set; }

     public ActionResult Index()
     {
         ViewData["Message"] = HelloService.GetMessage();

         return View();
     }

     public ActionResult About()
     {
         return View();
     }
}

It is also possible to import via a constructor parameter by decorating the constructor with the ImportingConstructor attribute but this would require more work in the MefControllerFactory class:


public class MefControllerFactory : DefaultControllerFactory
{
    private CompositionContainer container;

    public MefControllerFactory(CompositionContainer container)
    {
        this.container = container;
    }

    public override IController CreateController(System.Web.Routing.RequestContext requestContext, string controllerName)
    {
        IController controller = base.CreateController(requestContext, controllerName);

        container.ComposeParts(controller);

        return controller;
    }
}

In the MefHttpApplication we replaced the default ControllerFactory with the MefControllerFactory which is derived from DefaultControllerFactory. Every time MVC creates a new Controller, it goes through this class which simply calls base to create the Controller. Just before returning the Controller, the container.ComposeParts method is called passing in the controller which allows any Imports defined in the Controller to be satisfied by any Exports found in the catalog. All three steps of composition have been completed.

So Which Should I Use?

As always, that depends on your specific situation. If all you need is injection into your controllers, then Ninject is simple way to get that done. If you don’t want to rely on a 3rd-party solution, don’t mind creating your own HttpApplication and ControllerFactory classes, or you want to use MEF in other scenarios then MEF might be a better choice. One example is to use MEF to define a Controller in a separate plug-in.

In this example, we compared MEF to Ninject, but a similar comparison could be done for Unity, StructureMap, Castle Windor, or other.

Creating a Hello World Application for Boxee

Mark Tucker — Tue, 02 Feb 2010 15:58:49 +0000

My first exposure to Boxee was a few weeks ago as I read the news from CES 2010. Boxee is media center software that runs on a variety of operating systems and touts itself as “the best way to enjoy entertainment from the Internet and computer on your TV.”

In its support forum knowledge base under the question “What is Boxee?” you can read the following:

Boxee is a social media center. With Boxee you can play videos, music and pictures from your computer, local network, and the Internet. You can also share with your friends what albums you’re listening to, what movies and TV shows you’re watching, send recommendations and more.

One of the most-talked about devices at CES 2010 was the Boxee Box, a hardware device running the Boxee software that promises “plug and enjoy” connectivity to online entertainment sources such as YouTube, Pandora, Netflix, flickr, Facebook photos, TED Talks, and many more. Plus you can access pictures, video, and music from your home network. The Boxee Box has a striking design and a remote that features a keyboard on the back:

The great part for developers is that you can create and deploy your own Boxee applications using xml & Python.

Here is a 6 minute video that walks you through the process of creating and testing your first Boxee application:

The files used in the video can be downloaded from here:

Source Code

Hidden Object: Episode 14 – Shake it up

Mark Tucker — Wed, 25 Nov 2009 13:05:17 +0000

So far in the game, we have particles when an item is clicked, a hint to show the location of an unfound item, but what should we do if the player goes berserk and wildly clicks all over the place in hopes of finding a difficult-to-find item? In this episode of Creating a Hidden Object Game is Silverlight 3 we will add an earthquake effect if the player clicks too many times in a 5 second interval.

Let’s first start with the shake effect. The magnifierCanvas Canvas contains the background image and all Paths for each clickable item. We will create a new storyboard called ShakeStoryboard that will animate the Left property of the Canvas:

Each of the 4 key frames set the Left property to a different value as shown in the storyboard XAML:

The Storyboard has the RepeatBehavior property set to repeat 5 times and the SpeedRatio property set to speed up the animation.

If the player clicks on the background image 10 times within a 5 second interval, then the ShakeStoryboard will play. To accomplish this we need three SetGlobalCounterAction instances and one ControlStoryboardAction added to the UserControl:

The first SetGlobalCounterAction sets the values for the TooManyClicks counter when the UserControl loads:

The ControlStoryboardAction plays the ShakeStoryboard when the GlobalCounterMaxReachedTrigger is fired for the TooManyClicks key which we set previously to 10.

When the counter reaches 10 we need to set it back to zero which is what the second SetGlobalCounterAction does:

The final SetGlobalCounterAction uses the TimerTrigger to reset the counter every 5 seconds:

The only thing left to do is add the IncrementGlobalCounterAction to the background image to increment the counter by 1:

So with 5 Action instances, 3 Trigger types, 1 Storyboard, and 0 lines of code we were able to quickly add this feature to the game.

Source Code

Demo

Hidden Object: Episode 13 – Give me a Hint

Mark Tucker — Tue, 17 Nov 2009 19:12:44 +0000

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

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.

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.

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

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

Mark Tucker — Mon, 09 Nov 2009 15:19:11 +0000

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

Mark Tucker — Tue, 27 Oct 2009 14:07:09 +0000

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:

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.

Source Code

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

Mark Tucker — Tue, 06 Oct 2009 00:05:27 +0000

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:

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("", 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:

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.