MouseBinding the mousewheel to zoom in WPF and MVVM

Question

OK, I've figured out how to get my Grid of UI elements to zoom, by using LayoutTransform and ScaleTransform. What I don't understand is how I can get my View to respond to CTRL+MouseWheelUp\Down to do it, and how to fit the code into the MVVM pattern.

My first idea was to store the ZoomFactor as a property, and bind to a command to adjust it.

I was looking at something like:

<UserControl.InputBindings>
 <MouseBinding Command="{Binding ZoomGrid}" Gesture="Control+WheelClick"/>
</UserControl.InputBindings>

but I see 2 issues:

1) I don't think there is a way to tell whether the wheel was moved up or down, nor can I see how to determine by how much. I've seen MouseWheelEventArgs.Delta, but have no idea how to get it.

2) Binding to a command on the viewmodel doesn't seem right, as it's strictly a View thing.

Since the zoom is strictly UI View only, I'm thinking that the actual code should go in the code-behind.

How would you guys implement this?

p.s., I'm using .net\wpf 4.0 using Cinch for MVVM.

Answer 1

the real anwser is to write your own MouseGesture, which is easy.

<MouseBinding Gesture="{x:Static me:MouseWheelGesture.CtrlDown}"  
              Command="me:MainVM.SendBackwardCommand" />

public class MouseWheelGesture : MouseGesture
{
    public MouseWheelGesture() : base(MouseAction.WheelClick)
    {
    }

    public MouseWheelGesture(ModifierKeys modifiers) : base(MouseAction.WheelClick, modifiers)
    {
    }

    public static MouseWheelGesture CtrlDown =>
        new(ModifierKeys.Control) { Direction = WheelDirection.Down };

    public WheelDirection Direction { get; set; }

    public override bool Matches(object targetElement, InputEventArgs inputEventArgs) =>
        base.Matches(targetElement, inputEventArgs)
        && inputEventArgs is MouseWheelEventArgs args
        && Direction switch
        {
            WheelDirection.None => args.Delta == 0,
            WheelDirection.Up => args.Delta > 0,
            WheelDirection.Down => args.Delta < 0,
            _ => false,
        };
}

public enum WheelDirection
{
    None,
    Up,
    Down,
}

Answer 2

I would suggest that you implement a generic zoom command in your VM. The command can be parameterized with a new zoom level, or (perhaps even simpler) you could implement an IncreaseZoomCommand and DecreaseZoomCommand. Then use the view's code behind to call these commands after you have processed the event arguments of the Mouse Wheel event. If the delta is positive, zoom in, if negative zoom out.

There is no harm in solving this problem by using a few lines of code behind. The main idea of MVVM is that, you are able to track and modify nearly the complete state of your view in an object that does not depend on the UI (enhances the testability). In consequence, the calculation of the new viewport which is the result of the zoom should be done in the VM and not in code behind.

The small gap of testability that exists in the code behind can either be disregarded or covered by automatic UI tests. Automatic UI tests, however, can be very expensive.

Answer 3

If you don't want to use code behind you can use the EventToCommand functionality of mvvm light:

View:

 <...
     xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
 xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
     ...> 
<i:Interaction.Triggers>
         <i:EventTrigger EventName="PreviewMouseWheel">
             <cmd:EventToCommand Command="{Binding
     Path=DataContext.ZoomCommand,
     ElementName=Root, Mode=OneWay}"
         PassEventArgsToCommand="True"   />
         </i:EventTrigger> </i:Interaction.Triggers>

ViewModel:

ZoomCommand = new RelayCommand<RoutedEventArgs>(Zoom);
...
public void Zoom(RoutedEventArgs e)
{
    var originalEventArgs = e as MouseWheelEventArgs;
    // originalEventArgs.Delta contains the relevant value
}

I hope this helps someone. I know the question is kind of old...