使用 ScrollViewer 从中心原点缩放和平移图像在 UWP 中不起作用答案

【问题标题】：Scaling and panning image from center orgin using ScrollViewer is not working in UWP使用 ScrollViewer 从中心原点缩放和平移图像在 UWP 中不起作用
【发布时间】：2020-08-18 17:40:39
【问题描述】：

我的要求是，我想通过使用 scrollviewer ZoomToFactor 方法以编程方式缩放图像。并且当使用 ZoomToFactor 方法应用缩放值时，它应该从原点中心缩放。

所以，我在网格布局中添加了图像并将其水平和垂直对齐设置为中心，然后在 ScrollViewer 中添加网格，如下面的代码 sn-p 所示。

[XAML]

<ContentControl  Grid.Row="2">
    <ScrollViewer x:Name="scrollViewer" VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled"  ZoomMode="Enabled"  >

        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="216" Height="319">
            <Image x:Name="MyImage" Source="Assets\EditedImage.jpg" />
        </Grid>

    </ScrollViewer>
</ContentControl>

[C#]

 int count = 1;
 private void Btn_Click(object sender, RoutedEventArgs e)
            {
                count += 1;
                scrollViewer.ZoomToFactor(count);            
            }

问题 1：图像从左上角位置缩放。但是应该从图像的中心放大。

问题2：放大后，如果你用手指水平平移，它会重置到以前的位置。

另外，我在上面的代码中尝试将 RenderTransformOrigin as (0.5, 0.5) 转换为 Grid 和 Image。那也失败了。

Sample link:

任何人，请指导我上面的代码有什么问题。

问候，

婆罗提。

【问题讨论】：

标签： c# xaml uwp uwp-xaml

【解决方案1】：

使用 ScrollViewer 从中心原点缩放和平移图像在 UWP 中不起作用

我已经测试了上面的代码，问题使用你将ScrollViewer 放在ContentControl 中导致ScrollViewer 大小与子网格大小相同。您可以使用UserControl 替换。

<UserControl  Grid.Row="2">
    <ScrollViewer  x:Name="scrollViewer"   VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled"  ZoomMode="Enabled"   >
        <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="216" Height="319" >
            <Image x:Name="MyImage" Source="Assets\EditedImage.jpg" Stretch="Uniform" RenderTransformOrigin="0.5, 0.5" />
        </Grid>
    </ScrollViewer>
</UserControl>

【讨论】：

感谢您的回答。这是工作。还需要使用 ChangeView(width/2, height/2, scale);而不是 ZoomToFactor 方法。它已被弃用，并且在一些缩放后出现了一些问题
每次增加比例级别 0.1 时，它不起作用。你能为此提供解决方案吗？
好的，我明天可以检查一下吗，因为我马上就要下班了。
好的。谢谢。。我会等的。
我通过scrollviewer.ScrollableWidth和Height部分解决了它。但它没有提供确切的解决方案。请参考下面的帖子。 stackoverflow.com/questions/63503044/…