ZoomPanel - the Ultimate Zoom Panel for WPF

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

[all videos]

• 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 (improved performance for zooming bitmap images).
• 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.
• Detailed documentation and samples.
• Source code can be purchased also.
• Active development based on users feedback.

ZoomPanel control is just the main control in the Ab2d.Controls.ZoomPanel library. The library contains:

• ZoomPanel - the main control that enables users of the application to zoom or pan the content of the ZoomPanel control.
• ZoomController - the predefined zoom controler that contains buttons to change the current ZoomMode of the ZoomPanel. The benefit of this control is that it can be put anywhere on the user interface.
• ViewboxEx - extends the standard WPF's Viewbox with the Viewbox property that defines which part of the control's content will be shown.
• RectAnimation - custom Rect animation class that is used to animate the zooming and panning of ZoomPanel.

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

Painter	Documents browser	Image browser

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. But it is a long way from Scale and Translate Transform to a great user experience.

The following code is all that is needed to use the ZoomPanel with the default ZoomController
(5 buttons on the top-right):

<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">
      <TextBlock>12345</TextBlock>
    </ab2d:ZoomPanel>
    <ab2d:ZoomController VerticalAlignment="Top" 
                            HorizontalAlignment="Right"/>
  </Grid>
</Window>

Firstly 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 (in our sample "12345" text). 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.

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

ViewboxEx control is very similar to standard WPF's Viewbox control. With its default setting it stretch and scale a single child to fill the available space.

ViewboxEx extends the Viewbox by defining additional property - Viewbox. Its default value as string is "0 0 1 1" - this defines a Rect at (0,0) and its width and heigth to 1. This means the whole content is shown - by default the values are relative (1 meaning 100%).

The following code sample shows only the right half of the containing TextBlock - starting at 50% and showing 50% of width:

<ab2d:ViewboxEx Name="ViewboxEx1"
                   Viewbox="0.5 0 0.5 1" Stretch="Fill">
    <TextBlock>12345</TextBlock>
</ab2d:ViewboxEx>  

<ab2d:RectAnimation From="0 0 1 1" 
                       To="0.5 0.5 0.5 0.5"
                       Duration="0:0:4"
                       Storyboard.TargetName="ViewboxEx1" 
                       Storyboard.TargetProperty="Viewbox"/>

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

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 posibility 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 (handle cases when sometimes user has access to ClassesRoot and sometimes not).
• Added Visual Studio ToolBox icons and improved designer support.

 Subscribe to RSS feed to Blog posts related to ZoomPanel.