Silverlight 1.0 hanya memiliki mouse yang terbatas yaitu MouseMove, MouseEnter, MouseLeave, MouseLeftButtonDown dan MouseLeftButtonUp. Dari kelima event yang dimiliki oleh Silverlight 1.0 tersebut tidak bisa untuk menangkap event yang terjadi pada waktu scroll mouse berputar. Mouse scroll dapat diakali (hack) dengan memanfaatkan elemen HTML <select> dengan event onchange. Saat fokus pada element <select> dan scroll mouse diputar, index pada element tersebut akan berubah. Perilaku ini dapat dimanfaatkan untuk menangkap event scroll pada mouse.
Berukut langkah-langkah untuk melakukan hack terhadap event mouse scroll.
Buat halaman HTML yang dijadikan sebagai host Silverlight dengan nama file zoom.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" > <
head> <title>Zoom by Scroll Demo</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="zoom.html.js"></script> <script type="text/javascript" src="zoom.xaml.js"></script>
</head> <
body> <div id="SilverlightPlugInHost" style="border: solid 1px #7f7f7f; display: inline;"> </div> <script type="text/javascript">
createSilverlight();
</script>
</body></
html>
Buat file XAML untuk menampilkan sebuah foto dengan nama file zoom.xaml.
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image x:Name="Photo" Source="images/Foto002.jpg">
<Image.RenderTransform>
<ScaleTransform x:Name="ZoomTransform" ScaleX="0.8" ScaleY="0.8" />
</Image.RenderTransform>
</Image>
</Canvas>Buat code-behind JavaScript untuk membuat object Silverlight dengan nama file zoom.html.js.
function createSilverlight()
{
var zoom = new Masykur.Demo.Zoom();
Silverlight.createObjectEx({
source: 'zoom.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '800',
height: '600',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(zoom, zoom.handleLoad)
},
context: null
});
}
if (!window.Silverlight)
window.Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}Nah terakhir adalah code-behind XAML untuk menangani event object Silverlight dengan nama file zoom.xaml.js. Code ini yang akan digunakan untuk melakukan hack terhadap event mouse scroll.
if (!window.Masykur) {
window.Masykur = {};
}
Masykur.registerNamespace = function (ns)
{
var nsParts = ns.split(".");
var root = window;
for(var i=0; i<nsParts.length; i++) {
if(typeof root[nsParts[ i ]] == "undefined") {
root[nsParts[ i ]] = new Object();
}
root = root[nsParts[ i ]];
}
}
Masykur.registerNamespace("Masykur.Demo");
Masykur.Demo.Zoom = function()
{
}
Masykur.Demo.Zoom.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
this.userContext = userContext;
this.rootElement = rootElement;
this.photo = rootElement.findName('Photo');
this.zoomTransform = rootElement.findName('ZoomTransform');
this.photo.addEventListener("MouseMove", Silverlight.createDelegate(this, this.handleMouseMove));
this.createZoomScroll();
},
handleMouseMove : function(sender, eventArgs) {
this.selZoom.focus();
},
zoom : function(scale) {
this.zoomTransform.scaleX = scale;
this.zoomTransform.scaleY = scale;
},
createZoomScroll : function() {
this.selZoom = document.createElement("select");
for (var i = 0; i < 19; i++) {
var opt = document.createElement("option");
this.selZoom.appendChild(opt);
}
this.selZoom.selectedIndex = 16;
var obj = this;
this.selZoom.onchange = function() {
var _zoom = 0.1 + (this.selectedIndex / 20);
obj.zoom(_zoom);
};
var bd = document.getElementsByTagName('body');
bd[0].appendChild(this.selZoom);
// hide scroll element
this.selZoom.style.position = 'absolute';
this.selZoom.style.top = -100;
}
}Inti dari hacking ini adalah memanfaatkan elemen HTML <select>. Pada waktu Silverlight di-load, akan menginisialisasi semua elemen yang ada dan diakhir inisialisasi dibuat sebuah elemen <select>. Pembuatan elemen <select> dilakukan pada fungsi createZoomScroll(). Buat elemen <select> secara runtime menggunakan method document.createElement("select") dan tambahkan option sebanyak yang diperlukan. Setelah elemen <select> dibuat, tempatkan pada halaman dan sembunyikan dengan meletakkan posisinya pada lokasi negatif. Untuk membuat agar elemen <select> selalu di-focus, pada event MouseMove, dipanggil fungsi focus(). Selanjutnya buat event handler untuk event onchange pada element <select> dan panggil fungsi zoom() untuk melakukan zooming.
Demikian tips hacking Silverlight ini, semoga bermanfaat.