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

经过测试后，我找到了解决问题的方法。最重要的部分是将 Bounds -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>

ViewportControl和图像 - 如何避免无休止的滚动

1 个答案: