Silverlight 3 - MouseWheel

Una de las grandes novedades y además de las más solicitadas que trajo Silverlight 3 RTW, es el soporte a la “ruedita” del mouse o mejor conocido como MouseWheel.

Voy a mostrar un sencillo ejemplo de cómo implementar esta nueva funcionalidad.

Vamos a empezar teniendo una imagen en nuestra aplicación a la cual le vamos a cambiar la escala cada vez que hagamos scroll con el mouse.

Primero agregamos la imágen al XAML, y ya vamos a tener la propiedad que vamos a modificar que es ScaleTransform.

<UserControl x:Class="MouseWheel.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" Width="600" d:DesignHeight="600">
    <Grid x:Name="LayoutRoot" Background="Gray">
 
        <Border CornerRadius="5"
                BorderBrush="DarkGray"
                BorderThickness="2"
                Background="White"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
 
            <Grid Margin="10" Width="100" Height="100">
                <Image Source="/images/silverlight.jpg"></Image>
            </Grid>
 
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ZoomScaleTransform" />
                </TransformGroup>
            </Border.RenderTransform>
 
        </Border>
 
    </Grid>
</UserControl>

 Ahora vamos a lo interesante, que es agregar el handler del evento, el cual es MouseWheelEventHandler.

LayoutRoot.MouseWheel += 
                new MouseWheelEventHandler(LayoutRoot_MouseWheel);

 Lo que hicimos fue agregar un evento que se llama cada vez que hacemos scroll con el mouse, mientras el foco lo tenga la aplicación.

Ahora vamos a ver el evento que tiene la funcionalidad.

public void LayoutRoot_MouseWheel(object sender, MouseWheelEventArgs e)
{
    if (e.Delta > 0)
    {
        ZoomScaleTransform.ScaleX = ZoomScaleTransform.ScaleX + 0.1;
        ZoomScaleTransform.ScaleY = ZoomScaleTransform.ScaleY + 0.1;
    }
    else
    {
        ZoomScaleTransform.ScaleX = ZoomScaleTransform.ScaleX - 0.1;
        ZoomScaleTransform.ScaleY = ZoomScaleTransform.ScaleY - 0.1;
    }
}
Como vemos, la propiedad más importante es Delta, que nos indica el tipo de scroll que hicimos.

Luego con ese valor podemos hacer lo que queramos, en este caso modificamos la escala según si agrando o achico la imágen.

Pueden descargar el proyecto aquí.

No Comments