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

我希望在其中实现缩放功能。我试图使用this中的ZoomBorder.cs类。

如何将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中使用scrollviewer缩放图像

2 个答案: