ViewportControl和圖像 - 如何避免無休止的滾動

Question

我正在編碼一種地圖（對於一個非常簡單的遊戲），它是（現在）一個圖像。 我希望用戶能夠滾動圖像並調整其大小。 我嘗試了很多，目前我正在使用ViewportControl，而XAML看起來或多或少像下面這樣（見下文）。 我的工作方式就像我需要的一樣 - 但圖像本身可以在ViewportControll內滾動而沒有任何邊界。結果圖像會滾動。

問題：有什麼辦法可以防止Viewportcontroll將圖像滾動出指定區域嗎？

<ViewportControl x:Name="viewport" Height="600" Width="440"> 
      <Canvas x:Name="ParentCanvas" Background="Red" MaxHeight="600" MaxWidth="440"> 
      <Image x:Name="MapImage" Source="/Artwork/map.png" RenderTransformOrigin="0.2,0.2" Stretch="UniformToFill" HorizontalAlignment="Left" VerticalAlignment="Center" Canvas.Left="-200" Canvas.Top="-300" Width="1320" Height="1800"> 
       <Image.RenderTransform> 
         <CompositeTransform x:Name="transform" /> 
       </Image.RenderTransform> 
      </Image> 
       <tk:GestureService.GestureListener> 
        <tk:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" /> 
       </tk:GestureService.GestureListener> 
      </Canvas> 
     </ViewportControl> 

Answer 1

經過測試後，我有我的問題的解決方案。 最重要的部分是將邊界 -tag添加到ViewportControl中，如下所示。 然後，由ViewportControl本身處理滾動。捏手勢必須手動完成，但這是可能的，因爲事件將到達正確的UI元素（在這裏：圖像）。 在下面的例子中，我使用Windows Phone Toolkit更容易處理事件。

<ViewportControl x:Name="viewportCtrl" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalContentAlignment="Center" Bounds="0,0,1320,1800"> 
      <Canvas x:Name="ParentCanvas" Background="Red" Height="1000" Width="800"> 
       <Image x:Name="MapImage" Source="/Artwork/map.png" RenderTransformOrigin="0.2,0.2" > 
       <Image.RenderTransform> 
         <CompositeTransform x:Name="transform" /> 
       </Image.RenderTransform> 
      </Image> 
       <Canvas x:Name="BlueCanvas" Top="100" Left="200" Background="Blue" Height="180" Width="180"></Canvas> 
       <tk:GestureService.GestureListener> 
        <tk:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" /> 
       </tk:GestureService.GestureListener> 
      </Canvas> 
     </ViewportControl>