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>

score 0 · Accepted Answer · answered Jun 14 '17 at 06:05

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>

score 0 · Answer 2 · answered Jun 14 '17 at 07:08

Here is a quick example. You may use any control as content of the Viewbox

<DockPanel>
    <Slider x:Name="ZoomSlider" DockPanel.Dock="Bottom" Minimum="0.05" Maximum="2">        
    </Slider>
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Viewbox Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Border Width="2000" Height="2000">
                <Border.Background>
                    <LinearGradientBrush StartPoint="0, 0.5" EndPoint="1, 0.5">
                        <GradientStop Color="Red" Offset="0.33"/>
                        <GradientStop Color="Green" Offset="0.66"/>
                        <GradientStop Color="Blue" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Viewbox.LayoutTransform>
                <ScaleTransform ScaleX="{Binding ElementName=ZoomSlider, Path=Value}" ScaleY="{Binding ElementName=ZoomSlider, Path=Value}"/>
            </Viewbox.LayoutTransform>
        </Viewbox>
    </ScrollViewer>
</DockPanel>

Zoom of image with scrollviewer in WPF

2 Answers2