ZoomPanel - powerful zooming and panning for WPF

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

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.

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 TargetZoomPanel="{Binding ElementName=myZoomPanel}"
                         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).

ZoomPanel besides common properties like BorderBrush, Background, etc. defines the following properties:

• ZoomMode - Gets or sets the current zoom mode of the ZoomPanel.
• IsAnimated - If True than zoom changes are animated. Default value is true.
• IsPanningAnimated - If true than also mouse panning is animated, if false mouse panning has immediate effect. Default value is false.
• AnimationDuration - Duration of zoom change animation. Default value is 200 milliseconds.
• MouseWheelZoomFactor - Gets or sets the zoom factor that is applied to mouse wheel zooming. The value must be bigger or equal than 1. This value is used for zoom in factor. The zoom out factor is calculated in GetZoomOutFactor method as 1 / zoom factor (can be overridden in derived class).
• ZoomInOutFactor - Gets or sets the zoom in and out factor for ZoomIn and ZoomOut mode. The value must be bigger or equal than 1. This value is used for zoom in factor. The zoom out factor is calculated in GetZoomOutFactor method as 1 / zoom factor (can be overridden in derived class).
• IsMouseWheelZoomEnabled - Gets or sets if zooming with mouse wheel is enabled or disabled. Default value is true (enabled).
• IsToggleZoomModeEnabled - Gets or sets if zoom mode toggling is enabled. If true than when setting zoom mode once again to the current zoom mode, the zoom mode goes to None. This is useful for ZoomControllers when for example clicking for the first time on Move button sets the ZoomMode to Move. Clicking on Move button again disables Move mode - goes to None ZoomMode. Default value is true (enabled).
• RectangleStroke - Stroke of the Rectangle used in Rectangle ZoomMode. Default value is Blue.
• RectangleFill - Fill Brush of the Rectangle used in Rectangle ZoomMode. Default value is #46AAAAFF - semi-transparent light blue.

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"/>

The ZoomPanel library and its source code can be purchased from my Purchase page.
It is also possible to download a 60 days evaluation version:

DOWNLOAD 60 days evaluation of ZoomPanel (891 Kb)