title: WPF Zoom Canvas Center on Mouse Position
body: <pre><code>&lt;utils:ScrollViewer x:Name="ImageViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="2"                                                                   
                                         CurrentHorizontalOffset="{Binding ScrollHorizontalValue, Mode=TwoWay}"
                                         CurrentVerticalOffset="{Binding ScrollVerticalValue, Mode=TwoWay}"                                        
                                         &gt;
                      &lt;i:Interaction.Triggers&gt;
                          &lt;i:EventTrigger EventName="PreviewMouseWheel"&gt;
                              &lt;cmd:EventToCommand Command="{Binding MouseWheelZoomCommand}" PassEventArgsToCommand="True"/&gt;
                          &lt;/i:EventTrigger&gt;
                          &lt;i:EventTrigger EventName="ScrollChanged"&gt;
                              &lt;cmd:EventToCommand Command="{Binding ScrollChangedCommand}" PassEventArgsToCommand="True"/&gt;
                          &lt;/i:EventTrigger&gt;
                      &lt;/i:Interaction.Triggers&gt;
                      &lt;Grid Background="{StaticResource ThatchBackground}" RenderTransformOrigin="0.5,0.5"&gt;
                          &lt;ItemsControl ItemsSource="{Binding CanvasItems}" ItemTemplate="{StaticResource templateOfROI}"&gt;
                              &lt;ItemsControl.ItemsPanel&gt;
                                  &lt;ItemsPanelTemplate&gt;
                                      &lt;Canvas x:Name="BackPanel"
                                          Width="{Binding DataContext.ImageWidth, ElementName=MainGrid}" 
                                          Height="{Binding DataContext.ImageHeight, ElementName=MainGrid}"
                                          ClipToBounds="True"&gt;
                                          &lt;Canvas.Background&gt;
                                              &lt;ImageBrush x:Name="BackImage"
                                                          ImageSource="{Binding DataContext.SelectedImage.Path, ElementName=MainGrid}"/&gt;
                                          &lt;/Canvas.Background&gt;
  
                                          &lt;i:Interaction.Triggers&gt;
                                              &lt;i:EventTrigger EventName="MouseRightButtonDown"&gt;
                                                  &lt;cmd:EventToCommand Command="{Binding DataContext.MouseRightCommand, ElementName=MainGrid}"/&gt;
                                              &lt;/i:EventTrigger&gt;
                                              &lt;i:EventTrigger EventName="MouseLeftButtonDown"&gt;
                                                  &lt;cmd:EventToCommand Command="{Binding DataContext.MouseMoveStartCommand, ElementName=MainGrid}" PassEventArgsToCommand="True"/&gt;
                                              &lt;/i:EventTrigger&gt;
                                              &lt;i:EventTrigger EventName="MouseMove"&gt;
                                                  &lt;cmd:EventToCommand Command="{Binding DataContext.MouseMovingCommand, ElementName=MainGrid}" PassEventArgsToCommand="True"/&gt;
                                              &lt;/i:EventTrigger&gt;
                                              &lt;i:EventTrigger EventName="MouseRightButtonUp"&gt;
                                                  &lt;cmd:EventToCommand Command="{Binding DataContext.MouseMoveEndCommand, ElementName=MainGrid}"/&gt;
                                              &lt;/i:EventTrigger&gt;
                                              &lt;i:EventTrigger EventName="MouseLeave"&gt;
                                                  &lt;cmd:EventToCommand Command="{Binding DataContext.MouseLeaveCommand, ElementName=MainGrid}"/&gt;
                                              &lt;/i:EventTrigger&gt;
                                          &lt;/i:Interaction.Triggers&gt;
  
                                          &lt;Canvas.LayoutTransform&gt;
                                              &lt;TransformGroup&gt;
                                                  &lt;ScaleTransform ScaleX="{Binding ScaleX}"
                                                                  ScaleY="{Binding ScaleY}"&gt;
                                                  &lt;/ScaleTransform&gt;
                                          &lt;/TransformGroup&gt;
                                      &lt;/Canvas.LayoutTransform&gt;
                                  &lt;/Canvas&gt;
                              &lt;/ItemsPanelTemplate&gt;
                          &lt;/ItemsControl.ItemsPanel&gt;
                      &lt;/ItemsControl&gt;
                  &lt;/Grid&gt;
              &lt;/utils:ScrollViewer&gt;
  </code></pre>
  
  <p>The reference point is fixed with Left and Top points to zoom the Canvas. I'd like to zoom in and zoom out on the mouse pointer. How do I make it into the MVVM Pattern? (Not Behind code). Using mouse wheel, I can zoom in canvas. I already use RenderTransformOrigin, CenterX, CenterY but it is not worked. I think I made a wrong approach. Please help me..</p>