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

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> 

如何放大图像一样“适合与宽度的”文件观众的ScrollViewer的大小和高度？

Answer 1

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> 

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

Answer 2

我正在通过在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; 
}