使用 ScrollViewer 从中心原点缩放图像在 UWP 中不起作用 [英] Scaling image from center orgin using ScrollViewer is not working in UWP

问题描述

我正在使用滚动查看器来缩放设置为 Grid 背景的图像.当，我正在使用 scrollViewer.ChangeView(horizo​​ntalOffset,verticalOffset,zoomFactor) 图像正在缩放时，我正在从代码后面设置按钮单击时的缩放级别值从左上角开始，而不是从中心位置.每次单击按钮时将缩放级别增加为 0.1.

I am using scroll viewer to zoom the image which is set as background for Grid.When, I am setting the zoom level value on button click from code behind with scrollViewer.ChangeView(horizontalOffset,verticalOffset,zoomFactor) image is getting zoomed from Top left corner ,not from the center position.When increasing scale level as 0.1 every time in the button click.

在此处查找示例:示例

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);
    }

推荐答案

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

You must calculate the offset relative to the scrollable area.

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

的解决方案

由于滚动查看器的范围因应用缩放而发生变化，并且在应用滚动偏移后应用缩放，因此您必须使用 将滚动延迟到中心code>ScrollViewer.ViewChanged 事件.这是因为可滚动区域受范围大小的影响(例如 ScrollableWidth = ExtentWidth - ViewportWidth).

Solution using ScrollViewer.ChangeView

Since the scroll viewer's extent changes as a result of applying the zoom and the zoom is applied after the scroll offsets are applied, you have to defer the scrolling to the center by making use of the ScrollViewer.ViewChanged event. This is because the scrollable area is influenced by the extent's size (e.g. ScrollableWidth = ExtentWidth - ViewportWidth).

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);

---

替代方案1:使用ScrollViewer.ZoomToFactor

请注意，此 API 是 标记为已弃用，不保证在未来的框架版本中可用.

---

Alternative Solution 1: use ScrollViewer.ZoomToFactor

Note that this API is marked as deprecated and is not guaranteed to be available in future framework versions.

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);
}

---

替代方案 2:实现自定义 ZoomToFactor 方法

private void ZoomToFactor(double zoomFactor, ScrollViewer scrollViewer)
{
  if (!(scrollViewer?.Content is FrameworkElement zoomTarget))
  {
    return;
  }

  // Apply the zoom to the scroll content
  zoomTarget.Width = zoomTarget.ActualWidth * zoomFactor;
  zoomTarget.Height = zoomTarget.ActualHeight * zoomFactor;

  // Scroll the zoomed scroll content to center
  var scaledScrollableWidth = scrollViewer.ExtentWidth * zoomFactor - scrollViewer.ViewportWidth);
  var scaledScrollableHeight = scrollViewer.ExtentHeight * zoomFactor - scrollViewer.ViewportHeight;
  double horizontalScrollCenterOffset = scaledScrollableWidth / 2;
  double verticalScrollCenterOffset = scaledScrollableHeight / 2;

  scrollViewer.ScrollToHorizontalOffset(horizontalScrollCenterOffset);
  scrollViewer.ScrollToVerticalOffset(verticalScrollCenterOffset);
}

// Usage example
private void ZoomIn_OnButtonClick(object sender, RoutedEventArgs e)
{   
  ZoomToFactor(1.1, this.ScrollViewer);
}

这篇关于使用 ScrollViewer 从中心原点缩放图像在 UWP 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！