Using MouseWheel on Silverlight 4.0
MouseWheel adalah event baru yang dapat dimiliki pada Silverlight 4.0. Apabila ingin menggunakan fitur ini maka cukup tambahkan event handler MouseWheel pada “tag” UserControl pada file XAML.
Maka secara default Visual Studio akan membuatkan method yang akan dipanggil ketika event ini “terpanggil”. Pada contoh di atas nama method yang akan “dipanggil” adalah UserControl_MouseWheel.
Sebagai contoh kasus misalnya ketika event ini terpanggil akan dituliskan angka yang bertambah sebanyak scoll dilakukan. Maka pada XAML akan ditulis sebagai berikut.
1: <UserControl x:Class="SilverlightApplication2.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: mc:Ignorable="d" MouseWheel="UserControl_MouseWheel"
7: d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
8:
9: <Grid x:Name="LayoutRoot" Background="White">
10: <dataInput:Label Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="120" />
11: </Grid>
12: </UserControl>
Sedangkan pada “kode belakang” dari XAML ini akan ditulis sebagai berikut :
1: using System.Windows.Controls;
2: using System.Windows.Input;
3:
4: namespace SilverlightApplication2
5: {
6: public partial class MainPage : UserControl
7: {
8: int valLabel = 0;
9:
10: public MainPage()
11: {
12: InitializeComponent();
13: }
14:
15: private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
16: {
17: valLabel++;
18: label1.Content = valLabel.ToString();
19: }
20: }
21: }
Dari kode di atas sudah jelas, angka pada label1 akan selalu bertambah ketika scroll dilakukan. Bagaimana kalau yang diinginkan adalah sebagai berikut :
- bila scroll ke depan maka angka akan bertambah.
- jika scroll ke belakang maka angka akan berkurang.
Untuk tujuan tersebut dapat digunakan kode seperti berikut :
1: private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
2: {
3: if (e.Delta > 0)
4: {
5: valLabel++;
6: }
7: else
8: {
9: valLabel--;
10: }
11: label1.Content = valLabel.ToString();
12: }
Kita dapat menggunakan property Delta yang dimiliki oleh objek dari MouseWheelEventArgs. Bila nilah property Delta > 0 artinya scroll ke depan, begitu juga sebaliknya.
Contoh lain adalah memanfaatkan event MouseWheel untuk menggerakkan tombol pada Slider, berikut contoh kode-nya :
<UserControl x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" MouseWheel="UserControl_MouseWheel"
d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
<Grid x:Name="LayoutRoot" Background="White">
<Slider Height="23" HorizontalAlignment="Left" Margin="12,46,0,0" Name="slider1" VerticalAlignment="Top" Width="100" />
</Grid>
</UserControl>
dan berikut isi dari method UserControl_MouseWheel.
private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
slider1.Value += slider1.LargeChange;
}
else
{
slider1.Value -= slider1.LargeChange;
}
}
Contoh lainnya adalah memanfaatkan event ini untuk memperbesar dan memperkecil gambar.
Dengan menggunakan MouseWheel maka nilai Lebar dan Tinggi akan berubah seiring dengan perubahan ukuran gambar.
<UserControl x:Class="SilverlightApplication2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" MouseWheel="UserControl_MouseWheel" Loaded="UserControl_Loaded"
d:DesignHeight="300" d:DesignWidth="400" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input">
<Grid x:Name="LayoutRoot" Background="White">
<Image Height="95" HorizontalAlignment="Left" Margin="12,51,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="/SilverlightApplication2;component/reza.jpg" />
<dataInput:Label Height="18" HorizontalAlignment="Left" Margin="10,10,0,0" Name="label1" VerticalAlignment="Top" Width="48" Content="Lebar :" />
<dataInput:Label Height="18" HorizontalAlignment="Left" Margin="64,10,0,0" Name="Lebar" VerticalAlignment="Top" Width="39" />
<dataInput:Label Height="16" HorizontalAlignment="Left" Margin="123,12,0,0" Name="label2" VerticalAlignment="Top" Width="44" Content="Tinggi :" />
<dataInput:Label Height="16" HorizontalAlignment="Left" Margin="173,12,0,0" Name="Tinggi" VerticalAlignment="Top" Width="37" />
</Grid>
</UserControl>
Dan berikut isi kode pada MainPage.xaml.cs :
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace SilverlightApplication2
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void UserControl_MouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
image1.Height++;
image1.Width++;
}
else
{
image1.Height--;
image1.Width--;
}
Tinggi.Content = image1.Height.ToString();
Lebar.Content = image1.Width.ToString();
}
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
Tinggi.Content = image1.Height.ToString();
Lebar.Content = image1.Width.ToString();
}
}
}