WPF Image Zooming

WPF Image Zooming

You dont 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>
<ScrollViewer HorizontalScrollBarVisibility=Auto>
    <Viewbox>
        <Image Source=ranch.jpg/>
    </Viewbox>
</ScrollViewer>

WPF Image Zooming

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

Leave a Reply

Your email address will not be published.