WPF Image Zooming

Question

Tengo una Viewbox con una imagen dentro de ella. Esto es genial ya que Viewbox escalará la Imagen para que se ajuste a la ventana. Sin embargo, necesito poder acercar la imagen a su tamaño completo y mostrar barras de desplazamiento, y me está costando trabajo encontrar la manera de hacerlo.

Esto es lo que tengo ahora. ¿Alguien puede dar algunos consejos sobre cómo puedo modificar esto para implementar la funcionalidad anterior?

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

Editar: sólo para aclarar. Necesito las dos formas de ver la imagen, el estilo de la ventana de vista de ajustar la ventana Y la capacidad de alternar a una vista de Tamaño real que muestra las barras de desplazamiento y no cambia el tamaño de la imagen.

Answer 1

no es necesario un Viewbox aquí, poniendo el Image en un ScrollViewer y la manipulación de los VerticalScrollBarVisibility y HorizontalScrollBarVisibility propiedades, puede hacer que el Image escala o no:

<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

De acuerdo con su edición que necesita alternar entre los dos enfoques, lo haría de dos maneras.

1. Tiene dos elementos con la imagen. El elemento Image dentro de ScrollViewer sin Viewbox le dará la imagen de tamaño completo, y la versión de Viewbox lo escalará. Luego puedes alternar entre los dos dependiendo de lo que quieras mostrar.

2. Utilice una expresión vinculante en las propiedades Alto y Ancho de la Imagen y enciérrela dentro del desplazador de desplazamiento. Cuando desee escalarlo (en algún tipo de desencadenador), establezca la altura en una expresión de enlace que acceda a la propiedad ActualHeight del ScrollViewer o cualquier contenedor que esté justo encima (utilizando RelativeSource para acceder al antecesor más cercano, como el siguiente):

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

Answer 4

Pensé en publicar mi solución para todos los que buscan.

   <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>