WPF Image Zoom

Question

J'ai une Viewbox avec une image à l'intérieur. C'est génial puisque la Viewbox met l'image à l'échelle de la fenêtre. Cependant, je dois être en mesure de zoomer l'image à sa taille réelle et montrer les barres de défilement et j'ai du mal à comprendre comment faire cela.

Voici ce que j'ai en ce moment. Quelqu'un peut-il donner quelques conseils sur la façon dont je peux modifier cela pour mettre en œuvre la fonctionnalité ci-dessus?

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

Edit: Juste pour clarifier. J'ai besoin de deux façons de voir l'image, le style de la fenêtre d'ajustement de la fenêtre et la possibilité de basculer vers une vue Taille réelle qui montre les barres de défilement et ne redimensionne pas l'image.

Answer 1

vous n'avez pas besoin Viewbox ici, en mettant l'Image dans un ScrollViewer et manipuler les VerticalScrollBarVisibility et HorizontalScrollBarVisibility propriétés, vous pouvez faire l'échelle Image ou non:

<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

En fonction de l'édition dont vous avez besoin pour basculer les deux approches, je le ferais de deux façons.

1. Avoir deux éléments avec l'image. L'élément Image à l'intérieur d'un ScrollViewer sans la Viewbox vous donnera l'image en taille réelle, et la version Viewbox l'échelle. Ensuite, vous pouvez basculer les deux en fonction de ce que vous voulez montrer.

2. Utilisez une expression de liaison sur les propriétés Height et Width de l'image et placez-la dans le scrollviewer. Lorsque vous voulez le mettre à l'échelle (dans une sorte de déclencheur), définissez Height à une expression de liaison qui accède à la propriété ActualHeight du ScrollViewer ou à tout autre conteneur (RelativeSource pour accéder à l'ancêtre le plus proche):

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

Answer 4

Je pensais que je posterais ma solution pour tous ceux qui cherchent.

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