Zoom-In and Zoom-Out An Image with Mouse Wheel in Silverlight 4

Introduction

In this article we will see how we can zoom in or zoom out an image with mouse wheel scroll in Silverlight 4.

Creating Silverlight Application

Fire up Visual Studio 2010 and create a Silverlight Application, name the solution as MouseWheelSample.



Let's add an Image control.





In Silverlight 4 we have a new event handler and that is called MouseWheel. So let's subscribe the event for the image.



Now that we have subscribed the event. As you see in the above code display we have the Property called Delata which will be added to the width and height respectively to give the new values and then we are assigning the value.

We are also checking the minimum width and height values.

Let's run the application and click on the image first other wise the focus is not set.



The above image displays the default state when Mouse wheel is not triggered.

Now let's scroll the mouse.



And we have the zoom in effect for the image when we mouse scroll.

That's it.

Hope this article helps.