Zoom of image with scrollviewer in WPF

Question

I have an Image viewer implemented using ScrollViewer

.XAML

                <ScrollViewer Name="viewImg" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
                <Image  Name="bigImage" 
               Source="/JoyOs.Media;component/img/Plugins/Photos/PHOTO.png"
                    PreviewMouseLeftButtonUp="ImageMouseLeftButtonUp" 
                    PreviewMouseLeftButtonDown="ImageMouseLeftButtonDown" 
                    PreviewMouseMove="ImageMouseMove" Stretch="Uniform"></Image>
            </ScrollViewer>

ScrollViewer class .cs file

public partial class ImageList
{
    private void ImageMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        var img = (Image)sender;
        img.ReleaseMouseCapture();
    }

    private void ImageMouseMove(object sender, MouseEventArgs e)
    {
        var img = (Image)sender;
        if (!img.IsMouseCaptured) return;
        Vector v = _startImgMove - e.GetPosition(viewImg);
        viewImg.ScrollToHorizontalOffset(_originImgMove.X - v.X);
        viewImg.ScrollToVerticalOffset(_originImgMove.Y - v.Y);
    }

    private void ImageMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var img = (Image)sender;
        img.CaptureMouse();
        _startImgMove = e.GetPosition(viewImg);
        _originImgMove = new Point(viewImg.HorizontalOffset, viewImg.VerticalOffset);
    }
}

I want zoom features implemented in it.Hence I tried to use ZoomBorder.cs class from this.

How to use ZoomBorder.cswith ScrollViewer ?

I tried Without ScrollViewer with only ZoomBorder.cs like this.

         <local:ZoomBorder x:Name="border" ClipToBounds="True" Background="Gray">
                <Image  Name="bigImage" 
               Source="/JoyOs.Media;component/img/Plugins/Photos/PHOTO.png"
                    PreviewMouseLeftButtonUp="ImageMouseLeftButtonUp" 
                    PreviewMouseLeftButtonDown="ImageMouseLeftButtonDown" 
                    PreviewMouseMove="ImageMouseMove" Stretch="Uniform"></Image>
          </local:ZoomBorder>

Answer 1

I can't answer the question for ZoomBorder's, but I have implemented zoom functionality myself in a different way. I have a ViewBox, which I bind the ScaleTransform of to a value in my ViewModel. Changing the value in my ViewModel then causes the contents of the ViewBox to zoom in and out depending on the value.

<Viewbox x:Name="vwbxZoom" Stretch="None">
    <Viewbox.LayoutTransform>
        <ScaleTransform ScaleX="{Binding ZoomLevel.Value}"
                        ScaleY="{Binding ZoomLevel.Value}" />
    </Viewbox.LayoutTransform>
</ViewBox>