使用 ScrollViewer 进行图像缩放，在平移时不断向左对齐答案

【问题标题】：Using ScrollViewer for image pinch-zoom, keeps snapping left on pan使用 ScrollViewer 进行图像缩放，在平移时不断向左对齐
【发布时间】：2012-12-08 22:59:13
【问题描述】：

我正在尝试使用 XAML ScrollViewer 来“廉价”为图像添加捏合缩放功能。然而，问题是当在图像周围平移时，它会一直向左对齐。如果我向右滑动它，它看起来很好，但是当我释放图像时，它会弹回左侧。

这个问题只在水平方向上持续存在 - 对于垂直平移，它工作正常。

我将其抽象为最简单的测试用例，并且它仍然存在。我的 XAML 代码如下：

    <ScrollViewer>
        <Image Source="http://i.imgur.com/1WlGT.jpg" />
    </ScrollViewer>

感谢任何帮助。

【问题讨论】：

标签： xaml windows-8 microsoft-metro winrt-xaml

【解决方案1】：

我已经解决了。

问题是您必须将 HorizontalScrollBarVisibility 显式设置为 true。

<ScrollViewer x:Name="scrollViewer" 
                  VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" 
                  ZoomMode="Enabled">
        <Image Source="http://i.imgur.com/1WlGT.jpg" />
    </ScrollViewer>

【讨论】：

这似乎破坏了滚动查看器中图像的初始大小。在不设置可见性的情况下，图像会缩放以填充滚动查看器的水平宽度。应用您的解决方案后，图像的初始显示大于容器。
对于任何有上述问题的人，将图像的起始宽度设置为滚动视图视口的宽度：Image.Width = ImageScrollViewer.ViewportWidth;
扩展此建议，您需要在视口建立后设置 Image.Width。我为此使用了 LayoutUpdated 事件。

【解决方案2】：

仅说明 Michal Strzalkowski 在您的答案下方的评论中提到的可能解决方案，即图像以全尺寸显示（不适合容器边界）。使用带有 ElementName 和 Path

的 Binding 在 XAML 中快速修复

<ScrollViewer x:Name="SV_ImageZoom"           
              MaxZoomFactor="3"
              MinZoomFactor="1"
              ZoomMode="Enabled"                          
              HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto">
    <Image Source="http://i.imgur.com/1WlGT.jpg"
           Width="{Binding Path=ViewportWidth, ElementName=SV_ImageZoom}" />
</ScrollViewer>

【讨论】：