Question

I’m working on a WPF application that displays a XAML object and I wish to zoom in and out from the XAML object by using the mouse wheel. I could create a nice smooth transition of the XAML object for the mouse wheel but I cannot understand how to differentiate between the mouse wheel direction. I found out that I should use the Trigger’s properties, but I can’t find how to do this for the mouse wheel.

This is the code I have so far, and it fires for any mouse wheel action (either up or down):

<UserControl.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseWheel" >
        <BeginStoryboard Storyboard="{StaticResource OnMouseWheel1}"/>
    </EventTrigger>
</UserControl.Triggers>

Thanks to all you helpers out there 🙂

Answer 1

You can use WPF XAML Canvas this may help to implement a good storyboard. Check http://msdn.microsoft.com/en-us/library/cc294753.aspx

This is a short example, you may need to use DoobleAnimation.

<Canvas.Resources>
 <Storyboard x:Name="ZoomStoryboard">
       <DoubleAnimation x:Name="ZoomAnimationX"
                        Storyboard.TargetName="Workspace"
                    Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleX"
                             Duration="0:0:0.2"/>
            <DoubleAnimation x:Name="ZoomAnimationY"
                             Storyboard.TargetName="Workspace"
                             Storyboard.TargetProperty="Canvas.RenderTransform.ScaleTransform.ScaleY"
                             Duration="0:0:0.2"/>
        </Storyboard>
    </Canvas.Resources>

For me it is better to develop that a code behind.