在FlipView中使用ScrollViewer

Question

我有一个Windows Phone 8.1应用程序，其中包含FlipView。每个FlipView项代表一本杂志的页面（PDF页面呈现为位图，并带有一些覆盖层）。

我需要为所有页面启用捏合缩放功能。我的FlipView ItemTemplate如下所示：

<DataTemplate
        x:Key="SinglePageTemplate">
        <ScrollViewer                
            ZoomMode="Enabled">
            <Grid>
                <ProgressRing
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    IsActive="{Binding IsRendered, Converter={StaticResource BooleanNegateConverter}}" />
                <Image
                    Source="{Binding Bitmap}"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
                </Image>
            </Grid>
        </ScrollViewer>

问题是，当我缩小页面并试图向右移动时，它总是会“跳回”到左边。

这里有一个视频展示了问题：https://dl.dropboxusercontent.com/u/73642/fv.avi 有任何想法为什么以及如何解决它？

- Igor Kulman

---

我想我知道这里发生了什么。当您完全缩放并尝试滑动时，实际上您正在FlipView项目内滑动，而不是父容器。 - Mike Eason

我在Windows 8.1上遇到了非常类似的问题，几乎相同的情况。我发现将ScrollViewer的Horizontal和Vertical ScrollBarVisibility设置为Auto有所帮助 - 但是如果PDF页面渲染的大小大于屏幕分辨率（通常是这样的，为了使缩放正常工作），它会被渲染得太大。所以我做的另一件事是将Grid的最大宽度限制为Window.Current.Bounds.Width，最大高度限制为该宽度乘以基于杂志页面格式的比例因子。然后它就可以工作了。 - Igor Ralic

看起来有点像是触发了捕捉点，你可以尝试设置这些属性为MandatorySingle或None。 - Chris W.

Igor，你解决了这个问题吗？我也遇到了同样的问题。 - Alexandr

@Alexandr 试试这个：http://igrali.com/2015/07/16/why-is-my-zoomable-scrollviewer-snapping-the-image-to-the-left/#.VahJxfXU5hU.twitter - Igor Ralic

@igrali 谢谢您的帖子，它很有效！或许需要给一个链接作为答案，这样 Stack Overflow 用户可以更容易地找到它。 - Alexandr

Answer 1

我曾经遇到过同样的问题。我通过使用附加行为并设置HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"来解决了它。

以下是用于附加行为的代码：

public class PanAndZoomBehavior : Behavior<ScrollViewer>
    {
        protected override void OnAttached()
        {
            base.OnAttached();            
            Window.Current.SizeChanged += OnSizeChanged;
            SetElementSize();

        }

        protected override void OnDetaching()
        {
            base.OnDetaching();            
            Window.Current.SizeChanged -= OnSizeChanged;
        }

        private void OnSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            SetElementSize();
        }

        private void SetElementSize()
        {
            AssociatedObject.Width = Window.Current.Bounds.Width;
            AssociatedObject.Height = Window.Current.Bounds.Height;
            if (AssociatedObject.Content != null)
            {
                FrameworkElement element = (FrameworkElement)AssociatedObject.Content;
                element.Width = Window.Current.Bounds.Width;
                element.Height = Window.Current.Bounds.Height;
            }
        }

    }

将此行为应用于 ScrollViewer

- ajay_whiz

Answer 2

在你的滚动视图中，你需要手动启用滚动条可见性和模式。

<ScrollViewer ZoomMode="Enabled"
              HorizontalScrollBarVisibility="Visible"
              VerticalScrollBarVisibility="Visible"
              HorizontalScrollMode="Enabled"
              VerticalScrollMode="Enabled">
        <Grid>
            <ProgressRing
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                IsActive="{Binding IsRendered, Converter={StaticResource BooleanNegateConverter}}" />
            <Image
                Source="{Binding Bitmap}"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch">
            </Image>
        </Grid>
 </ScrollViewer>

您还可以选择设置最大/最小缩放系数以防止过度缩放。

- Ganesh Cauda