Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Menangkap MouseWheel Event dengan Silverlight 2

Pada Silverlight 1.0 saya pernah menulis bagaimana mendeteksi event mousewheel (scroll) di Hacking Mouse Scroll Event pada Silverlight 1.0. Setelah keluarnya Silverlight 2, pemprograman tidak lagi menggunakan JavaScript sehingga cara tersebut sudah tidak lagi bisa digunakan. Untungnya Silverlight 2 memiliki mekanisme untuk menangkap event yang terjadi di HTML object yaitu System.Windows.Browser.HtmlPage.Window.AttachEvent. Dengan method tersebut, kita bisa tangkap event untuk mousewheel.

Event mousewheel masing-masing browser yang didukung oleh Silverlight memiliki perbedaan yaitu:

  • Mozilla dan Safari menggunakan event "DOMMouseScroll" pada element window
  • IE menggunakan event "onmousewheel" pada element document
  • Opera menggunakan event "onmousewheel" pada element window.

Perbedaan ini mengharuskan untuk menangkap ketiga event tersebut dan menghandle di satu buah event handler.

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

Setelah event diregister ke handler yang sama, ada lagi perbedaan masing-masing browser pada waktu menangkap nilai property mouse wheel.

  • Pada IE dan Opera, nilai diambil dari property "wheelDelta".
  • Pada Mozilla dan Safari, nilai diambil dari property "detail".

Selain property-nya berbeda nilai yang dihasilkan juga berbeda.

  • Pada IE dan Opera, setiap scroll akan menghasilkan nilai kelipatan +120 atau -120. Pada Opera terjadi perbedaan dengan IE mengenai tanda plus/minus. Opera menghasilkan nilai kebalikan dari IE. Oleh karena itu, untuk menyamakan nilai keluaran, pada Opera tandanya harus dibalik.
  • Pada Mozilla dan Safari, setiap scroll akan menghasilkan nilai kelipatan +3 atau -3

Perbedaan nilai antara masing-masing browser perlu disamakan. Untuk menyamakan, digunakan +1 atau -1 sehingga penanganan di aplikasi menjadi lebih mudah.

private void OnMouseWheel(object sender, HtmlEventArgs args) { double delta = 0; ScriptObject e = args.EventObject; if (e.GetProperty("detail") != null) { // Mozilla and Safari delta = ((double)e.GetProperty("detail")); } else if (e.GetProperty("wheelDelta") != null) { // IE and Opera delta = ((double)e.GetProperty("wheelDelta")); // In Opera 9, delta differs in sign as compared to IE. if (HtmlPage.BrowserInformation.UserAgent.IndexOf("opera") > -1) delta *= -1; } delta = Math.Sign(delta); if (MouseWheelScroll != null) MouseWheelScroll(new MouseWheelEventArgs(delta)); }

Nilai delta dalam method di atas yang kemudian diambil dalam aplikasi. Supaya method-method ini dapat dipakai di beberapa tempat (reusable). Perlu dibungkus dalam class dan nilai delta dilempar dalam event. Kode selengkapnya dapat dilihat di bawah.

using System; using System.Windows.Browser; /// <summary> /// Delegate for the MouseWheelScroll event. /// </summary> /// <param name="args">Event data for the MouseWheelScroll event.</param> public delegate void MouseWheelHandler(MouseWheelEventArgs args); /// <summary> /// Event data for the MouseWheelScroll event. /// </summary> public class MouseWheelEventArgs : EventArgs { private readonly double m_delta; public double Delta { get { return m_delta; } } public MouseWheelEventArgs(double delta) { m_delta = delta; } } /// <summary> /// Provides access to the browser-generated mouse wheel scrolling events. /// </summary> public class MouseWheelListener : IDisposable { public event MouseWheelHandler MouseWheelScroll; public MouseWheelListener() { HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel); HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel); HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel); } private void OnMouseWheel(object sender, HtmlEventArgs args) { double delta = 0; ScriptObject e = args.EventObject; if (e.GetProperty("detail") != null) { // Mozilla and Safari delta = ((double)e.GetProperty("detail")); } else if (e.GetProperty("wheelDelta") != null) { // IE and Opera delta = ((double)e.GetProperty("wheelDelta")); // In Opera 9, delta differs in sign as compared to IE. if (HtmlPage.BrowserInformation.UserAgent.IndexOf("opera") > -1) delta *= -1; } delta = Math.Sign(delta); if (MouseWheelScroll != null) MouseWheelScroll(new MouseWheelEventArgs(delta)); } /// <summary> /// Detaches from the browser-generated scroll events. /// </summary> public void Dispose() { HtmlPage.Window.DetachEvent("DOMMouseScroll", OnMouseWheel); HtmlPage.Window.DetachEvent("onmousewheel", OnMouseWheel); HtmlPage.Document.DetachEvent("onmousewheel", OnMouseWheel); } }

Semoga bermanfaat.


Categories: Silverlight
Permalink | Comments (13) | Post RSSRSS comment feed