WPF Centering Pinch to LayoutTransform

Question

UPDATE 1 "Pinch"아래에 이미지를 유지하려면 조작 원점 값을 기준으로 ScrollViewer의 Vertical 및 Horizontal 오프셋을 설정해야한다고 생각합니다. 그러나, 나는 그 값을 계산하는 방법에 문제가 있습니다.

---

큰 응용 프로그램의 일부로 사용자는 스크롤 뷰어에서 이미지를 집어 넣고 확대/축소하고 팬 할 수 있어야합니다. 아래에있는 내용은 패닝 (panning) 및 핀치 - 줌 (pinch-to-zoom)을 허용합니다. 그러나 확대/축소는 왼쪽 상단에서 발생하는 것처럼 보입니다. 이 코드를 수정하려면 어떻게해야합니까? RenderTransform을 사용하여이 작업을 완벽하게 수행하는 예제를 발견했지만 LayoutTransforms에서이를 수행하는 방법을 알 수 없습니다.

Private Sub MainImage_ManipulationStarting(sender As Object, e As ManipulationStartingEventArgs) Handles MainImage.ManipulationStarting 
    e.ManipulationContainer = MainScrollViewer 
    e.Handled = True 
End Sub 


Private Sub MainImage_ManipulationDelta(sender As Object, e As ManipulationDeltaEventArgs) Handles MainImage.ManipulationDelta 
    Dim delta = e.DeltaManipulation 
    Dim element = TryCast(e.Source, FrameworkElement) 
    If element IsNot Nothing Then 
     'Apply Scale Value 
     ScaleTrans.ScaleX *= delta.Scale.X 
     ScaleTrans.ScaleY *= delta.Scale.Y 

     'Panning 
     MainScrollViewer.ScrollToHorizontalOffset(MainScrollViewer.HorizontalOffset + delta.Translation.X * -1) 
     MainScrollViewer.ScrollToVerticalOffset(MainScrollViewer.VerticalOffset + delta.Translation.Y * -1) 
    End If 
End Sub 

Answer 1

의 변환 중심점을 설정 : 여기

<ScrollViewer Name="MainScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" > 
     <Image Name="MainImage" Source="/test.jpg" Stretch="None" IsManipulationEnabled="True"> 
      <Image.LayoutTransform> 
       <ScaleTransform x:Name="ScaleTrans"/> 
      </Image.LayoutTransform> 
     </Image> 
    </ScrollViewer> 

뒤에 코드입니다 :

여기 내 XAML의 설정입니다.

<ScrollViewer Name="MainScrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" > 
    <Image Name="MainImage" Source="/test.jpg" Stretch="None" IsManipulationEnabled="True"> 
     <Image.LayoutTransform> 
      <ScaleTransform x:Name="ScaleTrans" CenterX="0.5" CenterY="0.5" /> 
     </Image.LayoutTransform> 
    </Image> 
</ScrollViewer> 

핀치가있는 위치에 상대적으로 필요한 경우 뒤에서 코드를 지정하십시오. xaml 버전과 마찬가지로 CenterX 및 CenterY 속성을 ScaleTransform으로 변경합니다. 그러나이 두 속성은 포인트 값이 아니라 0.0에서 1.0까지의 값을가집니다. CenterX = 0.0/CenterY = 0.0은 왼쪽 상단을 나타내며, CenterX = 1.0/CenterY = 1.0은 오른쪽 하단을 나타냅니다. 당신은 스스로 계산을해야합니다.