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>