Powiększenie obrazu WPF

Question

Mam widok z obrazem w środku. To świetnie, ponieważ Viewbox przeskaluje obraz, aby dopasować go do okna. Jednak muszę mieć możliwość powiększenia obrazu do jego pełnego rozmiaru i pokazywania pasków przewijania i mam problem z ustaleniem, jak to zrobić.

Oto, co mam teraz. Czy ktoś może dać kilka wskazówek, w jaki sposób mogę to zmienić, aby wdrożyć powyższą funkcjonalność?

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

Edytuj: Aby wyjaśnić. Potrzebuję obu sposobów wyświetlania obrazu, stylu widoku okna dopasowywania okna I możliwości przełączania do widoku Rzeczywisty rozmiar, który pokazuje paski przewijania i nie zmienia rozmiaru obrazu.

Answer 1

nie potrzebujemy Viewbox tutaj, umieszczając Image w ScrollViewer i manipulowanie VerticalScrollBarVisibility i HorizontalScrollBarVisibility właściwości można dokonać skalę Image czy nie:

<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

Na podstawie Twojej edycji, która wymaga zmiany obu podejść, zrobiłbym to na dwa sposoby.

1. Masz dwa elementy z obrazem. Element Image wewnątrz ScrollViewer bez Viewbox daje obraz w pełnym rozmiarze, a wersja Viewbox przeskaluje go. Następnie możesz przełączać te dwa w zależności od tego, co chcesz pokazać.

2. Użyj wyrażenia wiążącego we właściwościach Wysokość i Szerokość obrazu i umieść je wewnątrz przewijania. Jeśli chcesz przeskalować (w jakimś wyzwalaczu), ustaw Wysokość jako wyrażenie wiążące, które uzyskuje dostęp do właściwości ActualHeight w ScrollViewer lub jakimkolwiek kontenerze powyżej (używając RelativeSource, aby uzyskać dostęp do najbliższego przodka, jak poniżej):

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

Answer 4

Pomyślałem, że opublikuję moje rozwiązanie dla każdego, kto będzie szukał.

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