ZoomPanel是一個自定義控件,它為任何的WPF應(yīng)用程序提供動畫縮放和平移功能。
ZoomPanel is a custom control that provides animated zooming and panning capabilities to any WPF application.
主要功能
-
支持縮放和平移的所有類型:移動,放大,縮小,矩形縮放,復位。
-
使用鼠標滾輪放大和縮小。
-
為更好的用戶體驗提供動畫索縮放(為縮放位圖圖像提高了性能)。
-
支持添加ZoomPanel到ScrollViewer
-
可限制的縮放區(qū)
-
支持動態(tài)和自定義內(nèi)容基于當前縮放級別的顯示— 例如針對縮放地圖。
-
許多方法和屬性用來定制ZoomPanel的行為。
-
完整的可定制的ZoomController使其適合您的應(yīng)用程序的樣式。
-
詳細的文檔和示例。
-
源代碼也可以被都買。
-
基于用戶反饋的積極開發(fā)。
在該庫中的控件
ZoomPanel控件只是Ab2d.Controls.ZoomPanel庫的主控件。該庫包含:
-
ZoomPanel —主控件,使得應(yīng)用程序的用戶用來縮放或平移ZoomPanel控件的內(nèi)容。
-
ZoomController—預定義的縮放控制器,它包含的那些按鈕用于改變當前ZoomPanel的縮放模式。該控件的優(yōu)點是它可以被放到用戶界面的任何地方。
-
ViewboxEx—擴展了標準的WPF的Viewbox使其具有Viewbox屬性,該屬性可以定義控件的內(nèi)容的哪些部分將被顯示。
-
RectAnimation—自定義Rect動畫類,它用于ZoomPanel的縮放和平移產(chǎn)生動畫效果。
注:該庫僅在WPF應(yīng)用程序中可用—不支持Silverlight。
該軟件包包含一個詳細的幫助文件。
這里還有許多示例用于查看ZoomPanel和其他控件的實際運行效果。此外,其他三個用戶案例示例顯示了使用先進的縮放和平移來改善一個現(xiàn)實世界的應(yīng)用程序是多么的簡單(點擊圖片看更大的屏幕截圖):
|
|
|
Painter
|
Documents browser
|
Image browser
|
ZoomPanel 和ZoomController
WPF的矢量圖形引擎是一個完美的選擇用于顯示復雜的2D圖表,模式,復雜的圖表和其他的圖表元素。它常常是為了應(yīng)用程序的用戶用于查看整個圖像,同時用戶也能夠放大來查看其細節(jié)部分。WPF已經(jīng)提供了一些基本的縮放和轉(zhuǎn)換機制。但它從Scale和Translate Transform到一個偉大的用戶體驗經(jīng)歷了很長的一段路程。
下面的代碼是所有需要使用具有默認的ZoomController的ZoomPanel所必須的(在右上角的5個按鈕):
01.<Window x:Class="Ab2d.ZoomControlSample.ZoomPanelSample"
02.xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel">
05. <Grid>
06. <ab2d:ZoomPanel Name="myZoomPanel">
07. <TextBlock>12345</TextBlock>
08. </ab2d:ZoomPanel>
09. <ab2d:ZoomController VerticalAlignment="Top"
10. HorizontalAlignment="Right"/>
11. </Grid>
12.</Window>
首先,我們需要向我們的程序集中添加應(yīng)用并添加命名空間的聲明到根元素中。該ZoomPanel控件完成了大部分的“魔力”。基于它的ZoomMode,它可以放大,縮小,平移,縮放到ZoomPanel的內(nèi)容的選定的矩形區(qū)域(在我們的示例中時“12345”文本)。ZoomController控件只是一個預定義的ToggleButtons面板,它使得應(yīng)用程序的用戶在ZoomPanel上不同的ZoomMode 切換。
以下的ZoomModes可用:
-
移動模式使得使用按下鼠標左鍵來移動ZoomPanel中的內(nèi)容(平移)。
-
放大模式放大內(nèi)容。當左鍵被點擊后,鼠標點擊的位置就成為當前圖像的中心點。
-
縮小模式類似于ZoomIn,只是它縮小了圖像。
-
矩形模式使得用戶使用拖拽鼠標畫出一個矩形—然后釋放鼠標左鍵使得在所得到的矩形區(qū)域中顯示放大或縮小的內(nèi)容以適合ZoomPanel。
-
None模式禁用ZoomPanel。
在所有的縮放模式中除了None,放大和縮小也可以使用鼠標滾輪來進行(如果IsMouseWheelZoomEnabled屬性沒有被禁用)。
ZoomPanel可以使用許多它自身的公共方法完全的定制。另外從中可以得到一個自定義的控件并且一些核心的方法可以被重載,以提供自定義的行為。
它還可以創(chuàng)建您自己的ZoomController— 在示例程序中的相關(guān)包中顯示了兩種不同的方法可以實現(xiàn)這一點。
有關(guān)屬性和方法的更多信息能夠在該軟件包所包含的幫助文檔中找到。
ViewboxEx
ViewboxEx控件是非常類似標準的WPF的Viewbox控件。使用它的默認設(shè)置它伸展和縮放一個單一的子視圖以填充現(xiàn)有可用的控件。
ViewboxEx通過定義額外的屬性擴展了Viewbox—Viewbox。它的默認值作為字符串是“0 0 1 1”—其定義了一個在(0,0)開始的并其高度和寬度為1的矩形。這就意味著顯示整個內(nèi)容——通過相對的默認值(1指的是100%)。
下面的代碼示例顯示的只包含TextBlock的右半部分— 以該視圖的50%比例開始并顯示寬度的50%。
1.<ab2d:ViewboxEx Name="ViewboxEx1"
2. Viewbox="0.5 0 0.5 1" Stretch="Fill">
3. <TextBlock>12345</TextBlock>
4.</ab2d:ViewboxEx>
以下來自示例應(yīng)用層序中的圖像顯示了一些其他Viewbox值的顯示結(jié)果:
RectAnimation
RectAnimation是一個自定義的動畫類,它能夠被用于一個矩形到另一個矩形的動畫產(chǎn)生。它與ZoomPanel控件一起使用為縮放產(chǎn)生動畫。下面的代碼顯示了一個可用的示例。
1.<ab2d:RectAnimation From="0 0 1 1"
2. To="0.5 0.5 0.5 0.5"
3. Duration="0:0:4"
4. Storyboard.TargetName="ViewboxEx1"
5. Storyboard.TargetProperty="Viewbox"/>
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 (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.
Controls in the library
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.
The package includes a detailed help file.
There are also many samples to see the ZoomPanel and other controls in action. Besides other samples there are also three Use Case samples that shows how simple is to improve a real world application with advanced zooming and panning (click on image to see a bigger screenshot):
|
|
|
Painter
|
Documents browser
|
Image browser
|
ZoomPanel and ZoomController
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):
01.<Window x:Class="Ab2d.ZoomControlSample.ZoomPanelSample"
02.xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03.xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04.xmlns:ab2d="clr-namespace:Ab2d.Controls;assembly=Ab2d.Controls.ZoomPanel">
05. <Grid>
06. <ab2d:ZoomPanel Name="myZoomPanel">
07. <TextBlock>12345</TextBlock>
08. </ab2d:ZoomPanel>
09. <ab2d:ZoomController VerticalAlignment="Top"
10. HorizontalAlignment="Right"/>
11. </Grid>
12.</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
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:
1.<ab2d:ViewboxEx Name="ViewboxEx1"
2. Viewbox="0.5 0 0.5 1" Stretch="Fill">
3. <TextBlock>12345</TextBlock>
4.</ab2d:ViewboxEx>
The following images from sample application show results of some other Viewbox values:
RectAnimation
RectAnimation is a custom animation class that can be use to animate one Rect to another. It is used with ZoomPanel control to animate the zooming. The following code shows a possible use.
1.<ab2d:RectAnimation From="0 0 1 1"
2. To="0.5 0.5 0.5 0.5"
3. Duration="0:0:4"
4. Storyboard.TargetName="ViewboxEx1"
5. Storyboard.TargetProperty="Viewbox"/>