[UWP] 解决FlipView图片放大的诡异bug

开发者俊含技术 2022年11月10日

0 收藏 884 点赞 5,009 浏览 1776 个字

想要实现图片的放大缩小可以通过在Image外面套一个ScrollViewer，然后设置ScrollViewer的ZoomMode=”Enabled”

<FlipView ItemsSource="{x:Bind Images}">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <ScrollViewer ZoomMode="Enabled" MinZoomFactor="1">
                <Image Source="{Binding }"/>
            </ScrollViewer>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

这样就可以粗糙地实现图片放缩了，为什么说是粗糙的，因为这样简单地弄会出现一个bug 。。。

把图片放大到超过屏幕宽度后，停止放大，会看到图片诡异地动了一下，

解决方案

控制图片的大小和ScrollViewer的Viewport一样大

<FlipView ItemsSource="{x:Bind Images}" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
                    <FlipView.ItemTemplate>
                        <DataTemplate>
                            <ScrollViewer x:Name="ScrollViewerMain" ZoomMode="Enabled"
                                          MinZoomFactor="0.5"
                                          HorizontalScrollBarVisibility="Hidden"
                                          VerticalScrollBarVisibility="Hidden">
                                <Image Source="{Binding }"
                                       MaxWidth="{Binding Path=ViewportWidth,ElementName=ScrollViewerMain}"
                                       MaxHeight="{Binding Path=ViewportHeight,ElementName=ScrollViewerMain}"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"/>
                            </ScrollViewer>
                        </DataTemplate>
                    </FlipView.ItemTemplate>
                </FlipView>

再加个双击放大

给ScrollViewer加个DoubleTapped的事件处理

 private async void ScrollViewerMain_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
        {
            var scrollViewer = sender as ScrollViewer;
            var doubleTapPoint = e.GetPosition(scrollViewer);            if (Math.Abs(scrollViewer.ZoomFactor - 1.0) > 1E-)
            {
                scrollViewer.ChangeView(doubleTapPoint.X, doubleTapPoint.Y, );
            }
            else
            {
                var dispatcher = Window.Current.CoreWindow.Dispatcher;
                await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.High, () =>
                {
                    scrollViewer.ChangeView(doubleTapPoint.X, doubleTapPoint.Y, );
                });
            }
        }

附上Demo

FlipViewDemo.rar

参考链接

https://www.goedware.com/index.php/blog/3-pinch-zoom-image-in-uwp-app

http://igrali.com/2015/07/17/why-is-my-zoomable-scrollviewer-snapping-the-image-to-the-left/

https://stackoverflow.com/questions/37380661/uwp-zooming-image-with-pinch-zoom-and-double-tap-with-flip-view