WPF Image Zooming

Question

I have a Viewbox with an Image inside of it. This is great since the Viewbox will scale the Image to fit the window. However, I need to be able to zoom the image to its full size and show scroll bars and I am having a hard time figuring out how to do this.

Here's what I have right now. Can anyone give some pointers on how I can modify this to implement the above functionality?

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

Edit: Just to clarify. I need both ways of viewing the image, the viewbox style of fitting the window AND the ability to toggle to an Actual Size view that shows scrollbars and doesn't resize the image.

Answer 1

You don't need a Viewbox here, by putting the Image in a ScrollViewer and manipulating the VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties, you can make the Image scale or not:

<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

Based on your edit that you need to toggle the two approaches, I would do this in one of two ways.

1. Have two elements with the image. The Image element inside a ScrollViewer without the Viewbox will give you the full size image, and the Viewbox version will scale it. Then you can toggle the two depending on what you want to show.

2. Use a binding expression on the Height and Width properties of the Image and enclose it inside the scrollviewer. When you want to scale it (in some sort of trigger), set the Height to a binding expression that accesses the ActualHeight property of the ScrollViewer or whatever container is just above that (using RelativeSource to access the nearest ancestor something like the following):

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

Answer 4

Thought I would post my solution for anyone looking.

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