Question

我将图像放在ScrollViewer中。

<ScrollViewer x:Name="imageScroller" Grid.Column="2" Margin="5" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <Image x:Name="imageViewer" Cursor="Hand" RenderTransformOrigin="0,0" Margin="0">
        <Image.LayoutTransform>
            <ScaleTransform ScaleX="{Binding Path=Zoom, Converter={StaticResource debugConverter}}" ScaleY="{Binding Path=Zoom, Converter={StaticResource debugConverter}}"/>
        </Image.LayoutTransform>
    </Image>
</ScrollViewer>

如何将文档查看器中的“fit-to-width”图像缩放到ScrollViewer的大小和高度？

Answer 1

我是通过在ScrollViewer Load事件的事件处理程序中设置ScaleTransform的比例来实现的。基本上我将ScrollViewer的ActualWidth除以图像源的宽度。我还有一个ScrollViewer SizeChanged事件的处理程序，它将重新调整比例，以便在调整窗口大小时图像将缩小和增长。这是一些基本代码。

注意：这不会考虑垂直滚动条，事实上搜索如何处理这就是我最终的结果。当我找到答案时，我会更新。

private void imageScroller_Loaded(object sender, RoutedEventArgs e)
{
    FitToWidth();
}

private void imageScroller_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if(imageScroller.IsLoaded)
        FitToWidth();
}

private void FitToWidth()
{
    scaler.ScaleX = scaler.ScaleY = imageScroller.ActualWidth / imageViewer.Source.Width;
}

Answer 2

ScrollViewer不是正确的选择。除非您禁用滚动，否则它会为其子项提供所有可用空间。要拉伸图像，我们通常使用Stretch="Fill"属性，但同样，它不适用于ScrollViewer。

<ScrollViewer x:Name="imageScroller" Margin="5" 
              HorizontalScrollBarVisibility="Disabled" 
              VerticalScrollBarVisibility="Disabled">
    <Image x:Name="imageViewer" Cursor="Hand" RenderTransformOrigin="0,0" Margin="0" 
           Stretch="Fill"/>
</ScrollViewer>

这种方法适用于拉伸图像，但它会禁用滚动。

如何设置适合ScrollViewer宽度的图像

2 个答案: