ZoomPanel Class

ZoomPanel control can be used to simply add a powerful and animated zooming and panning to any WPF application. The control can be used to zoom and pan bitmap images, vector graphics, UI Elements, etc.

Content can be zoomed and panned with mouse, with touch and multi-touch gestures. Touch support can be enabled or disabled with IsTouchEnabled, IsTouchMoveEnabled, IsTouchScaleEnabled and IsTouchRotateEnabled properties. By default all properties are set to true.

NOTE that touch controls are working only in .Net 4 build of ZoomPanel (or newer) and does not work in .Net 3.5 build of the library.

The following image shows the ZoomPanel with ZoomController in the upper left corner, ZoomPanelNavigator in the upper left corner and ZoomPanelMiniMap in the bottom right corner:

ZoomPanel is usually used with a ZoomController that sets the mode in which ZoomPanel works. The following ZoomPanel modes are supported: None, Move, Rectangle, ZoomIn, ZoomOut (see ZoomPanelZoomModeType for more info). The current zoom mode can be get or set with ZoomMode property.

With using ZoomPanelNavigator it is possible to set the zoom factor with a slider and move around the visible area with buttons.

The 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).

By default the content of the ZoomPanel can be freely zoomed in and out and panned to any direction. But it is possible to limit this by ViewboxLimits, ViewboxMinSize and IsViewboxLimited. The ViewboxLimits sets the maximum Viewbox size used by ZoomPanel - maximum zoom out level. The ViewboxMinSize sets the minimum Viewbox size used by ZoomPanel - maximum zoom in level.

To add scrollbars to the ZoomPanel simply add it inside ScrollViewer control and set the CanContentScroll property on ScrollViewer to True (see the sample below). The ZoomPanel implements the IScrollInfo interface. Therefore it can be fully controlled by the scrollbars. The size and position of the scrollbars is determined by the currently shown area.

By default the zooming in and out is animated using quintic function to ease the animation. The default animation is implemented in ZoomPanelQuinticAnimator class. It is possible to provide custom animations with deriving a class from BaseZoomPanelAnimator and setting its instance to the ZoomPanelAnimator property.

ZoomPanel also has a lot of methods that can be used to modify the ZoomPanel from code-behind. See samples for more info.

With calling RegisterCustomContentProvider it is also possible to zoom dynamic and custom content - the content that is based on the current zoom level - for example a map.

The following sample shows how to use the ZoomPanel and ZoomController:

<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>
      <ScrollViewer CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
          <ab2d:ZoomPanel Name="myZoomPanel" Viewbox="0.2 0.2 0.6 0.6" IsAnimated="True" AnimationDuration="0:0:0.5"
                          ViewboxLimits="-0.1 -0.1 1.2 1.2" ViewboxMinSize="0.1 0.1" IsViewboxLimited="True">
              <TextBlock>12345</TextBlock>
          </ab2d:ZoomPanel>
      </ScrollViewer>  
      <ab2d:ZoomController VerticalAlignment="Top" 
                           HorizontalAlignment="Right"/>
      <ab2d:ZoomPanelNavigator VerticalAlignment="Top" 
                               HorizontalAlignment="Left"/>
      <ab2d:ZoomPanelMiniMap VerticalAlignment="Bottom" 
                             HorizontalAlignment="Right"/>
    </Grid>
</Window>

The following code is used to zoom the content of myZoomPanel for factor 1.5 (for 50%):

myZoomPanel.ZoomForFactor(1.5);

Reference