ZoomPanel
Overview
Features
Samples
Online help
Latest version: 6.1.8514

ZoomPanel

The ultimate zooming and panning control for WPF.

Download now


ZoomPanel - the ultimate Zoom control for WPF

ZoomPanel is a custom control that provides the ultimate animated zooming and panning capabilities to any WPF application.

At first, zooming and panning seems like a simple task in WPF because any element can be scaled with ScaleTransform. But when you want to integrate scrollbars, animation, mouse control, zoom to target, mini map and other features, this task quickly becomes very complicated.

Do not spend many hours developing zooming features on your own. Instead, use ZoomPanel with its ultimate zooming features and spend your precious time on other tasks.


Main features

  • Support for all types of zooming and panning: move, zoom in, zoom out, rectangle zoom, reset.
  • Zooming in and out with mouse wheel.
  • Animated zooming for great user experience (with additional optimizations for zooming bitmap images).
  • Support for custom animations.
  • Support for adding ZoomPanel into ScrollViewer.
  • Possibility to limit the zoom area.
  • Support for dynamic and custom content that is shown based on the current zoom level - for example for zooming maps.
  • Many methods and properties to customize the behavior of ZoomPanel.
  • Fully customizable ZoomController to make it fit into you application's style.
  • Included MiniMap control that shows which part of the content is shown. It can be used to preview which part of the content is shown. It also enables moving the shown content and zooming in and out with mouse wheel.
  • Included navigator control that can be used to move around zoom area and set zoom factor with the slider.
  • Detailed documentation and samples.
  • Source code can be purchased also.
  • Full support for multi-touch move, scale and rotate.
  • Active development based on users feedback.


.Net 5 and newer notice:

ZoomPanel library do not provide a special build for .Net 5 or newer framework. But the library can be still used in .Net 5 and newer frameworks because newer frameworks support using assemblies build with older framework version. But to distribute a .Net 5 or newer application you will not be able to use standard licensing with license.licx files. You will need to use licensing by using "Application license key".



Controls in the library

The main controls of the Ab2d.Controls.ZoomPanel library are:

  • ZoomPanel - the main control that enables users of the application to zoom or pan the content of the ZoomPanel control. The action that is performed on mouse events are defined by the ZoomPanel's ZoomMode.
  • ZoomController - the predefined zoom controller that contains buttons to change the current ZoomMode of the ZoomPanel (shown in the upper right corner of the image above).
  • ZoomPanelNavigator - contains a circle with buttons to move the shown area around or reset the zoom mode. It also contains a slider to control the zoom factor (shown in the upper left corner of the image above).
  • ZoomPanelMiniMap - shows which part of the content is shown. It can be used to preview which part of the content is shown. It also enables moving the shown content and zooming in and out with mouse wheel (shown in the bottom right corner of the image above).

Note: the library is available only for WPF applications - not for Silverlight.



Sample usage

WPF's vector based graphical engine is a perfect choice to display complex 2D diagrams, schemas, complex graphs and other graphical elements. It is often necessary for the user of the application to see the whole image and that the user can also zoom in to see the details. The WPF already provides some basic scaling and translating mechanism. ZoomPanel adds additional features that makes any possible zooming and panning task very easy and delivers great results.


The following code is all that is needed to use the main controls in the ZoomPanel library and produces similar results as in the image above: 

<Window x:Class="Ab2d.ZoomControlSample.ZoomPanelSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel">
    <Grid>
        <ab2d:ZoomPanel Name="myZoomPanel">
            <!-- replace this with any content that will be zoomed -->
        </ab2d:ZoomPanel>
        <ab2d:ZoomController VerticalAlignment="Top" 
                             HorizontalAlignment="Right"/>
        <ab2d:ZoomPanelNavigator VerticalAlignment="Top" 
                                 HorizontalAlignment="Left"/>
        <ab2d:ZoomPanelMiniMap VerticalAlignment="Bottom" 
                               HorizontalAlignment="Right"/>
    </Grid>
</Window>

First we need to add reference to our assembly and add a namespace declaration to the root element. The ZoomPanel control does most of the "magic". Based on its ZoomMode it enables zooming in and out, panning, zooming to selected rectangle of the content of ZoomPanel. The ZoomController control is just a predefined ToggleButtons panel that enables user of the application to switch between different ZoomMode on ZoomPanel.

The following ZoomModes are available:

  • Move mode enables moving the content of ZoomPanel with left mouse button pressed (panning).
  • ZoomIn mode zooms in the content. When the left button is clicked, the location under the mouse becomes a new center of the image.
  • ZoomOut mode is similar to ZoomIn, but it zooms out.
  • Rectangle mode enables user to draw a rectangle with dragging the mouse - after releasing the left mouse button the content is zoomed in or out to show the area of the rectangle scaled to fit inside the ZoomPanel.
  • None mode disables ZoomPanel.

In all zoom modes except None zooming in and out can be also done with mouse wheel (if not disabled by IsMouseWheelZoomEnabled property).

The ZoomPanel can be fully customized by using many of its public methods. Also a custom control can be derived from it and some core methods can be overriden to provide custom behavior.

It is also possible to create your own ZoomController - the sample application that comes with the package shows two different ways to do this.

The ZoomPanelNavigator can be used to select the zoom factor by slider and to move the shown area around with buttons. The control can be simply customized with setting your own colors, selecting orientation or showing just part of the control (only the buttons or only the slider).

The sample also places a ZoomPanelMiniMap to the bottom right corder. The control shows which part of the content is currently visible. It can be also used to move the shown area around with dragging the rectangle in the MiniMap. With mouse wheel it is also possible to zoom in and out the content of the ZoomPanel.

More information on properties and methods can be found in the help file that is included in the package.


ZoomPanel is great when it is showing vector based content. It is very useful for viewing images created from svg or metafiles. The following sample is using SvgViewbox from Ab2d.ReaderSvg library to read myVectorDiagram.svg file. With ZoomPanel it is possible to zoom in the image to see additional details. 

<Window x:Class="Ab2d.ZoomControlSample.ZoomPanelSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel"
xmlns:readerSvg="clr-namespace:Ab2d.Controls;assembly=Ab2d.ReaderSvg">
    <Grid>
        <ab2d:ZoomPanel Name="myZoomPanel">
            <readerSvg:SvgViewbox Source="myVectorDiagram.svg"/>
        </ab2d:ZoomPanel>
    </Grid>
</Window>

The following sample is showing how to read a metafile with WmfViewbox control from Ab2d.ReaderWmf library.

<Window x:Class="Ab2d.ZoomControlSample.ZoomPanelSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel"
xmlns:readerWmf="clr-namespace:Ab2d.Controls;assembly=Ab2d.ReaderWmf">
    <Grid>
        <ab2d:ZoomPanel Name="myZoomPanel">
            <readerWmf:WmfViewbox Source="myMetafile.emf"/>
        </ab2d:ZoomPanel>
    </Grid>
</Window>


Samples

The library comes with many samples that show the ZoomPanel and other controls in action. The following are two videos and screenshots from the samples (click on image to see video or a bigger screenshot):

 

Using ZoomPanel in a simple painter application
Document browser with ZoomPanel control
Simple image browser
Basic ZoomPanel sample with ZoomController and ZoomPanelMiniMap
Customizing ZoomPanelNavigator
Navigating through ZoomPanel history
Using ZoomPanel inside ScrollViewer


Related Blog posts
To see the development history of Ab2d.ReaderSvg and ViewerSvg, check out the related blog posts.


Version history


New in version 6.1

  • Prevented using NaN when calculating aspect rate - this fixes calculating of HorizontalOffset, VerticalOffset, ViewportWidth and ViewportHeight.

New in version 6.0

  • Added special builds for .Net Core 3.1, .Net 5.0 and .Net 6.0.
  • Added version that is distributed by a NuGet package. Note that this version uses different licensing mechanism as the version that is installed by the commercial installer.

New in version 5.2

  • Prevented slight content movement when user clicked on ZoomPanel.
  • Added ViewboxAnimationStarted event to be notified when the zooming animation is started (there is already a ViewboxAnimationCompleted event).
  • Added UseLowQualityBitmapScalingModeWhenAnimating property that allows using LowQuality BitmapScalingMode during animation to improve performance of animations.

New in version 5.1

  • Increased number of history items to 100.

New in version 5.0

  • Added multi-touch support to ZoomPanel control - no need to use separate MultiTouchZoomPanel control.
  • Improved zoom position when using pinch to zoom.

New in version 4.1

  • Fixed using ZoomPanel under some circumstances when viewbox limits is set.

New in version 4.0

  • Reimplemented the code that check if the currently seen area is inside ViewboxLimits - this also fixes issues with FitToWidth, FitToHeight, FitToLimitsWidth and FitToLimitsHeight.
  • Fixed issues when ZoomPanel was inside ScrollViewer.

New in version 3.8

  • Fixed FitToWidth, FitToHeight, FitToLimitsWidth and FitToLimitsHeight methods on ZoomPanel - before it was possible that after calling those functions the content was displayed off center.

New in version 3.7

  • Fixed problems with panning with custom content.

New in version 3.6

  • Change build target framework from .Net 3.0 to 3.5 Client Profile.

New in version 3.5

  • Fixed an issue where a "Reference not set to an object" exception was thrown when ZoomPanelMiniMap was added to controls tree but was visible and then the user changed zoom mode on the ZoomController.

New in version 3.4

  • Improved controlling ZoomPanel with moving rectangle around in ZoomPanelMiniMap (before movements were slow).
  • Fixed showing content of ZoomPanel in ZoomPanelMiniMap - before it could happen that the image in mini map was too small when the content of the ZoomPanel is changed.

New in version 3.3

  • Added animation easing to ZoomPanel. Added new ZoomPanelAnimator property to ZoomPanel.
  • Added two predefined ZoomPanelAnimators: ZoomPanelLinearAnimator and ZoomPanelQuinticAnimator (used by default). Custom animations can be created with deriving from BaseZoomPanelAnimator.
  • Fixed changing Viewbox with SetViewbox or SetZoom method when the RotationAngle is not 0 and it is not changed. Before the RotationAngle was reset to 0 in some circumstances.

New in version 3.2

  • Improved commercial licensing code to prevent delay caused in RSACryptoServiceProvider under some circumstances.
  • Added Ab2d.ZoomPanel.LicenseHelper.EmbeddedLicenseAssembly property to speed-up looking for embedded license key in commercial version.

New in version 3.1

  • Fixed problems with using None for Stretch value.
  • Improved using ViewboxLimits.

New in version 3.0

  • Added Stretch property to ZoomPanel - before only Uniform stretch was used. Now it is also possible to use other stretch values: None, Fill, Uniform or UniformToFill.
  • Added IsZoomPositionPreserved property to ZoomPanel - it controls if mouse wheel zooms at the mouse position or at the center of the ZoomPanel.
  • Added RotationAngle property to ZoomPanel.
  • Added ZoomFactor, CenterPosition and CenterPositionUnits properties to ZoomPanel.
  • Added support to save and navigate through the ZoomPanel history.
  • Added ZoomPanelNavigator, NavigationCircle and NavigationSlider controls. They can be used to move around zoom area and set zoom factor with slider.
  • Added ZoomPanelMiniMap, ViewboxExMiniMap and BaseMiniMap controls. The ZoomPanelMiniMap can be used to preview which part of the content is shown. It also enables moving the shown content and zooming in and out with mouse wheel.
  • Added ActualViewbox to ZoomPanel - it describes the actually shown viewbox (the difference is created because of different aspect ratio).
  • Added SetZoom method to ZoomPanel with many overloads to simplify setting which part of the content is shown.
  • Added ZoomAtMousePosition and ZoomAtRelativeMousePosition methods to ZoomPanel.
  • Added IsAutoZoomPanelFindingEnabled property to ZoomController - now it is possible to disable automatically finding the ZoomPanel in case we need to set it manually afterwards.
  • Improved design time support when setting Viewbox value for ZoomPanel. Now it is allowed to temporary set the value of Width and Height to 0 (before when 1 was changed the 0.5 the designer throw an exception when 1 was replaced with 0).
  • Added MultiTouchZoomPanel control with full source code.
  • BREAKING CHANGE: When using custom content: Now ZoomFactor is used instead of zoomLevel (in CustomContentProvider callback).

New in version 2.1

  • Added FitToWidth, FitToLimitsWidth, FitToHeight, FitToLimitsHeight to simplify showing documents.

New in version 2.0

  • Added IScrollInfo support - possibility to use ZoomPanel inside ScrollViewer.
  • Added possibility to limit the zoom area with ViewboxLimits, ViewboxMinSize and IsViewboxLimited properties.
  • When animating images the scale quality is lowered to increase the frame rate.
  • Added support for custom or dynamic zoom content - RegisterCustomContentProvider and UnregisterCustomContentProvider.
  • Added a new ZoomPanel.SetViewboxNow method - the value is of Viewbox is immediately changed regardless of IsAnimated property.
  • Added a new ZoomPanel.ResetNow method - immediate reset of viewbox.
  • Added ResetToLimits and ResetToLimitsNow methods.
  • Added PreviewViewboxChangedEvent and ViewboxChangedEvent - in PreviewViewboxChangedEvent subscriber can prevent or change the changed Viewbox.
  • Added IsResetToLimits to ZoomController - if true the reset button on ZoomController resets the ZoomPanel to limits.

New in version 1.2

  • Added support for WPF Browser applications. There is also a new sample that demonstrated this.
  • Added Viewbox property - Gets or sets the current viewbox as Rect used to determine which part of ZoomPanel's content is shown.
  • Fixed problems when the ZoomPanel content was empty and zoom buttons on ZoomControler were used.
  • Fixed some problems with licensing and evaluation.
  • Added TargetZoomPanelName property to ZoomController - the ZoomPanel that is controller with ZoomController can now be specified by its name (no need for DataBinding on TargetZoomPanel property any more).
  • Added automatic discovery of ZoomPanel on ZoomController. This means setting TargetZoomPanelName or TargetZoomPanel is not needed anymore. The ZoomController will automatically find the ZoomPanel. So everything you need to do is simply drag and drop ZoomPanel and ZoomController from the Toolbox on the Design Surface.

New in version 1.1

  • Improved starting evaluation (fixed problems with registry access).
  • Added Visual Studio ToolBox icons and improved designer support.

 

See also the Related blog posts.