Project3DToMouse, a mouse powered 3D projection behavior

Behaviors were a great addition for Silverlight 3 and just have become better for Silverlight 4. One of my playgrounds at home have been Projection animation experiments for providing  advanced – or crazy – interactions and effects… The main thing is this is not simple to implement and it’s hard to let it be “fine tuned” by a designer or even by yourself, as who wants to recode everything if you can get a great interface for personalizing your effects without much effort?

Thus I’ve made the 3D projection to mouse behavior.

You can try it out here:

http://www.brainsiders.com/playground/Project3DToMouse/default.html

What does it do?

• It animates a the projection of a FrameworkElement on the X and Y axis in the proportion of the position of the mouse regarding another FrameworkElement, normally the main Canvas, LayoutRoot.
• It calculates the projection and applies it with certain amplitude degrees for the X and Y axis. Why not only one amplitude? because you might want your content not to turn the same degrees horizontally as it does vertically, screens aren’t squared and maybe you want a concrete effect  (only horizontal, or only vertical).
• Also, it does this as an animation on a configurable time and on a configurable EasingFunction, which is good for a designer, so you can make it move smoothly or in a funny elastic way :).
• I have set up a flag to decide if you want to make the orientation of the projection towards the mouse, facing it or against it.
• It also has a nice animation to go back to the starting position if the mouse gets out of the application.

Going to the code, everything is categorized and with descriptions to help it being used, adapts well to FrameworkElements that have a fixed or dynamic height and width and the storyboard is generated on the go in memory so it is not possible to step over other animation, this meaning that this behavior can be applied to more than one element in the same UserControl.

The wiring up is done on the OnAttached and OnDetaching events, the Invoke does nothing so it could be deleted.. I have used the TargetedTriggerAction because I need the pick up the behavior from a control that takes the whole screen and apply the projection effect to another control, preferably smaller to appreciate the effect. It would be good if we could deactivate the “invoke” so that designers would not get confused.. just my 5 cents.. 😉

On how to use it, this is easy, copy the Project2Mouse.cs file to your project and that’s it. At least it is easy for a developer, for a designer it would be cool if we could configure a behaviors folder and leave there all the behaviors encapsulated as “dll”, so Blend would load and show up the behaviors blend has, the ones on the project and the ones at the folder… then it would add references as needed at the project.

Other thing I am finding difficult is that the current Behaviors interface is good for having 10 to 20 Behaviors, it turns difficult to locate quickly a behavior. It would be good if they could be categorized or tagged (author, description, category and tags (1 .. n would be great).

To get it, it is published at the Microsoft Expression Behaviors Gallery, here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse

I am thinking on publishing  some other interaction behaviors – after cleaning a bit the mess that happens when playing with different behaviors until you get the desired effect, that is..

If you happen to have an idea of an interesting behavior I’d be happy to hear it and try to implement it :).