Как установить изображение, соответствующее ширине 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

Я делаю это, установив масштаб для ScaleTransform в обработчике событий для события загрузки ScrollViewer. В основном, я разделяю ActualWidth ScrollViewer по ширине источника изображения. У меня также есть обработчик события 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; 
}