Friday, July 04, 2008
Trusted by over 7 million customers!
Use the Mouse Wheel in a Silverlight application.
Minimize
Location: BlogsSilverlight Code & Controls   
Posted by: Ken Dopierala Jr.10/17/2007 9:28 AM
In this project we are going to explore how to capture the mouse wheel with Javascript and pass information back to our Silverlight application to see if the mouse wheel was activated over a part of our application that can react to it.

 

Update - Just to clear up any confusion, this isn't meant to be a color picker.  It was designed as a project template for anyone needing Mouse Wheel support.  Simply download the solultion and load into VS2008.  In the Javascript the only line you'll need to change is :

var intReturn = RTLWheel.Content.RTL.RTL_OnMouseRoll(...);

Change .RTL. in the line above to be the name of the script object you registered in the Page_Loaded function using the RegisterScriptableObject method.

In the Silverlight control you then just need to the change RTL_OnMouseRoll function to check for which of your Silverlight objects the mouse wheel is over (instead of the colored rectangles the demo project checks for) and then decide how to handle the information based on your application.

In this project we are going to explore how to capture the mouse wheel with Javascript and pass information back to our Silverlight application to see if the mouse wheel was activated over a part of our application that can react to it.

The first thing we need to do is capture the mouse wheel event via Javascript.  You can view this code in the RTLMouseWheelCapture.aspx.js file.  For Internet Explorer we attach our function to the onmousewheel event, for Firefox we attach our function to the DOMMouseScroll event.  Now whenever the event occurs it will fire the RTL_OnMouseWheelChange javascript function. 

This function does 2 very important things.  First it figures out where exactly in the web page this even occurs, it does that by calling two helper functions RTL_PageOffsetX and RTL_PageOffsetY.  These functions are necessary because they account for all of the parent offsets of the Silverlight app control (i.e. Divs) as well as taking into account whether or not the page has been scrolled.

The next thing the RTL_OnMouseWheelChange function does is call the RTL_OnMouseRoll function of our Silverlight app.  This function checks to see if the event occured over any of the colored boxes first, if not it checks if it occured anywhere over our Silverlight canvas.  If true in either case it updates the necessary color(s) and then returns a 1 to let the RTL_OnMouseWheelChange function that the Silverlight app handled the mouse wheel so it should dismiss the Mouse Wheel event and not pass it back to the web app.  If neither of the conditions were met then the Silverlight app returns a -1 to let the function know that it should let the browser handle the Mouse Wheel event as the user was probably trying to scroll the page or over a list box or something.

And that's all there is to it!

You can view a demo and download the source here: http://www.RealTimeSilverlight.com

Feel free to email me with any feedback: Ken@RTLogicSystems.Com

 

 

Copyright ©2007 Ken Dopierala Jr.
Permalink | Trackback

Your name:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment  Cancel 
Nationwide Freight Trucks - Reefer - Expedited - LTL - Truck Load - Brokerage

Free Online Dating Coupons (Match.Com, Date, PerfectMatch, Lavalife and More)



Blog_Archive
Minimize

Print  

Nationwide Freight Trucks Reefer - Expedited - LTL Truck Load - Brokerage

Who is looking for you online?
Find out now....


Click Here to get 1 month FREE Dedicated Hosting
Trusted by over 7 million customers!

Privacy Statement  |  Terms Of Use
Copyright 2007 by RTLogicSystems.Com