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

Я делаю это, устанавливая масштаб для ScaleTransform в обработчике события ScrollViewer Load. По сути, я делю 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;
}

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>

Этот подход будет работать для растягивания изображения, но он отключает прокрутку.