XAML适应图像到页面大小内的ScrollViewer

Question

我在 ScrollViewer 中有一张 Image。其中一些图片太大，无法适应 Page 的大小。当首次显示时，如何将 Image 的大小调整为 Page 大小？

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
    <Image Stretch="None" />
</ScrollViewer>

更新的答案

根据Filip在这里给出的答案以及他对类似问题的另一个回答，我做了以下修改。

XAML：

<ScrollViewer x:Name="scrollViewer">
    <Image x:Name="image" Stretch="None" SizeChanged="ImageSizeChanged" />
</ScrollViewer>

代码后台：

private bool imageSizeSet;
private void ImageSizeChanged( object sender, SizeChangedEventArgs e )
{
    if( imageSizeSet || !( image.ActualWidth > scrollViewer.ViewportWidth ) && !( image.ActualHeight > scrollViewer.ViewportHeight ) )
    {
        return;
    }

    // If the image is larger than the screen, zoom it out.
    var zoomFactor = (float)Math.Min( scrollViewer.ViewportWidth / image.ActualWidth, scrollViewer.ViewportHeight / image.ActualHeight );
    scrollViewer.ZoomToFactor( zoomFactor );
    imageSizeSet = true;
}

- Josh Close

Answer 1

<ScrollViewer
    x:Name="theScrollViewer"
    HorizontalScrollBarVisibility="Auto"
    VerticalScrollBarVisibility="Auto"
    SizeChanged="OnSizeChanged">
    <Image
        x:Name="theImage"
        Stretch="Uniform" />
</ScrollViewer>

private void OnSizeChanged(object sender, SizeChangedEventArgs args)
{
    theImage.Width = theScrollViewer.ViewportWidth;
    theImage.Height = theScrollViewer.ViewportHeight;
}

- Filip Skakun

---

这会裁剪掉一些图像。我想要的是整个图像显示出来，但缩小到足够小的比例，以便在页面最初加载时可以看到整个图像，这样用户就不必缩小了。 - Josh Close

那么在图像加载时也设置大小，或许在此之前添加 theScrollViewer.ZoomToFactor(1);。我没有看到任何被裁剪的内容。你确定将 Stretch 设置为 Uniform 了吗？ - Filip Skakun

不确定如何解决这个问题，但无论如何，这是一个不同的问题。如果对你有用的话，你可以设置theScrollViewer.MinZoomFactor = 1;。 - Filip Skakun

看起来表现良好。谢谢Filip！ - Josh Close

Filip：最终我做了一些略微不同的事情，并将其作为问题的更新发布。现在它的行为完全符合我的要求。感谢您的所有帮助。 - Josh Close