Below is an example showing a simple zoom in / out interaction controlled via the mouse wheel, a slider and some buttons. *Please note, mouse wheel functionality not currently working in the Google Chrome browser. Due to the Silverlight example being displayed within an iFrame you will experience issues with scrolling, to open the example in a new window click here.

First off I add the following reference at the top of my C# file so that we can interact with the browser;

using System.Windows.Browser;

To then listen for the Mouse wheel interaction I set events in the browser using the following piece of C#;

HtmlPage.Window.AttachEvent(“DOMMouseScroll”, OnMouseWheel);
HtmlPage.Window.AttachEvent(“onmousewheel”, OnMouseWheel);
HtmlPage.Document.AttachEvent(“onmousewheel”, OnMouseWheel);

I can then check for a value to see if the mouse wheel is being moved forward or backward using the following Method;

private void OnMouseWheel(object sender, HtmlEventArgs args)
{
double mouseDelta = 0;
ScriptObject e = args.EventObject;

// Mozilla and Safari
if (e.GetProperty(“detail”) != null)
{
mouseDelta = ((double)e.GetProperty(“detail”));
}
// IE and Opera
else if (e.GetProperty(“wheelDelta”) != null)
mouseDelta = ((double)e.GetProperty(“wheelDelta”));
mouseDelta = Math.Sign(mouseDelta);
}

This now gives me a value in the form of ‘mouseDelta’ which can be applied to what ever you want your interaction to be. In this case we are controlling the scale factor of a canvas.

To limit the scale factor I run a check to see if the scale value has gone under 1 or over 10 and if so reset the value to the minimum or maximum amount;

if (ScaleFactor.ScaleX < 1)
{
ScaleFactor.ScaleX = 1;
ScaleFactor.ScaleY = 1;
}

if (ScaleFactor.ScaleX > 10)
{
ScaleFactor.ScaleX = 10;
ScaleFactor.ScaleY = 10;
}

I also check where the mouse cursor is and focus the zoom in / out on that position. I do this by storing the mouse co-ordinates everytime the user moves their mouse and then changing the ‘RenderTransformOrigin’ value;

//get mouse co-ordinates
void zoomArea_MouseMove(object sender, MouseEventArgs e)
{
pt = e.GetPosition(zoomArea);
}

//change the RenderTransformOrigin
zoomArea.RenderTransformOrigin = new Point(pt.X / zoomArea.Width, pt.Y / zoomArea.Height);

Get the code

You can download the above example here.

The below is a 2 player tank game built for the Silverlight 2 plug-in. Players are assigned keys to separate sides of the keyboard. Each player will need to master controlling each set of tracks manually and can also turn their turret aiming to shoot one another. Each time a players tank has lost its life it will be reset to its default position and a point awarded to the other player.

This game has been submitted to the Mashooo Silverlight game competition at www.mashooo.com.

Click one of the screen shots or here to play!

Future improvements

I plan on adding random power ups that can be picked up by driving into them. Power ups can include Increase to rate of fire, increase to fire power, increase to health, increase to speed, shields and temporary invincibility.

Here at Metia, we have produced an all singing, all dancing, eMagazine platform built with Microsoft Silverlight called ‘PageLife‘. The platform was launched yesterday with its first commercial application launched alongside to support the launch of SEAT’s new Exeo model.

View the Seat PageLife experience here.

The platform shows a massive array of interactive elements including the ability to drag and turn pages back and forth, zoom in and out on any element and pan around allowing the user maximum visibilty of the content on offer.