图像与ScrollViewer中放大WPF

.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>

来源

2017-06-14 Ratzz

我无法回答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>

来源

2017-06-14 06:05:53 Ralt

这是一个简单的例子。您可以使用任何控件作为视图框的内容

<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>

来源

2017-06-14 07:08:29

图像与ScrollViewer中放大WPF

回答

相关问题