在 FlipView 中使用 ScrollViewer答案

【问题标题】：Using ScrollViewer inside a FlipView在 FlipView 中使用 ScrollViewer
【发布时间】：2015-05-08 02:39:05
【问题描述】：

我有一个带有 FlipView 的 Windows Phone 8.1 应用程序。每个 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

任何想法为什么以及如何解决它？

【问题讨论】：

我想我知道这里发生了什么。当您完全缩小并尝试滑动时，您实际上是在 FlipView 项目内滑动，而不是父容器。
我在 Windows 8.1 上遇到了非常相似的问题。几乎相同的场景。我发现在 ScrollViewer 上将 Horizontal 和 Vertical ScrollBarVisibility 设置为 Auto 会有所帮助 - 但是如果呈现的 PDF 页面大于屏幕分辨率（通常是为了缩放以正常工作），它就会呈现太大。所以我做的另一件事是将网格的最大宽度限制为 Window.Current.Bounds.Width 和最大高度为相同的宽度乘以基于杂志页面格式的比例因子。然后它起作用了。
有点像snap points，您可以尝试将这些属性设置为像 MandatorySingle 或 None
伊戈尔，你解决了这个问题吗？我遇到了同样的问题..
@Alexandr 试试这个：igrali.com/2015/07/16/…

标签： c# xaml windows-phone-8 windows-phone-8.1

【解决方案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

【讨论】：

【解决方案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>

您还可以选择设置 Max/MinZoomFactor 以防止过度缩放

【讨论】：