Pan And Zoom Provider

Put anything larger or more detailed than the space it has inside it – a floor plan, a schematic, a scanned document, a chart, a Canvas of shapes – and the user can look at the whole of it and then zoom into the detail. It opens showing the whole of its content, scaled to fit (IsInitialViewFitted).

What the user can do

Zooming is animated over about a fifth of a second; panning follows the pointer exactly. The keys work while the control has keyboard focus, which it takes when the user starts a pan.

From code

ZoomLevel reads and sets the scale, ZoomToFit shows the whole content, ResetView returns to the opening view, and FitZoomLevel is the scale at which everything fits – the pieces of a zoom slider or a "Fit" button. ZoomMinimumDepth and ZoomMaximumDepth bound every zoom.

Layout

The control clips its content to its own bounds, and places the content at its top-left corner (Control.HorizontalContentAlignment and Control.VerticalContentAlignment default to Left and Top), because it positions the content itself. Give the content a size of its own – an image's natural size, or a Canvas with FrameworkElement.Width and FrameworkElement.Height – since that is what is scaled and fitted. A view that fits the content stays fitted when the control is resized; any other view keeps its scale. Replacing the content returns to the opening view.

A zoomable floor plan with a toolbar of zoom buttons.

<Window x:Class="Facilities.PlanWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:zp="clr-namespace:Binarymission.WPF.Controls.ContentControls;assembly=Binarymission.WPF.Controls.ZoomPanControl"
        Title="Second floor" Width="1000" Height="700">

    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <Button Content="Zoom in"  Click="OnZoomIn" />
            <Button Content="Zoom out" Click="OnZoomOut" />
            <Button Content="Fit"      Click="OnFit" />
        </ToolBar>

        <zp:ZoomPanControl x:Name="Plan" Background="White"
                           ZoomStep="1.25" ZoomMinimumDepth="0.1" ZoomMaximumDepth="8">
            <Image Source="Plans/second-floor.png" Stretch="None" />
        </zp:ZoomPanControl>
    </DockPanel>
</Window>

The handlers.

private void OnZoomIn(object sender, RoutedEventArgs e)  { Plan.ZoomLevel *= 1.25; }
private void OnZoomOut(object sender, RoutedEventArgs e) { Plan.ZoomLevel /= 1.25; }
private void OnFit(object sender, RoutedEventArgs e)     { Plan.ZoomToFit(); }