WPF Image Zooming

Question

У меня есть Viewbox с изображением внутри. Это замечательно, так как Viewbox масштабирует изображение, чтобы соответствовать окну. Однако мне нужно иметь возможность масштабировать изображение до его полного размера и показывать полосы прокрутки, и мне трудно понять, как это сделать.

Вот что у меня сейчас. Кто-нибудь может дать несколько советов о том, как я могу изменить это для реализации вышеуказанных функций?

<Viewbox x:Name="viewbox">
    <StackPanel>
        <Image x:Name="image" Source="ranch.jpg" />
    </StackPanel>
</Viewbox>

Edit: Просто для ясности. Мне нужны оба способа просмотра изображения, стиль окна для подгонки окна И возможность переключения на представление фактического размера, которое показывает полосы прокрутки и не изменяет размер изображения.

Answer 1

Вам не нужно Viewbox здесь, поместив Image в ScrollViewer и манипулируя свойствами VerticalScrollBarVisibility и HorizontalScrollBarVisibility, вы можете сделать масштаб Image или нет:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <CheckBox x:Name="chkActualSize" Grid.Row="0" Content="Actual Size"/>
    <ScrollViewer Grid.Row="1">
        <ScrollViewer.Style>
            <Style TargetType="{x:Type ScrollViewer}">
                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=chkActualSize}" Value="True">
                        <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
                        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ScrollViewer.Style>
        <Image Source="http://sipi.usc.edu/database/misc/4.1.01.tiff" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </ScrollViewer>
</Grid>

Answer 2

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Viewbox>
        <Image Source="ranch.jpg"/>
    </Viewbox>
</ScrollViewer>

Answer 3

Исходя из ваших правок, что вам нужно переключить два подхода, я бы сделал это одним из двух способов.

1. Имеют два элемента с изображением. Элемент Image внутри ScrollViewer без Viewbox даст вам полноразмерное изображение, а версия Viewbox его масштабирует. Затем вы можете переключать их в зависимости от того, что вы хотите показать.

2. Используйте связывающее выражение для свойств высоты и ширины изображения и поместите его в средство просмотра прокрутки. Если вы хотите масштабировать его (в каком-то триггере), задайте для Height высоту привязки, которая обращается к свойству ActualHeight объекта ScrollViewer или к какому-либо контейнеру чуть выше этого (используя RelativeSource для доступа к ближайшему предку, например, как показано ниже)

   {Binding Path=ActualHeight, 
            RelativeSource={RelativeSource AncestorType={x:Type ScrollViewer}}}
   

Answer 4

Думал, что выложу свое решение для тех, кто ищет.

                <Slider Width="200" Value="500" Interval="25" Maximum="1000" x:Name="TestImageSlider" Minimum="-50" />
            <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto">
              <Image Source="{Binding SelectedScannedImage.ScannedImage}" Width="{Binding Path=Value, ElementName=TestImageSlider}" />
            </ScrollViewer>