ZoomPanel是一個(gè)自定義控件,它為任何的WPF應(yīng)用程序提供動(dòng)畫(huà)縮放和平移功能。
ZoomPanel is a custom control that provides animated zooming and panning capabilities to any WPF application.
主要功能
-
支持縮放和平移的所有類型:移動(dòng),放大,縮小,矩形縮放,復(fù)位。
-
使用鼠標(biāo)滾輪放大和縮小。
-
為更好的用戶體驗(yàn)提供動(dòng)畫(huà)索縮放(為縮放位圖圖像提高了性能)。
-
支持添加ZoomPanel到ScrollViewer
-
可限制的縮放區(qū)
-
支持動(dòng)態(tài)和自定義內(nèi)容基于當(dāng)前縮放級(jí)別的顯示— 例如針對(duì)縮放地圖。
-
許多方法和屬性用來(lái)定制ZoomPanel的行為。
-
完整的可定制的ZoomController使其適合您的應(yīng)用程序的樣式。
-
詳細(xì)的文檔和示例。
-
源代碼也可以被都買(mǎi)。
-
基于用戶反饋的積極開(kāi)發(fā)。
在該庫(kù)中的控件
ZoomPanel控件只是Ab2d.Controls.ZoomPanel庫(kù)的主控件。該庫(kù)包含:
-
ZoomPanel —主控件,使得應(yīng)用程序的用戶用來(lái)縮放或平移ZoomPanel控件的內(nèi)容。
-
ZoomController—預(yù)定義的縮放控制器,它包含的那些按鈕用于改變當(dāng)前ZoomPanel的縮放模式。該控件的優(yōu)點(diǎn)是它可以被放到用戶界面的任何地方。
-
ViewboxEx—擴(kuò)展了標(biāo)準(zhǔn)的WPF的Viewbox使其具有Viewbox屬性,該屬性可以定義控件的內(nèi)容的哪些部分將被顯示。
-
RectAnimation—自定義Rect動(dòng)畫(huà)類,它用于ZoomPanel的縮放和平移產(chǎn)生動(dòng)畫(huà)效果。
注:該庫(kù)僅在WPF應(yīng)用程序中可用—不支持Silverlight。
該軟件包包含一個(gè)詳細(xì)的幫助文件。
這里還有許多示例用于查看ZoomPanel和其他控件的實(shí)際運(yùn)行效果。此外,其他三個(gè)用戶案例示例顯示了使用先進(jìn)的縮放和平移來(lái)改善一個(gè)現(xiàn)實(shí)世界的應(yīng)用程序是多么的簡(jiǎn)單(點(diǎn)擊圖片看更大的屏幕截圖):
|
|
|
Painter
|
Documents browser
|
Image browser
|
ZoomPanel 和ZoomController
WPF的矢量圖形引擎是一個(gè)完美的選擇用于顯示復(fù)雜的2D圖表,模式,復(fù)雜的圖表和其他的圖表元素。它常常是為了應(yīng)用程序的用戶用于查看整個(gè)圖像,同時(shí)用戶也能夠放大來(lái)查看其細(xì)節(jié)部分。WPF已經(jīng)提供了一些基本的縮放和轉(zhuǎn)換機(jī)制。但它從Scale和Translate Transform到一個(gè)偉大的用戶體驗(yàn)經(jīng)歷了很長(zhǎng)的一段路程。
下面的代碼是所有需要使用具有默認(rèn)的ZoomController的ZoomPanel所必須的(在右上角的5個(gè)按鈕):
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ū)域(在我們的示例中時(shí)“12345”文本)。ZoomController控件只是一個(gè)預(yù)定義的ToggleButtons面板,它使得應(yīng)用程序的用戶在ZoomPanel上不同的ZoomMode 切換。
以下的ZoomModes可用:
-
移動(dòng)模式使得使用按下鼠標(biāo)左鍵來(lái)移動(dòng)ZoomPanel中的內(nèi)容(平移)。
-
放大模式放大內(nèi)容。當(dāng)左鍵被點(diǎn)擊后,鼠標(biāo)點(diǎn)擊的位置就成為當(dāng)前圖像的中心點(diǎn)。
-
縮小模式類似于ZoomIn,只是它縮小了圖像。
-
矩形模式使得用戶使用拖拽鼠標(biāo)畫(huà)出一個(gè)矩形—然后釋放鼠標(biāo)左鍵使得在所得到的矩形區(qū)域中顯示放大或縮小的內(nèi)容以適合ZoomPanel。
-
None模式禁用ZoomPanel。
在所有的縮放模式中除了None,放大和縮小也可以使用鼠標(biāo)滾輪來(lái)進(jìn)行(如果IsMouseWheelZoomEnabled屬性沒(méi)有被禁用)。
ZoomPanel可以使用許多它自身的公共方法完全的定制。另外從中可以得到一個(gè)自定義的控件并且一些核心的方法可以被重載,以提供自定義的行為。
它還可以創(chuàng)建您自己的ZoomController— 在示例程序中的相關(guān)包中顯示了兩種不同的方法可以實(shí)現(xiàn)這一點(diǎn)。
有關(guān)屬性和方法的更多信息能夠在該軟件包所包含的幫助文檔中找到。
ViewboxEx
ViewboxEx控件是非常類似標(biāo)準(zhǔn)的WPF的Viewbox控件。使用它的默認(rèn)設(shè)置它伸展和縮放一個(gè)單一的子視圖以填充現(xiàn)有可用的控件。
ViewboxEx通過(guò)定義額外的屬性擴(kuò)展了Viewbox—Viewbox。它的默認(rèn)值作為字符串是“0 0 1 1”—其定義了一個(gè)在(0,0)開(kāi)始的并其高度和寬度為1的矩形。這就意味著顯示整個(gè)內(nèi)容——通過(guò)相對(duì)的默認(rèn)值(1指的是100%)。
下面的代碼示例顯示的只包含TextBlock的右半部分— 以該視圖的50%比例開(kāi)始并顯示寬度的50%。
1.<ab2d:ViewboxEx Name="ViewboxEx1"
2. Viewbox="0.5 0 0.5 1" Stretch="Fill">
3. <TextBlock>12345</TextBlock>
4.</ab2d:ViewboxEx>
以下來(lái)自示例應(yīng)用層序中的圖像顯示了一些其他Viewbox值的顯示結(jié)果:
RectAnimation
RectAnimation是一個(gè)自定義的動(dòng)畫(huà)類,它能夠被用于一個(gè)矩形到另一個(gè)矩形的動(dòng)畫(huà)產(chǎn)生。它與ZoomPanel控件一起使用為縮放產(chǎn)生動(dòng)畫(huà)。下面的代碼顯示了一個(gè)可用的示例。
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"/>