MouseOver3D – a 3D Silverlight Interaction Design Pattern


A Design Interaction Pattern for 3D Interaction – In this case the effect provided is a 3D Mouse MouseOver that will make the object with the behavior attached to increase or decrease its Z axis if the mouse is over or outside it.

When the mouse is over, it will raise.


When the mouse goes out, it will lower down…

The configuration is easy:

The usual on a TargetedTriggerAction behavior, a general hover offset which indicates how much it will adjust over the Z axis to provide the hover effect and then two configurable animations, for when it goes up and when it goes down.

For having a funny test, I’ve added some logos of my user group inside a WrapPanel and – of course – an attached FluidMoveBehavior just because I love this new functionality and going to what matters here, one MouseOver3D behavior to each logo. i have toyed a bit with each one, so when you execute you can see the effect there, various Z offsets, 80, 120 and more.. and also I’ve applied some easings as Cubic, Bounce, Elastic… also, some of the logos have its axis a bit changed so you can see it respects their rotation and moves accordingly.

you can test it here:

And you can get the code here:

Hope you like it and, in short will publish more 3D Behaviors, based on Interaction Design Patterns I have thought for 3D.

If you want to see some of them applied together, please go see   and – I’d love to get your feedback… To note that I plan to release all of the behaviors implemented there and even some more that I still haven’t showed up there or even implemented… also I’m pretty open to hear your suggestions on new interactions you might think of :).

Ah, for the curious ones, the site is the Barcelona’s user group and now it is showing off an event for next month.. so if you want to come, this event will be for updating the developers firmware for the .net Framework 4.0, visual studio 2010, EF4.0, Silverlight 4.0 and ASP.NET 4.0… the only thing is it will be in Barcelona and in Spanish :P.

Happy coding :)!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s