在 WPF 中使用滚动查看器缩放图像

Question

我有一个使用 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 文件

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);
    }
}

我想在 it.Hence 中实现缩放功能我尝试使用 ZoomBorder.cs class 来自 this。

如何将 ZoomBorder.cs 与 ScrollViewer 一起使用？

我试过没有 ScrollViewer 只有 ZoomBorder.cs 像这样。

         <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

我无法回答 ZoomBorder's 的问题，但我自己以不同的方式实现了缩放功能。我有一个 ViewBox，我将它的 ScaleTransform 绑定到我的 ViewModel 中的一个值。更改我的 ViewModel 中的值会导致 ViewBox 的内容根据该值放大和缩小。

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

Answer 2

这是一个简单的例子。您可以使用任何控件作为 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>

在 WPF 中使用滚动查看器缩放图像

Zoom of image with scrollviewer in WPF

c#

wpf

image-viewer

scrollviewer

zooming