WPF Image Zooming

Question

私はその中にイメージを持つViewboxを持っています。 Viewboxはウィンドウに合わせて画像を拡大/縮小するので、これは素晴らしいことです。しかし、私は画像をフルサイズに拡大してスクロールバーを表示できるようにする必要があり、これを行う方法を理解するのは苦労しています。

これは私が今持っているものです。誰も私が上記の機能を実装するためにこれを変更する方法についてのいくつかの指針を与えることができますか？

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

編集： ちょうど明確にする。私は画像を見る方法、ウィンドウを合わせるビューボックススタイル、スクロールバーを表示し、画像のサイズを変更しない実際のサイズビューに切り替える機能の両方が必要です。

Answer 1

あなたはScrollViewerでImageを入れてVerticalScrollBarVisibilityとHorizontalScrollBarVisibilityプロパティを操作することで、あなたはImage規模をしたりすることはできません、ここViewboxを必要としません：

<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

2つのアプローチを切り替える必要がある編集に基づいて、私は2つの方法のいずれかでこれを行います。

1. イメージには2つの要素があります。 ViewboxのないScrollViewer内のImage要素はフルサイズの画像を表示し、Viewboxのバージョンはそれを拡大/縮小します。次に、表示する内容に応じて2つを切り替えることができます。

2. 画像の高さと幅のプロパティでバインディング式を使用し、スクロールビューアー内に囲みます。 （何らかのトリガーで）スケールするときは、ScrollViewerのActualHeightプロパティにアクセスするバインディング式、またはその直上のコンテナ（RelativeSourceを使用して、次のような最も近い祖先にアクセスする）にHeightを設定します。

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