Perspective 3D, ElementName binding and MouseDragElementBehavior

You  remember my last example SL3_MouseDragElementBehavior_Example

Now I will make a very simple example of Perspective 3D.


The basic idea is that you have a object that you can now rotate on different axes in Silverlight3 and by doing so you will create the 3d perspective .


To see how easy it is, I will take my previews example and make-it 3d.


Here is the live Example.

Put the mouse in the rectangle and press to rotate, or scroll to zoom.

You can also drag the controls.

And now the details:


First I will add three sliders for the rotation X, Y and GlobalOffsetZ (Zoom).

Than I will bind them to the object that I will use to rotate.

The Binding is done like this:



How did I know this ?

First I’ve rotated from the Projection panel


And I notest that the property named is RotationY .

Or you can use the intelisense


And the I’ve named the PanelProjection  "rotation" .

Than I’ve added the slider and make the binding like this:

 Value="{Binding RotationY, ElementName=rotation, Mode=TwoWay}"

Because the rotation I want is 360* I must set :




For the RotationY and the GlobalOffsetZ I’ve done in the same way.

You can play with the sliders now.


Now let’s spin this 3D with a Mouse Pad.

I’ve added a rectangle and transform it to a mouse pad, and added some code to make the 3D rotation with the mouse only, and the zoom from the scroll roll from the mouse.


I will not explain all this in details because will make this long and boring .

The idea is to change the values of the sliders function of the mouse position and the Zoom Slider by the scroll from the mouse.


After you play with the 3d movement  try to drag the controls …nice ha !


After all the coding, you may want use this


And it will make you’re code to look like this

Here is the Code :





public partial class MainPage : UserControl




bool isInPad = false;

bool isMowseDown = false;





public MainPage()









private void Button_Click(object sender, System.Windows.RoutedEventArgs e)


SliderX.Value =0;

SliderY.Value =0;


private void Rectangle_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)


isInPad = true;


private void Rectangle_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)


isInPad = false;

isMowseDown = false;


private void Rectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)


isMowseDown = true;


private void Rectangle_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)


isMowseDown = false;


private void Rectangle_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)



if (isInPad && isMowseDown)


double ValueX, ValueY = 0.0;

ValueX = e.GetPosition(Pad).X;

ValueY = e.GetPosition(Pad).Y;

SliderX.Value = ValueX * 3.6;

SliderY.Value = ValueY * 3.6;


textx.Text = SliderX.Value.ToString();

texty.Text = SliderY.Value.ToString();



private void Rectangle_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)


if (e.Delta>=0)


Zoom.Value += 100;




Zoom.Value -= 100;


textz.Text = Zoom.Value.ToString();







Here is the complete Source :SL3_3D_MouseDragElementBehavior_Example.rar

Have a 3D Day !

  1. Leave a comment

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 )

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s

%d bloggers like this: