如何設置適合於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; 
}