在UWP中无法使用ScrollViewer从中心原点缩放图像

如何解决在UWP中无法使用ScrollViewer从中心原点缩放图像

我正在使用滚动查看器缩放设置为Grid的背景的图像。何时，我使用scrollViewer在后面的代码中单击按钮时设置了缩放级别值.ChangeView（horizo​​ntalOffset，verticalOffset，zoomFactor）图像正在缩放从左上角开始，而不是从中心位置开始。每次在按钮中将比例级别提高为0.1时。

在此处找到示例：Sample

XAML：

        <UserControl  Grid.Row="2">
        <ScrollViewer x:Name="scrollViewer" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"  VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled"  ZoomMode="Enabled"  >

            <Grid x:Name="ImageGrid" VerticalAlignment="Center" HorizontalAlignment="Center" Width="1260" Height="350" >
                <Image x:Name="MyImage" Width="1260" Height="210" Source="Assets\EditedImage.jpg" RenderTransformOrigin="0.5,0.5" />
            </Grid>

        </ScrollViewer>
    </UserControl>

C＃：

    float count = 1;
    private void Btn_Click(object sender,RoutedEventArgs e)
    {
        count += 0.1f;
        var width = this.scrollViewer.ExtentWidth / 2;
        var height = this.scrollViewer.ExtentHeight  / 2;

        scrollViewer.ChangeView(width,height,count);
    }

解决方法

您必须计算相对于可滚动区域的偏移量。

XAML

<StackPanel>
  <Button Click="ZoomIn_OnButtonClick" Content="Increase Zoom"/>
  <ScrollViewer x:Name="ScrollViewer" 
                HorizontalScrollBarVisibility="Visible" 
                HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center">
    <Image Stretch="Uniform" Source="Assets\golden_eaglew.jpg" />
  </ScrollViewer>
</StackPanel>

使用ScrollViewer.ChangeView

的解决方案

由于滚动查看器的范围会因应用缩放而发生变化，并且在应用滚动偏移量后 会应用缩放，因此您必须通过使用{ {1}}事件。这是因为可滚动区域受范围大小的影响（例如ScrollViewer.ViewChanged = ScrollableWidth-ExtentWidth）。

ViewportWidth

---

替代解决方案1：使用public MainPage() { this.InitializeComponent(); this.ScrollViewer.ViewChanged += ScrollToCenterOnScrollViewerChanged; } private void ScrollToCenterOnScrollViewerChanged(object sender,ScrollViewerViewChangedEventArgs e) { if (e.IsIntermediate) { return; } var scrollViewer = sender as ScrollViewer; scrollViewer.ChangeView( scrollViewer.ScrollableWidth / 2,scrollViewer.ScrollableHeight / 2,null); } private void ZoomIn_OnButtonClick(object sender,RoutedEventArgs e) => this.ScrollViewer.ChangeView(null,null,this.ScrollViewer.ZoomFactor + 0.1f);

请注意，此API是marked as deprecated，不能保证在将来的框架版本中可用。

ScrollViewer.ZoomToFactor

---

替代解决方案2：实现自定义private void ZoomIn_OnButtonClick(object sender,RoutedEventArgs e) { this.ScrollViewer.ZoomToFactor(this.ScrollViewer.ZoomFactor + 0.1f); this.ScrollViewer.ScrollToHorizontalOffset(this.ScrollViewer.ScrollableWidth / 2); this.ScrollViewer.ScrollToVerticalOffset(this.ScrollViewer.ScrollableHeight / 2); } 方法

ZoomToFactor