blocks|key|348313|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|348314|平移:将图像放在画布内。实现鼠标向上、向下和移动事件以移动Canvas.Top和Canvas.Left属性。当关闭时，将isDraggingFlag标记为true，当打开时，将标志设置为false。|unordered-list-item|348315|缩放:将滑块绑定到画布的缩放变换|348316|显示覆盖:在包含图像的画布顶部添加不带背景的附加画布。|348317|显示原始图像:+ViewBox|348318|内的图像控件|348319|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|N|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|O|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|P|7|@]|8|@]|9|$]]|$1|F|3|G|4|C|6|Q|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|R|7|@]|8|@]|9|$]]|$1|J|3|K|4|5|6|S|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|T|7|@]|8|@]|9|$]]]|M|$]]

<ul>
<li>Pan: Put the image inside of a Canvas. Implement Mouse Up, Down, and Move events to move the Canvas.Top, Canvas.Left properties. When down, you mark a isDraggingFlag to true, when up you set the flag to false. On move, you check if the flag is set, if it is you offset the Canvas.Top and Canvas.Left properties on the image within the canvas.</li>
<li>Zoom: Bind the slider to the Scale Transform of the Canvas</li>
<li>Show overlays: add additional canvas's with no background ontop the canvas containing the image.</li>
<li>show original image: image control inside of a ViewBox</li>
</ul>

blocks|key|3332147|text|我解决这个问题的方法是将图像放在边框中，并将其ClipToBounds属性设置为True。然后，图像上的RenderTransformOrigin被设置为0.5,0.5，因此图像将在图像的中心开始缩放。RenderTransform还被设置为包含ScaleTransform和TranslateTransform的TransformGroup。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3332148|然后我处理了图像上的MouseWheel事件以实现缩放|3332149|private+void+image_MouseWheel(object+sender,+MouseWheelEventArgs+e)
{
++++var+st+=+(ScaleTransform)image.RenderTransform;
++++double+zoom+=+e.Delta+>+0+?+.2+:+-.2;
++++st.ScaleX+%2B=+zoom;
++++st.ScaleY+%2B=+zoom;
}|code-block|syntax|javascript|3332150|为了处理平移，我做的第一件事是处理图像上的MouseLeftButtonDown事件，捕捉鼠标并记录它的位置，我还存储了TranslateTransform的当前值，这是为了实现平移而更新的内容。|3332151|Point+start;
Point+origin;
private+void+image_MouseLeftButtonDown(object+sender,+MouseButtonEventArgs+e)
{
++++image.CaptureMouse();
++++var+tt+=+(TranslateTransform)((TransformGroup)image.RenderTransform)
++++++++.Children.First(tr+=>+tr+is+TranslateTransform);
++++start+=+e.GetPosition(border);
++++origin+=+new+Point(tt.X,+tt.Y);
}|3332152|然后，我处理了MouseMove事件来更新TranslateTransform。|3332153|private+void+image_MouseMove(object+sender,+MouseEventArgs+e)
{
++++if+(image.IsMouseCaptured)
++++{
++++++++var+tt+=+(TranslateTransform)((TransformGroup)image.RenderTransform)
++++++++++++.Children.First(tr+=>+tr+is+TranslateTransform);
++++++++Vector+v+=+start+-+e.GetPosition(border);
++++++++tt.X+=+origin.X+-+v.X;
++++++++tt.Y+=+origin.Y+-+v.Y;
++++}
}|3332154|最后，不要忘了释放鼠标捕获。|3332155|private+void+image_MouseLeftButtonUp(object+sender,+MouseButtonEventArgs+e)
{
++++image.ReleaseMouseCapture();
}|3332156|至于用于调整大小的选择手柄，可以使用装饰器来完成，有关更多信息，请查看this+article。|offset|length|3332157|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms746703.aspx^0|0|0|0|0|0|0|0|0|0|Z|C|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$W|1G|X|1H|1|1I]]|A|$]]|$1|Y|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

The way I solved this problem was to place the image within a Border with it's ClipToBounds property set to True. The RenderTransformOrigin on the image is then set to 0.5,0.5 so the image will start zooming on the center of the image. The RenderTransform is also set to a TransformGroup containing a ScaleTransform and a TranslateTransform.

I then handled the MouseWheel event on the image to implement zooming

<pre><code>private void image_MouseWheel(object sender, MouseWheelEventArgs e)
{
 var st = (ScaleTransform)image.RenderTransform;
 double zoom = e.Delta &gt; 0 ? .2 : -.2;
 st.ScaleX += zoom;
 st.ScaleY += zoom;
}
</code></pre>

To handle the panning the first thing I did was to handle the MouseLeftButtonDown event on the image, to capture the mouse and to record it's location, I also store the current value of the TranslateTransform, this what is updated to implement panning.

<pre><code>Point start;
Point origin;
private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
 image.CaptureMouse();
 var tt = (TranslateTransform)((TransformGroup)image.RenderTransform)
 .Children.First(tr =&gt; tr is TranslateTransform);
 start = e.GetPosition(border);
 origin = new Point(tt.X, tt.Y);
}
</code></pre>

Then I handled the MouseMove event to update the TranslateTransform.

<pre><code>private void image_MouseMove(object sender, MouseEventArgs e)
{
 if (image.IsMouseCaptured)
 {
 var tt = (TranslateTransform)((TransformGroup)image.RenderTransform)
 .Children.First(tr =&gt; tr is TranslateTransform);
 Vector v = start - e.GetPosition(border);
 tt.X = origin.X - v.X;
 tt.Y = origin.Y - v.Y;
 }
}
</code></pre>

Finally don't forget to release the mouse capture.

<pre><code>private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
 image.ReleaseMouseCapture();
}
</code></pre>

As for the selection handles for resizing this can be accomplished using an adorner, check out <a href="http://msdn.microsoft.com/en-us/library/ms746703.aspx" rel="noreferrer">this article</a> for more information.

blocks|key|348399|text|试试这个缩放控件：http://wpfextensions.codeplex.com|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|348400|该控件的用法非常简单，引用wpfextensions程序集比：|348401|<wpfext:ZoomControl>
++++<Image+Source="..."/>
</wpfext:ZoomControl>|code-block|syntax|javascript|348402|目前不支持滚动条。(它将在一到两周内发布的下一个版本中)。|348403|entityMap|0|LINK|mutability|MUTABLE|url|http://wpfextensions.codeplex.com/^0|9|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Try this Zoom Control: <a href="http://wpfextensions.codeplex.com" rel="nofollow noreferrer">http://wpfextensions.codeplex.com</a>

usage of the control is very simple, reference to the wpfextensions assembly than:

<pre><code>&lt;wpfext:ZoomControl&gt;
 &lt;Image Source="..."/&gt;
&lt;/wpfext:ZoomControl&gt;
</code></pre>

Scrollbars not supported at this moment. (It will be in the next release which will be available in one or two week).

blocks|key|3332316|text|答案已在上面发布，但并不完整。下面是完整的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3332317|XAML|offset|length|style|BOLD|3332318|<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MapTest.Window1"
x:Name="Window"
Title="Window1"
Width="1950"+Height="1546"+xmlns:d="http://schemas.microsoft.com/expression/blend/2008"+xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"+xmlns:Controls="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions"+mc:Ignorable="d"+Background="#FF000000">

<Grid+x:Name="LayoutRoot">
++++<Grid.RowDefinitions>
++++++++<RowDefinition+Height="52.92"/>
++++++++<RowDefinition+Height="*"/>
++++</Grid.RowDefinitions>

++++<Border+Grid.Row="1"+Name="border">
++++++++<Image+Name="image"+Source="map3-2.png"+Opacity="1"+RenderTransformOrigin="0.5,0.5"++/>
++++</Border>

</Grid>|code-block|syntax|javascript|3332319|​|3332320|背后的代码|3332321|using+System.Linq;
using+System.Windows;
using+System.Windows.Input;
using+System.Windows.Media;

namespace+MapTest
{
++++public+partial+class+Window1+:+Window
++++{
++++++++private+Point+origin;
++++++++private+Point+start;

++++++++public+Window1()
++++++++{
++++++++++++InitializeComponent();

++++++++++++TransformGroup+group+=+new+TransformGroup();

++++++++++++ScaleTransform+xform+=+new+ScaleTransform();
++++++++++++group.Children.Add(xform);

++++++++++++TranslateTransform+tt+=+new+TranslateTransform();
++++++++++++group.Children.Add(tt);

++++++++++++image.RenderTransform+=+group;

++++++++++++image.MouseWheel+%2B=+image_MouseWheel;
++++++++++++image.MouseLeftButtonDown+%2B=+image_MouseLeftButtonDown;
++++++++++++image.MouseLeftButtonUp+%2B=+image_MouseLeftButtonUp;
++++++++++++image.MouseMove+%2B=+image_MouseMove;
++++++++}

++++++++private+void+image_MouseLeftButtonUp(object+sender,+MouseButtonEventArgs+e)
++++++++{
++++++++++++image.ReleaseMouseCapture();
++++++++}

++++++++private+void+image_MouseMove(object+sender,+MouseEventArgs+e)
++++++++{
++++++++++++if+(!image.IsMouseCaptured)+return;

++++++++++++var+tt+=+(TranslateTransform)+((TransformGroup)+image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);
++++++++++++Vector+v+=+start+-+e.GetPosition(border);
++++++++++++tt.X+=+origin.X+-+v.X;
++++++++++++tt.Y+=+origin.Y+-+v.Y;
++++++++}

++++++++private+void+image_MouseLeftButtonDown(object+sender,+MouseButtonEventArgs+e)
++++++++{
++++++++++++image.CaptureMouse();
++++++++++++var+tt+=+(TranslateTransform)+((TransformGroup)+image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);
++++++++++++start+=+e.GetPosition(border);
++++++++++++origin+=+new+Point(tt.X,+tt.Y);
++++++++}

++++++++private+void+image_MouseWheel(object+sender,+MouseWheelEventArgs+e)
++++++++{
++++++++++++TransformGroup+transformGroup+=+(TransformGroup)+image.RenderTransform;
++++++++++++ScaleTransform+transform+=+(ScaleTransform)+transformGroup.Children[0];

++++++++++++double+zoom+=+e.Delta+>+0+?+.2+:+-.2;
++++++++++++transform.ScaleX+%2B=+zoom;
++++++++++++transform.ScaleY+%2B=+zoom;
++++++++}
++++}
}|3332322|我在我的网站上有一个使用此代码的完整wpf项目的示例：Jot+the+sticky+note+app。|3332323|entityMap|0|LINK|mutability|MUTABLE|url|http://jarloo.com/jot/^0|0|0|4|0|0|0|3|2|0|0|0|1F|R|N|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1C|8|@$D|1D|E|1E|F|G]]|9|@$D|1F|E|1G|1|1H]]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

The answer was posted above but wasn't complete. here is the completed version:

XAML

<pre><code>&lt;Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MapTest.Window1"
x:Name="Window"
Title="Window1"
Width="1950" Height="1546" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="clr-namespace:WPFExtensions.Controls;assembly=WPFExtensions" mc:Ignorable="d" Background="#FF000000"&gt;

&lt;Grid x:Name="LayoutRoot"&gt;
 &lt;Grid.RowDefinitions&gt;
 &lt;RowDefinition Height="52.92"/&gt;
 &lt;RowDefinition Height="*"/&gt;
 &lt;/Grid.RowDefinitions&gt;

 &lt;Border Grid.Row="1" Name="border"&gt;
 &lt;Image Name="image" Source="map3-2.png" Opacity="1" RenderTransformOrigin="0.5,0.5" /&gt;
 &lt;/Border&gt;

&lt;/Grid&gt;
</code></pre>



Code Behind

<pre><code>using System.Linq;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

namespace MapTest
{
 public partial class Window1 : Window
 {
 private Point origin;
 private Point start;

 public Window1()
 {
 InitializeComponent();

 TransformGroup group = new TransformGroup();

 ScaleTransform xform = new ScaleTransform();
 group.Children.Add(xform);

 TranslateTransform tt = new TranslateTransform();
 group.Children.Add(tt);

 image.RenderTransform = group;

 image.MouseWheel += image_MouseWheel;
 image.MouseLeftButtonDown += image_MouseLeftButtonDown;
 image.MouseLeftButtonUp += image_MouseLeftButtonUp;
 image.MouseMove += image_MouseMove;
 }

 private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
 {
 image.ReleaseMouseCapture();
 }

 private void image_MouseMove(object sender, MouseEventArgs e)
 {
 if (!image.IsMouseCaptured) return;

 var tt = (TranslateTransform) ((TransformGroup) image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);
 Vector v = start - e.GetPosition(border);
 tt.X = origin.X - v.X;
 tt.Y = origin.Y - v.Y;
 }

 private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 image.CaptureMouse();
 var tt = (TranslateTransform) ((TransformGroup) image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);
 start = e.GetPosition(border);
 origin = new Point(tt.X, tt.Y);
 }

 private void image_MouseWheel(object sender, MouseWheelEventArgs e)
 {
 TransformGroup transformGroup = (TransformGroup) image.RenderTransform;
 ScaleTransform transform = (ScaleTransform) transformGroup.Children[0];

 double zoom = e.Delta &gt; 0 ? .2 : -.2;
 transform.ScaleX += zoom;
 transform.ScaleY += zoom;
 }
 }
}
</code></pre>

I have an example of a full wpf project using this code on my website: <a href="http://jarloo.com/jot/" rel="noreferrer">Jot the sticky note app</a>.

blocks|key|3332332|text|要相对于鼠标位置进行缩放，您只需执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3332333|var+position+=+e.GetPosition(image1);
image1.RenderTransformOrigin+=+new+Point(position.X+/+image1.ActualWidth,+position.Y+/+image1.ActualHeight);|code-block|syntax|javascript|3332334|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To zoom relative to the mouse position, all you need is:

<pre><code>var position = e.GetPosition(image1);
image1.RenderTransformOrigin = new Point(position.X / image1.ActualWidth, position.Y / image1.ActualHeight);
</code></pre>

blocks|key|343423|text|@Anothen和@Number8+-矢量类在Silverlight中不可用，因此要使其工作，我们只需记录上一次调用MouseMove事件时看到的最后一个位置，并比较这两个点以找出差异；然后调整转换。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343424|XAML：|343425|++++<Border+Name="viewboxBackground"+Background="Black">
++++++++++++<Viewbox+Name="viewboxMain">
++++++++++++++++
++++++++++++</Viewbox>
++++</Border>++|code-block|syntax|javascript|343426|代码隐藏：|343427|++++public+Point+_mouseClickPos;
++++public+bool+bMoving;


++++public+MainPage()
++++{
++++++++InitializeComponent();
++++++++viewboxMain.RenderTransform+=+new+CompositeTransform();
++++}

++++void+MouseMoveHandler(object+sender,+MouseEventArgs+e)
++++{

++++++++if+(bMoving)
++++++++{
++++++++++++//get+current+transform
++++++++++++CompositeTransform+transform+=+viewboxMain.RenderTransform+as+CompositeTransform;

++++++++++++Point+currentPos+=+e.GetPosition(viewboxBackground);
++++++++++++transform.TranslateX+%2B=+(currentPos.X+-+_mouseClickPos.X)+;
++++++++++++transform.TranslateY+%2B=+(currentPos.Y+-+_mouseClickPos.Y)+;

++++++++++++viewboxMain.RenderTransform+=+transform;

++++++++++++_mouseClickPos+=+currentPos;
++++++++}++++++++++++
++++}

++++void+MouseClickHandler(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++_mouseClickPos+=+e.GetPosition(viewboxBackground);
++++++++bMoving+=+true;
++++}

++++void+MouseReleaseHandler(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++bMoving+=+false;
++++}|343428|还请注意，您不需要TransformGroup或集合来实现平移和缩放；相反，CompositeTransform将以较少的麻烦完成此任务。|offset|length|343429|我非常肯定这在资源使用方面是非常低效的，但至少它是有效的:)|343430|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/system.windows.media.compositetransform(VS.95).aspx^0|0|0|0|0|0|12|I|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@$O|16|P|17|1|18]]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

@Anothen and @Number8 - The Vector class is not available in Silverlight, so to make it work we just need to keep a record of the last position sighted the last time the MouseMove event was called, and compare the two points to find the difference; then adjust the transform.

XAML:

<pre><code> &lt;Border Name="viewboxBackground" Background="Black"&gt;
 &lt;Viewbox Name="viewboxMain"&gt;
 &lt;!--contents go here--&gt;
 &lt;/Viewbox&gt;
 &lt;/Border&gt; 
</code></pre>

Code-behind:

<pre><code> public Point _mouseClickPos;
 public bool bMoving;


 public MainPage()
 {
 InitializeComponent();
 viewboxMain.RenderTransform = new CompositeTransform();
 }

 void MouseMoveHandler(object sender, MouseEventArgs e)
 {

 if (bMoving)
 {
 //get current transform
 CompositeTransform transform = viewboxMain.RenderTransform as CompositeTransform;

 Point currentPos = e.GetPosition(viewboxBackground);
 transform.TranslateX += (currentPos.X - _mouseClickPos.X) ;
 transform.TranslateY += (currentPos.Y - _mouseClickPos.Y) ;

 viewboxMain.RenderTransform = transform;

 _mouseClickPos = currentPos;
 } 
 }

 void MouseClickHandler(object sender, MouseButtonEventArgs e)
 {
 _mouseClickPos = e.GetPosition(viewboxBackground);
 bMoving = true;
 }

 void MouseReleaseHandler(object sender, MouseButtonEventArgs e)
 {
 bMoving = false;
 }
</code></pre>

Also note that you don't need a TransformGroup or collection to implement pan and zoom; instead, a <a href="http://msdn.microsoft.com/en-us/library/system.windows.media.compositetransform(VS.95).aspx" rel="nofollow noreferrer">CompositeTransform</a> will do the trick with less hassle.

I'm pretty sure this is really inefficient in terms of resource usage, but at least it works :)

blocks|key|345852|text|@+Merk|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345853|对于您的解决方案实例的lambda表达式，您可以使用以下代码：|345854|//var+tt+=+(TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);
++++++++TranslateTransform+tt+=+null;
++++++++TransformGroup+transformGroup+=+(TransformGroup)grid.RenderTransform;
++++++++for+(int+i+=+0;+i+<+transformGroup.Children.Count;+i%2B%2B)
++++++++{
++++++++++++if+(transformGroup.Children[i]+is+TranslateTransform)
++++++++++++++++tt+=+(TranslateTransform)transformGroup.Children[i];
++++++++}|code-block|syntax|javascript|345855|此代码可以按原样用于.Net+Framework3.0或2.0|345856|希望它能帮助你:-)|345857|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

@ Merk

For ur solution insted of lambda expression you can use following code:

<pre><code>//var tt = (TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);
 TranslateTransform tt = null;
 TransformGroup transformGroup = (TransformGroup)grid.RenderTransform;
 for (int i = 0; i &lt; transformGroup.Children.Count; i++)
 {
 if (transformGroup.Children[i] is TranslateTransform)
 tt = (TranslateTransform)transformGroup.Children[i];
 }
</code></pre>

this code can be use as is for .Net Frame work 3.0 or 2.0

Hope It helps you :-)

blocks|key|3120004|text|在使用了这个问题的样本后，我已经制作了完整版本的平移和缩放应用程序，可以相对于鼠标指针进行适当的缩放。所有的平移和缩放代码都被移到了单独的名为ZoomBorder的类中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3120005|ZoomBorder.cs|3120006|using+System.Linq;
using+System.Windows;
using+System.Windows.Controls;
using+System.Windows.Input;
using+System.Windows.Media;

namespace+PanAndZoom
{
++public+class+ZoomBorder+:+Border
++{
++++private+UIElement+child+=+null;
++++private+Point+origin;
++++private+Point+start;

++++private+TranslateTransform+GetTranslateTransform(UIElement+element)
++++{
++++++return+(TranslateTransform)((TransformGroup)element.RenderTransform)
++++++++.Children.First(tr+=>+tr+is+TranslateTransform);
++++}

++++private+ScaleTransform+GetScaleTransform(UIElement+element)
++++{
++++++return+(ScaleTransform)((TransformGroup)element.RenderTransform)
++++++++.Children.First(tr+=>+tr+is+ScaleTransform);
++++}

++++public+override+UIElement+Child
++++{
++++++get+{+return+base.Child;+}
++++++set
++++++{
++++++++if+(value+!=+null+&&+value+!=+this.Child)
++++++++++this.Initialize(value);
++++++++base.Child+=+value;
++++++}
++++}

++++public+void+Initialize(UIElement+element)
++++{
++++++this.child+=+element;
++++++if+(child+!=+null)
++++++{
++++++++TransformGroup+group+=+new+TransformGroup();
++++++++ScaleTransform+st+=+new+ScaleTransform();
++++++++group.Children.Add(st);
++++++++TranslateTransform+tt+=+new+TranslateTransform();
++++++++group.Children.Add(tt);
++++++++child.RenderTransform+=+group;
++++++++child.RenderTransformOrigin+=+new+Point(0.0,+0.0);
++++++++this.MouseWheel+%2B=+child_MouseWheel;
++++++++this.MouseLeftButtonDown+%2B=+child_MouseLeftButtonDown;
++++++++this.MouseLeftButtonUp+%2B=+child_MouseLeftButtonUp;
++++++++this.MouseMove+%2B=+child_MouseMove;
++++++++this.PreviewMouseRightButtonDown+%2B=+new+MouseButtonEventHandler(
++++++++++child_PreviewMouseRightButtonDown);
++++++}
++++}

++++public+void+Reset()
++++{
++++++if+(child+!=+null)
++++++{
++++++++//+reset+zoom
++++++++var+st+=+GetScaleTransform(child);
++++++++st.ScaleX+=+1.0;
++++++++st.ScaleY+=+1.0;

++++++++//+reset+pan
++++++++var+tt+=+GetTranslateTransform(child);
++++++++tt.X+=+0.0;
++++++++tt.Y+=+0.0;
++++++}
++++}

++++#region+Child+Events

++++++++private+void+child_MouseWheel(object+sender,+MouseWheelEventArgs+e)
++++++++{
++++++++++++if+(child+!=+null)
++++++++++++{
++++++++++++++++var+st+=+GetScaleTransform(child);
++++++++++++++++var+tt+=+GetTranslateTransform(child);

++++++++++++++++double+zoom+=+e.Delta+>+0+?+.2+:+-.2;
++++++++++++++++if+(!(e.Delta+>+0)+&&+(st.ScaleX+<+.4+%7C%7C+st.ScaleY+<+.4))
++++++++++++++++++++return;

++++++++++++++++Point+relative+=+e.GetPosition(child);
++++++++++++++++double+absoluteX;
++++++++++++++++double+absoluteY;

++++++++++++++++absoluteX+=+relative.X+*+st.ScaleX+%2B+tt.X;
++++++++++++++++absoluteY+=+relative.Y+*+st.ScaleY+%2B+tt.Y;

++++++++++++++++st.ScaleX+%2B=+zoom;
++++++++++++++++st.ScaleY+%2B=+zoom;

++++++++++++++++tt.X+=+absoluteX+-+relative.X+*+st.ScaleX;
++++++++++++++++tt.Y+=+absoluteY+-+relative.Y+*+st.ScaleY;
++++++++++++}
++++++++}

++++++++private+void+child_MouseLeftButtonDown(object+sender,+MouseButtonEventArgs+e)
++++++++{
++++++++++++if+(child+!=+null)
++++++++++++{
++++++++++++++++var+tt+=+GetTranslateTransform(child);
++++++++++++++++start+=+e.GetPosition(this);
++++++++++++++++origin+=+new+Point(tt.X,+tt.Y);
++++++++++++++++this.Cursor+=+Cursors.Hand;
++++++++++++++++child.CaptureMouse();
++++++++++++}
++++++++}

++++++++private+void+child_MouseLeftButtonUp(object+sender,+MouseButtonEventArgs+e)
++++++++{
++++++++++++if+(child+!=+null)
++++++++++++{
++++++++++++++++child.ReleaseMouseCapture();
++++++++++++++++this.Cursor+=+Cursors.Arrow;
++++++++++++}
++++++++}

++++++++void+child_PreviewMouseRightButtonDown(object+sender,+MouseButtonEventArgs+e)
++++++++{
++++++++++++this.Reset();
++++++++}

++++++++private+void+child_MouseMove(object+sender,+MouseEventArgs+e)
++++++++{
++++++++++++if+(child+!=+null)
++++++++++++{
++++++++++++++++if+(child.IsMouseCaptured)
++++++++++++++++{
++++++++++++++++++++var+tt+=+GetTranslateTransform(child);
++++++++++++++++++++Vector+v+=+start+-+e.GetPosition(this);
++++++++++++++++++++tt.X+=+origin.X+-+v.X;
++++++++++++++++++++tt.Y+=+origin.Y+-+v.Y;
++++++++++++++++}
++++++++++++}
++++++++}

++++++++#endregion
++++}
}|code-block|syntax|javascript|3120007|MainWindow.xaml|offset|length|style|BOLD|3120008|<Window+x:Class="PanAndZoom.MainWindow"
++++++++xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
++++++++xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
++++++++xmlns:local="clr-namespace:PanAndZoom"
++++++++Title="PanAndZoom"+Height="600"+Width="900"+WindowStartupLocation="CenterScreen">
++++<Grid>
++++++++<local:ZoomBorder+x:Name="border"+ClipToBounds="True"+Background="Gray">
++++++++++++<Image+Source="image.jpg"/>
++++++++</local:ZoomBorder>
++++</Grid>
</Window>|3120009|MainWindow.xaml.cs|3120010|using+System;
using+System.Collections.Generic;
using+System.Linq;
using+System.Text;
using+System.Windows;
using+System.Windows.Controls;
using+System.Windows.Data;
using+System.Windows.Documents;
using+System.Windows.Input;
using+System.Windows.Media;
using+System.Windows.Media.Imaging;
using+System.Windows.Navigation;
using+System.Windows.Shapes;

namespace+PanAndZoom
{
++++public+partial+class+MainWindow+:+Window
++++{
++++++++public+MainWindow()
++++++++{
++++++++++++InitializeComponent();
++++++++}
++++}
}|3120011|entityMap^0|0|0|0|0|F|0|0|0|I|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@$K|14|L|15|M|N]]|9|@]|A|$]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

After using samples from this question I've made complete version of pan &amp; zoom app with proper zooming relative to mouse pointer. All pan &amp; zoom code has been moved to separate class called ZoomBorder.

ZoomBorder.cs

<pre><code>using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace PanAndZoom
{
 public class ZoomBorder : Border
 {
 private UIElement child = null;
 private Point origin;
 private Point start;

 private TranslateTransform GetTranslateTransform(UIElement element)
 {
 return (TranslateTransform)((TransformGroup)element.RenderTransform)
 .Children.First(tr =&gt; tr is TranslateTransform);
 }

 private ScaleTransform GetScaleTransform(UIElement element)
 {
 return (ScaleTransform)((TransformGroup)element.RenderTransform)
 .Children.First(tr =&gt; tr is ScaleTransform);
 }

 public override UIElement Child
 {
 get { return base.Child; }
 set
 {
 if (value != null &amp;&amp; value != this.Child)
 this.Initialize(value);
 base.Child = value;
 }
 }

 public void Initialize(UIElement element)
 {
 this.child = element;
 if (child != null)
 {
 TransformGroup group = new TransformGroup();
 ScaleTransform st = new ScaleTransform();
 group.Children.Add(st);
 TranslateTransform tt = new TranslateTransform();
 group.Children.Add(tt);
 child.RenderTransform = group;
 child.RenderTransformOrigin = new Point(0.0, 0.0);
 this.MouseWheel += child_MouseWheel;
 this.MouseLeftButtonDown += child_MouseLeftButtonDown;
 this.MouseLeftButtonUp += child_MouseLeftButtonUp;
 this.MouseMove += child_MouseMove;
 this.PreviewMouseRightButtonDown += new MouseButtonEventHandler(
 child_PreviewMouseRightButtonDown);
 }
 }

 public void Reset()
 {
 if (child != null)
 {
 // reset zoom
 var st = GetScaleTransform(child);
 st.ScaleX = 1.0;
 st.ScaleY = 1.0;

 // reset pan
 var tt = GetTranslateTransform(child);
 tt.X = 0.0;
 tt.Y = 0.0;
 }
 }

 #region Child Events

 private void child_MouseWheel(object sender, MouseWheelEventArgs e)
 {
 if (child != null)
 {
 var st = GetScaleTransform(child);
 var tt = GetTranslateTransform(child);

 double zoom = e.Delta &gt; 0 ? .2 : -.2;
 if (!(e.Delta &gt; 0) &amp;&amp; (st.ScaleX &lt; .4 || st.ScaleY &lt; .4))
 return;

 Point relative = e.GetPosition(child);
 double absoluteX;
 double absoluteY;

 absoluteX = relative.X * st.ScaleX + tt.X;
 absoluteY = relative.Y * st.ScaleY + tt.Y;

 st.ScaleX += zoom;
 st.ScaleY += zoom;

 tt.X = absoluteX - relative.X * st.ScaleX;
 tt.Y = absoluteY - relative.Y * st.ScaleY;
 }
 }

 private void child_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 if (child != null)
 {
 var tt = GetTranslateTransform(child);
 start = e.GetPosition(this);
 origin = new Point(tt.X, tt.Y);
 this.Cursor = Cursors.Hand;
 child.CaptureMouse();
 }
 }

 private void child_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
 {
 if (child != null)
 {
 child.ReleaseMouseCapture();
 this.Cursor = Cursors.Arrow;
 }
 }

 void child_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
 {
 this.Reset();
 }

 private void child_MouseMove(object sender, MouseEventArgs e)
 {
 if (child != null)
 {
 if (child.IsMouseCaptured)
 {
 var tt = GetTranslateTransform(child);
 Vector v = start - e.GetPosition(this);
 tt.X = origin.X - v.X;
 tt.Y = origin.Y - v.Y;
 }
 }
 }

 #endregion
 }
}
</code></pre>

MainWindow.xaml

<pre><code>&lt;Window x:Class="PanAndZoom.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:PanAndZoom"
 Title="PanAndZoom" Height="600" Width="900" WindowStartupLocation="CenterScreen"&gt;
 &lt;Grid&gt;
 &lt;local:ZoomBorder x:Name="border" ClipToBounds="True" Background="Gray"&gt;
 &lt;Image Source="image.jpg"/&gt;
 &lt;/local:ZoomBorder&gt;
 &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre>

MainWindow.xaml.cs

<pre><code>using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace PanAndZoom
{
 public partial class MainWindow : Window
 {
 public MainWindow()
 {
 InitializeComponent();
 }
 }
}
</code></pre>

blocks|key|3120027|text|同样的控制的另一个版本。它具有与其他功能类似的功能，但它添加了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3120028|3120029|Touch支持(drag/pinch)|ordered-list-item|3120030|The图像可以被删除(正常情况下，图像控件会将图像锁定在磁盘上，所以您无法删除它)。|3120031|3120032|一个内边框的子项，因此平移的图像不会与边界重叠。如果边框带有圆角矩形，请查找ClippedBorder类。|3120033|3120034|用法很简单：|3120035|<Controls:ImageViewControl+ImagePath="{Binding+...}"+/>|code-block|syntax|javascript|3120036|和代码：|3120037|public+class+ImageViewControl+:+Border
{
++++private+Point+origin;
++++private+Point+start;
++++private+Image+image;

++++public+ImageViewControl()
++++{
++++++++ClipToBounds+=+true;
++++++++Loaded+%2B=+OnLoaded;
++++}

++++#region+ImagePath

++++///+<summary>
++++///+++++ImagePath+Dependency+Property
++++///+</summary>
++++public+static+readonly+DependencyProperty+ImagePathProperty+=+DependencyProperty.Register("ImagePath",+typeof+(string),+typeof+(ImageViewControl),+new+FrameworkPropertyMetadata(string.Empty,+OnImagePathChanged));

++++///+<summary>
++++///+++++Gets+or+sets+the+ImagePath+property.+This+dependency+property+
++++///+++++indicates+the+path+to+the+image+file.
++++///+</summary>
++++public+string+ImagePath
++++{
++++++++get+{+return+(string)+GetValue(ImagePathProperty);+}
++++++++set+{+SetValue(ImagePathProperty,+value);+}
++++}

++++///+<summary>
++++///+++++Handles+changes+to+the+ImagePath+property.
++++///+</summary>
++++private+static+void+OnImagePathChanged(DependencyObject+d,+DependencyPropertyChangedEventArgs+e)
++++{
++++++++var+target+=+(ImageViewControl)+d;
++++++++var+oldImagePath+=+(string)+e.OldValue;
++++++++var+newImagePath+=+target.ImagePath;
++++++++target.ReloadImage(newImagePath);
++++++++target.OnImagePathChanged(oldImagePath,+newImagePath);
++++}

++++///+<summary>
++++///+++++Provides+derived+classes+an+opportunity+to+handle+changes+to+the+ImagePath+property.
++++///+</summary>
++++protected+virtual+void+OnImagePathChanged(string+oldImagePath,+string+newImagePath)
++++{
++++}

++++#endregion

++++private+void+OnLoaded(object+sender,+RoutedEventArgs+routedEventArgs)
++++{
++++++++image+=+new+Image+{
++++++++++++++++++++++++++++++//IsManipulationEnabled+=+true,
++++++++++++++++++++++++++++++RenderTransformOrigin+=+new+Point(0.5,+0.5),
++++++++++++++++++++++++++++++RenderTransform+=+new+TransformGroup+{
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++Children+=+new+TransformCollection+{
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++new+ScaleTransform(),
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++new+TranslateTransform()
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++};
++++++++//+NOTE+I+use+a+border+as+the+first+child,+to+which+I+add+the+image.+I+do+this+so+the+panned+image+doesn't+partly+obscure+the+control's+border.
++++++++//+In+case+you+are+going+to+use+rounder+corner's+on+this+control,+you+may+to+update+your+clipping,+as+in+this+example:
++++++++//+http://wpfspark.wordpress.com/2011/06/08/clipborder-a-wpf-border-that-clips/
++++++++var+border+=+new+Border+{
++++++++++++++++++++++++++++++++++++IsManipulationEnabled+=+true,
++++++++++++++++++++++++++++++++++++ClipToBounds+=+true,
++++++++++++++++++++++++++++++++++++Child+=+image
++++++++++++++++++++++++++++++++};
++++++++Child+=+border;

++++++++image.MouseWheel+%2B=+(s,+e)+=>
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++var+zoom+=+e.Delta+>+0
+++++++++++++++++++++++++++++++++++++++++++++++++++?+.2
+++++++++++++++++++++++++++++++++++++++++++++++++++:+-.2;
++++++++++++++++++++++++++++++++++++var+position+=+e.GetPosition(image);
++++++++++++++++++++++++++++++++++++image.RenderTransformOrigin+=+new+Point(position.X+/+image.ActualWidth,+position.Y+/+image.ActualHeight);
++++++++++++++++++++++++++++++++++++var+st+=+(ScaleTransform)((TransformGroup)image.RenderTransform).Children.First(tr+=>+tr+is+ScaleTransform);
++++++++++++++++++++++++++++++++++++st.ScaleX+%2B=+zoom;
++++++++++++++++++++++++++++++++++++st.ScaleY+%2B=+zoom;
++++++++++++++++++++++++++++++++++++e.Handled+=+true;
++++++++++++++++++++++++++++++++};

++++++++image.MouseLeftButtonDown+%2B=+(s,+e)+=>
+++++++++++++++++++++++++++++++++++++++++{
+++++++++++++++++++++++++++++++++++++++++++++if+(e.ClickCount+==+2)
+++++++++++++++++++++++++++++++++++++++++++++++++ResetPanZoom();
+++++++++++++++++++++++++++++++++++++++++++++else
+++++++++++++++++++++++++++++++++++++++++++++{
+++++++++++++++++++++++++++++++++++++++++++++++++image.CaptureMouse();
+++++++++++++++++++++++++++++++++++++++++++++++++var+tt+=+(TranslateTransform)+((TransformGroup)+image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);
+++++++++++++++++++++++++++++++++++++++++++++++++start+=+e.GetPosition(this);
+++++++++++++++++++++++++++++++++++++++++++++++++origin+=+new+Point(tt.X,+tt.Y);
+++++++++++++++++++++++++++++++++++++++++++++}
+++++++++++++++++++++++++++++++++++++++++++++e.Handled+=+true;
+++++++++++++++++++++++++++++++++++++++++};

++++++++image.MouseMove+%2B=+(s,+e)+=>
+++++++++++++++++++++++++++++++{
+++++++++++++++++++++++++++++++++++if+(!image.IsMouseCaptured)+return;
+++++++++++++++++++++++++++++++++++var+tt+=+(TranslateTransform)+((TransformGroup)+image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);
+++++++++++++++++++++++++++++++++++var+v+=+start+-+e.GetPosition(this);
+++++++++++++++++++++++++++++++++++tt.X+=+origin.X+-+v.X;
+++++++++++++++++++++++++++++++++++tt.Y+=+origin.Y+-+v.Y;
+++++++++++++++++++++++++++++++++++e.Handled+=+true;
+++++++++++++++++++++++++++++++};

++++++++image.MouseLeftButtonUp+%2B=+(s,+e)+=>+image.ReleaseMouseCapture();

++++++++//NOTE+I+apply+the+manipulation+to+the+border,+and+not+to+the+image+itself+(which+caused+stability+issues+when+translating)!
++++++++border.ManipulationDelta+%2B=+(o,+e)+=>
+++++++++++++++++++++++++++++++++++++++{
+++++++++++++++++++++++++++++++++++++++++++var+st+=+(ScaleTransform)((TransformGroup)image.RenderTransform).Children.First(tr+=>+tr+is+ScaleTransform);
+++++++++++++++++++++++++++++++++++++++++++var+tt+=+(TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);

+++++++++++++++++++++++++++++++++++++++++++st.ScaleX+*=+e.DeltaManipulation.Scale.X;
+++++++++++++++++++++++++++++++++++++++++++st.ScaleY+*=+e.DeltaManipulation.Scale.X;
+++++++++++++++++++++++++++++++++++++++++++tt.X+%2B=+e.DeltaManipulation.Translation.X;
+++++++++++++++++++++++++++++++++++++++++++tt.Y+%2B=+e.DeltaManipulation.Translation.Y;

+++++++++++++++++++++++++++++++++++++++++++e.Handled+=+true;
+++++++++++++++++++++++++++++++++++++++};
++++}

++++private+void+ResetPanZoom()
++++{
++++++++var+st+=+(ScaleTransform)((TransformGroup)image.RenderTransform).Children.First(tr+=>+tr+is+ScaleTransform);
++++++++var+tt+=+(TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr+=>+tr+is+TranslateTransform);
++++++++st.ScaleX+=+st.ScaleY+=+1;
++++++++tt.X+=+tt.Y+=+0;
++++++++image.RenderTransformOrigin+=+new+Point(0.5,+0.5);
++++}

++++///+<summary>
++++///+Load+the+image+(and+do+not+keep+a+hold+on+it,+so+we+can+delete+the+image+without+problems)
++++///+</summary>
++++///+<see+cref="http://blogs.vertigo.com/personal/ralph/Blog/Lists/Posts/Post.aspx?ID=18"/>
++++///+<param+name="path"></param>
++++private+void+ReloadImage(string+path)
++++{
++++++++try
++++++++{
++++++++++++ResetPanZoom();
++++++++++++//+load+the+image,+specify+CacheOption+so+the+file+is+not+locked
++++++++++++var+bitmapImage+=+new+BitmapImage();
++++++++++++bitmapImage.BeginInit();
++++++++++++bitmapImage.CacheOption+=+BitmapCacheOption.OnLoad;
++++++++++++bitmapImage.UriSource+=+new+Uri(path,+UriKind.RelativeOrAbsolute);
++++++++++++bitmapImage.EndInit();
++++++++++++image.Source+=+bitmapImage;
++++++++}
++++++++catch+(SystemException+e)
++++++++{
++++++++++++Console.WriteLine(e.Message);
++++++++}
++++}
}|3120038|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|11|8|@]|9|@]|A|$]]|$1|H|3|-4|5|E|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|E|7|13|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|15|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|16|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|17|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|18|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|X|$]]

Yet another version of the same kind of control. It has similar functionality as the others, but it adds:

<ol>
<li>Touch support (drag/pinch)</li>
<li>The image can be deleted (normally, the Image control locks the image on disk, so you cannot delete it).</li>
<li>An inner border child, so the panned image doesn't overlap the border. In case of borders with rounded rectangles, look for ClippedBorder classes.</li>
</ol>

Usage is simple:

<pre><code>&lt;Controls:ImageViewControl ImagePath="{Binding ...}" /&gt;
</code></pre>

And the code:

<pre><code>public class ImageViewControl : Border
{
 private Point origin;
 private Point start;
 private Image image;

 public ImageViewControl()
 {
 ClipToBounds = true;
 Loaded += OnLoaded;
 }

 #region ImagePath

 /// &lt;summary&gt;
 /// ImagePath Dependency Property
 /// &lt;/summary&gt;
 public static readonly DependencyProperty ImagePathProperty = DependencyProperty.Register("ImagePath", typeof (string), typeof (ImageViewControl), new FrameworkPropertyMetadata(string.Empty, OnImagePathChanged));

 /// &lt;summary&gt;
 /// Gets or sets the ImagePath property. This dependency property 
 /// indicates the path to the image file.
 /// &lt;/summary&gt;
 public string ImagePath
 {
 get { return (string) GetValue(ImagePathProperty); }
 set { SetValue(ImagePathProperty, value); }
 }

 /// &lt;summary&gt;
 /// Handles changes to the ImagePath property.
 /// &lt;/summary&gt;
 private static void OnImagePathChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
 {
 var target = (ImageViewControl) d;
 var oldImagePath = (string) e.OldValue;
 var newImagePath = target.ImagePath;
 target.ReloadImage(newImagePath);
 target.OnImagePathChanged(oldImagePath, newImagePath);
 }

 /// &lt;summary&gt;
 /// Provides derived classes an opportunity to handle changes to the ImagePath property.
 /// &lt;/summary&gt;
 protected virtual void OnImagePathChanged(string oldImagePath, string newImagePath)
 {
 }

 #endregion

 private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
 {
 image = new Image {
 //IsManipulationEnabled = true,
 RenderTransformOrigin = new Point(0.5, 0.5),
 RenderTransform = new TransformGroup {
 Children = new TransformCollection {
 new ScaleTransform(),
 new TranslateTransform()
 }
 }
 };
 // NOTE I use a border as the first child, to which I add the image. I do this so the panned image doesn't partly obscure the control's border.
 // In case you are going to use rounder corner's on this control, you may to update your clipping, as in this example:
 // http://wpfspark.wordpress.com/2011/06/08/clipborder-a-wpf-border-that-clips/
 var border = new Border {
 IsManipulationEnabled = true,
 ClipToBounds = true,
 Child = image
 };
 Child = border;

 image.MouseWheel += (s, e) =&gt;
 {
 var zoom = e.Delta &gt; 0
 ? .2
 : -.2;
 var position = e.GetPosition(image);
 image.RenderTransformOrigin = new Point(position.X / image.ActualWidth, position.Y / image.ActualHeight);
 var st = (ScaleTransform)((TransformGroup)image.RenderTransform).Children.First(tr =&gt; tr is ScaleTransform);
 st.ScaleX += zoom;
 st.ScaleY += zoom;
 e.Handled = true;
 };

 image.MouseLeftButtonDown += (s, e) =&gt;
 {
 if (e.ClickCount == 2)
 ResetPanZoom();
 else
 {
 image.CaptureMouse();
 var tt = (TranslateTransform) ((TransformGroup) image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);
 start = e.GetPosition(this);
 origin = new Point(tt.X, tt.Y);
 }
 e.Handled = true;
 };

 image.MouseMove += (s, e) =&gt;
 {
 if (!image.IsMouseCaptured) return;
 var tt = (TranslateTransform) ((TransformGroup) image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);
 var v = start - e.GetPosition(this);
 tt.X = origin.X - v.X;
 tt.Y = origin.Y - v.Y;
 e.Handled = true;
 };

 image.MouseLeftButtonUp += (s, e) =&gt; image.ReleaseMouseCapture();

 //NOTE I apply the manipulation to the border, and not to the image itself (which caused stability issues when translating)!
 border.ManipulationDelta += (o, e) =&gt;
 {
 var st = (ScaleTransform)((TransformGroup)image.RenderTransform).Children.First(tr =&gt; tr is ScaleTransform);
 var tt = (TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);

 st.ScaleX *= e.DeltaManipulation.Scale.X;
 st.ScaleY *= e.DeltaManipulation.Scale.X;
 tt.X += e.DeltaManipulation.Translation.X;
 tt.Y += e.DeltaManipulation.Translation.Y;

 e.Handled = true;
 };
 }

 private void ResetPanZoom()
 {
 var st = (ScaleTransform)((TransformGroup)image.RenderTransform).Children.First(tr =&gt; tr is ScaleTransform);
 var tt = (TranslateTransform)((TransformGroup)image.RenderTransform).Children.First(tr =&gt; tr is TranslateTransform);
 st.ScaleX = st.ScaleY = 1;
 tt.X = tt.Y = 0;
 image.RenderTransformOrigin = new Point(0.5, 0.5);
 }

 /// &lt;summary&gt;
 /// Load the image (and do not keep a hold on it, so we can delete the image without problems)
 /// &lt;/summary&gt;
 /// &lt;see cref="http://blogs.vertigo.com/personal/ralph/Blog/Lists/Posts/Post.aspx?ID=18"/&gt;
 /// &lt;param name="path"&gt;&lt;/param&gt;
 private void ReloadImage(string path)
 {
 try
 {
 ResetPanZoom();
 // load the image, specify CacheOption so the file is not locked
 var bitmapImage = new BitmapImage();
 bitmapImage.BeginInit();
 bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
 bitmapImage.UriSource = new Uri(path, UriKind.RelativeOrAbsolute);
 bitmapImage.EndInit();
 image.Source = bitmapImage;
 }
 catch (SystemException e)
 {
 Console.WriteLine(e.Message);
 }
 }
}
</code></pre>

blocks|key|348618|text|这将放大和缩小以及平移，但将图像保持在容器的边界内。以控件的形式编写，因此可以直接或通过Themes/Viewport.xaml将样式添加到App.xaml。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|348619|为了可读性，我还把这个上传到了gist和github|348620|我还把它打包到了nuget上|348621|PM+>+Install-Package+Han.Wpf.ViewportControl|code-block|syntax|javascript|348622|./Controls/Viewport.cs：|348623|public+class+Viewport+:+ContentControl
{
++++private+bool+_capture;
++++private+FrameworkElement+_content;
++++private+Matrix+_matrix;
++++private+Point+_origin;

++++public+static+readonly+DependencyProperty+MaxZoomProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(MaxZoom),
++++++++++++typeof(double),
++++++++++++typeof(Viewport),
++++++++++++new+PropertyMetadata(0d));

++++public+static+readonly+DependencyProperty+MinZoomProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(MinZoom),
++++++++++++typeof(double),
++++++++++++typeof(Viewport),
++++++++++++new+PropertyMetadata(0d));

++++public+static+readonly+DependencyProperty+ZoomSpeedProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(ZoomSpeed),
++++++++++++typeof(float),
++++++++++++typeof(Viewport),
++++++++++++new+PropertyMetadata(0f));

++++public+static+readonly+DependencyProperty+ZoomXProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(ZoomX),
++++++++++++typeof(double),
++++++++++++typeof(Viewport),
++++++++++++new+FrameworkPropertyMetadata(0d,+FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

++++public+static+readonly+DependencyProperty+ZoomYProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(ZoomY),
++++++++++++typeof(double),
++++++++++++typeof(Viewport),
++++++++++++new+FrameworkPropertyMetadata(0d,+FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

++++public+static+readonly+DependencyProperty+OffsetXProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(OffsetX),
++++++++++++typeof(double),
++++++++++++typeof(Viewport),
++++++++++++new+FrameworkPropertyMetadata(0d,+FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

++++public+static+readonly+DependencyProperty+OffsetYProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(OffsetY),
++++++++++++typeof(double),
++++++++++++typeof(Viewport),
++++++++++++new+FrameworkPropertyMetadata(0d,+FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

++++public+static+readonly+DependencyProperty+BoundsProperty+=
++++++++DependencyProperty.Register(
++++++++++++nameof(Bounds),
++++++++++++typeof(Rect),
++++++++++++typeof(Viewport),
++++++++++++new+FrameworkPropertyMetadata(default(Rect),+FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

++++public+Rect+Bounds
++++{
++++++++get+=>+(Rect)+GetValue(BoundsProperty);
++++++++set+=>+SetValue(BoundsProperty,+value);
++++}

++++public+double+MaxZoom
++++{
++++++++get+=>+(double)+GetValue(MaxZoomProperty);
++++++++set+=>+SetValue(MaxZoomProperty,+value);
++++}

++++public+double+MinZoom
++++{
++++++++get+=>+(double)+GetValue(MinZoomProperty);
++++++++set+=>+SetValue(MinZoomProperty,+value);
++++}

++++public+double+OffsetX
++++{
++++++++get+=>+(double)+GetValue(OffsetXProperty);
++++++++set+=>+SetValue(OffsetXProperty,+value);
++++}

++++public+double+OffsetY
++++{
++++++++get+=>+(double)+GetValue(OffsetYProperty);
++++++++set+=>+SetValue(OffsetYProperty,+value);
++++}

++++public+float+ZoomSpeed
++++{
++++++++get+=>+(float)+GetValue(ZoomSpeedProperty);
++++++++set+=>+SetValue(ZoomSpeedProperty,+value);
++++}

++++public+double+ZoomX
++++{
++++++++get+=>+(double)+GetValue(ZoomXProperty);
++++++++set+=>+SetValue(ZoomXProperty,+value);
++++}

++++public+double+ZoomY
++++{
++++++++get+=>+(double)+GetValue(ZoomYProperty);
++++++++set+=>+SetValue(ZoomYProperty,+value);
++++}

++++public+Viewport()
++++{
++++++++DefaultStyleKey+=+typeof(Viewport);

++++++++Loaded+%2B=+OnLoaded;
++++++++Unloaded+%2B=+OnUnloaded;
++++}

++++private+void+Arrange(Size+desired,+Size+render)
++++{
++++++++_matrix+=+Matrix.Identity;

++++++++var+zx+=+desired.Width+/+render.Width;
++++++++var+zy+=+desired.Height+/+render.Height;
++++++++var+cx+=+render.Width+<+desired.Width+?+render.Width+/+2.0+:+0.0;
++++++++var+cy+=+render.Height+<+desired.Height+?+render.Height+/+2.0+:+0.0;

++++++++var+zoom+=+Math.Min(zx,+zy);

++++++++if+(render.Width+>+desired.Width+&&
++++++++++++render.Height+>+desired.Height)
++++++++{
++++++++++++cx+=+(desired.Width+-+(render.Width+*+zoom))+/+2.0;
++++++++++++cy+=+(desired.Height+-+(render.Height+*+zoom))+/+2.0;

++++++++++++_matrix+=+new+Matrix(zoom,+0d,+0d,+zoom,+cx,+cy);
++++++++}
++++++++else
++++++++{
++++++++++++_matrix.ScaleAt(zoom,+zoom,+cx,+cy);
++++++++}
++++}

++++private+void+Attach(FrameworkElement+content)
++++{
++++++++content.MouseMove+%2B=+OnMouseMove;
++++++++content.MouseLeave+%2B=+OnMouseLeave;
++++++++content.MouseWheel+%2B=+OnMouseWheel;
++++++++content.MouseLeftButtonDown+%2B=+OnMouseLeftButtonDown;
++++++++content.MouseLeftButtonUp+%2B=+OnMouseLeftButtonUp;
++++++++content.SizeChanged+%2B=+OnSizeChanged;
++++++++content.MouseRightButtonDown+%2B=+OnMouseRightButtonDown;
++++}

++++private+void+ChangeContent(FrameworkElement+content)
++++{
++++++++if+(content+!=+null+&&+!Equals(content,+_content))
++++++++{
++++++++++++if+(_content+!=+null)
++++++++++++{
++++++++++++++++Detatch();
++++++++++++}

++++++++++++Attach(content);
++++++++++++_content+=+content;
++++++++}
++++}

++++private+double+Constrain(double+value,+double+min,+double+max)
++++{
++++++++if+(min+>+max)
++++++++{
++++++++++++min+=+max;
++++++++}

++++++++if+(value+<=+min)
++++++++{
++++++++++++return+min;
++++++++}

++++++++if+(value+>=+max)
++++++++{
++++++++++++return+max;
++++++++}

++++++++return+value;
++++}

++++private+void+Constrain()
++++{
++++++++var+x+=+Constrain(_matrix.OffsetX,+_content.ActualWidth+-+_content.ActualWidth+*+_matrix.M11,+0);
++++++++var+y+=+Constrain(_matrix.OffsetY,+_content.ActualHeight+-+_content.ActualHeight+*+_matrix.M22,+0);

++++++++_matrix+=+new+Matrix(_matrix.M11,+0d,+0d,+_matrix.M22,+x,+y);
++++}

++++private+void+Detatch()
++++{
++++++++_content.MouseMove+-=+OnMouseMove;
++++++++_content.MouseLeave+-=+OnMouseLeave;
++++++++_content.MouseWheel+-=+OnMouseWheel;
++++++++_content.MouseLeftButtonDown+-=+OnMouseLeftButtonDown;
++++++++_content.MouseLeftButtonUp+-=+OnMouseLeftButtonUp;
++++++++_content.SizeChanged+-=+OnSizeChanged;
++++++++_content.MouseRightButtonDown+-=+OnMouseRightButtonDown;
++++}

++++private+void+Invalidate()
++++{
++++++++if+(_content+!=+null)
++++++++{
++++++++++++Constrain();

++++++++++++_content.RenderTransformOrigin+=+new+Point(0,+0);
++++++++++++_content.RenderTransform+=+new+MatrixTransform(_matrix);
++++++++++++_content.InvalidateVisual();

++++++++++++ZoomX+=+_matrix.M11;
++++++++++++ZoomY+=+_matrix.M22;

++++++++++++OffsetX+=+_matrix.OffsetX;
++++++++++++OffsetY+=+_matrix.OffsetY;

++++++++++++var+rect+=+new+Rect
++++++++++++{
++++++++++++++++X+=+OffsetX+*+-1,
++++++++++++++++Y+=+OffsetY+*+-1,
++++++++++++++++Width+=+ActualWidth,
++++++++++++++++Height+=+ActualHeight
++++++++++++};

++++++++++++Bounds+=+rect;
++++++++}
++++}

++++public+override+void+OnApplyTemplate()
++++{
++++++++base.OnApplyTemplate();
++++++++_matrix+=+Matrix.Identity;
++++}

++++protected+override+void+OnContentChanged(object+oldContent,+object+newContent)
++++{
++++++++base.OnContentChanged(oldContent,+newContent);

++++++++if+(Content+is+FrameworkElement+element)
++++++++{
++++++++++++ChangeContent(element);
++++++++}
++++}

++++private+void+OnLoaded(object+sender,+RoutedEventArgs+e)
++++{
++++++++if+(Content+is+FrameworkElement+element)
++++++++{
++++++++++++ChangeContent(element);
++++++++}

++++++++SizeChanged+%2B=+OnSizeChanged;
++++++++Loaded+-=+OnLoaded;
++++}

++++private+void+OnMouseLeave(object+sender,+MouseEventArgs+e)
++++{
++++++++if+(_capture)
++++++++{
++++++++++++Released();
++++++++}
++++}

++++private+void+OnMouseLeftButtonDown(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++if+(IsEnabled+&&+!_capture)
++++++++{
++++++++++++Pressed(e.GetPosition(this));
++++++++}
++++}

++++private+void+OnMouseLeftButtonUp(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++if+(IsEnabled+&&+_capture)
++++++++{
++++++++++++Released();
++++++++}
++++}

++++private+void+OnMouseMove(object+sender,+MouseEventArgs+e)
++++{
++++++++if+(IsEnabled+&&+_capture)
++++++++{
++++++++++++var+position+=+e.GetPosition(this);

++++++++++++var+point+=+new+Point
++++++++++++{
++++++++++++++++X+=+position.X+-+_origin.X,
++++++++++++++++Y+=+position.Y+-+_origin.Y
++++++++++++};

++++++++++++var+delta+=+point;
++++++++++++_origin+=+position;

++++++++++++_matrix.Translate(delta.X,+delta.Y);

++++++++++++Invalidate();
++++++++}
++++}

++++private+void+OnMouseRightButtonDown(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++if+(IsEnabled)
++++++++{
++++++++++++Reset();
++++++++}
++++}

++++private+void+OnMouseWheel(object+sender,+MouseWheelEventArgs+e)
++++{
++++++++if+(IsEnabled)
++++++++{
++++++++++++var+scale+=+e.Delta+>+0+?+ZoomSpeed+:+1+/+ZoomSpeed;
++++++++++++var+position+=+e.GetPosition(_content);

++++++++++++var+x+=+Constrain(scale,+MinZoom+/+_matrix.M11,+MaxZoom+/+_matrix.M11);
++++++++++++var+y+=+Constrain(scale,+MinZoom+/+_matrix.M22,+MaxZoom+/+_matrix.M22);

++++++++++++_matrix.ScaleAtPrepend(x,+y,+position.X,+position.Y);

++++++++++++ZoomX+=+_matrix.M11;
++++++++++++ZoomY+=+_matrix.M22;

++++++++++++Invalidate();
++++++++}
++++}

++++private+void+OnSizeChanged(object+sender,+SizeChangedEventArgs+e)
++++{
++++++++if+(_content?.IsMeasureValid+??+false)
++++++++{
++++++++++++Arrange(_content.DesiredSize,+_content.RenderSize);

++++++++++++Invalidate();
++++++++}
++++}

++++private+void+OnUnloaded(object+sender,+RoutedEventArgs+e)
++++{
++++++++Detatch();

++++++++SizeChanged+-=+OnSizeChanged;
++++++++Unloaded+-=+OnUnloaded;
++++}

++++private+void+Pressed(Point+position)
++++{
++++++++if+(IsEnabled)
++++++++{
++++++++++++_content.Cursor+=+Cursors.Hand;
++++++++++++_origin+=+position;
++++++++++++_capture+=+true;
++++++++}
++++}

++++private+void+Released()
++++{
++++++++if+(IsEnabled)
++++++++{
++++++++++++_content.Cursor+=+null;
++++++++++++_capture+=+false;
++++++++}
++++}

++++private+void+Reset()
++++{
++++++++_matrix+=+Matrix.Identity;

++++++++if+(_content+!=+null)
++++++++{
++++++++++++Arrange(_content.DesiredSize,+_content.RenderSize);
++++++++}

++++++++Invalidate();
++++}
}|348624|./Themes/Viewport.xaml：|348625|<ResourceDictionary+...+>

++++<Style+TargetType="{x:Type+controls:Viewport}"
+++++++++++BasedOn="{StaticResource+{x:Type+ContentControl}}">
++++++++<Setter+Property="Template">
++++++++++++<Setter.Value>
++++++++++++++++<ControlTemplate+TargetType="{x:Type+controls:Viewport}">
++++++++++++++++++++<Border+BorderBrush="{TemplateBinding+BorderBrush}"
++++++++++++++++++++++++++++BorderThickness="{TemplateBinding+BorderThickness}"
++++++++++++++++++++++++++++Background="{TemplateBinding+Background}">
++++++++++++++++++++++++<Grid+ClipToBounds="True"
++++++++++++++++++++++++++++++Width="{TemplateBinding+Width}"
++++++++++++++++++++++++++++++Height="{TemplateBinding+Height}">
++++++++++++++++++++++++++++<Grid+x:Name="PART_Container">
++++++++++++++++++++++++++++++++<ContentPresenter+x:Name="PART_Presenter"+/>
++++++++++++++++++++++++++++</Grid>
++++++++++++++++++++++++</Grid>
++++++++++++++++++++</Border>
++++++++++++++++</ControlTemplate>
++++++++++++</Setter.Value>
++++++++</Setter>
++++</Style>

</ResourceDictionary>|348626|./App.xaml|348627|<Application+...+>
++++<Application.Resources>
++++++++<ResourceDictionary>
++++++++++++<ResourceDictionary.MergedDictionaries>

++++++++++++++++<ResourceDictionary+Source="./Themes/Viewport.xaml"/>

++++++++++++</ResourceDictionary.MergedDictionaries>
++++++++</ResourceDictionary>
++++</Application.Resources>
</Application>|348628|用法：|348629|<viewers:Viewport>
++++<Image+Source="{Binding}"/>
</viewers:Viewport>|348630|如果有什么问题，给我打电话。|348631|快乐编码:)|348632|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/ahancock1/a2958f7eedd3e8d13e6ddda8feef0a65|1|https://github.com/ahancock1/Han.Wpf.ViewportControl|2|https://www.nuget.org/packages/Han.Wpf.ViewportControl/1.0.0^0|18|K|1Y|8|0|F|4|0|K|6|1|0|8|5|2|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]|$9|1T|A|1U|1|1V]]|E|$]]|$1|H|3|I|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|J|3|K|5|L|7|20|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|21|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|22|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|23|8|@]|D|@]|E|$]]|$1|U|3|V|5|L|7|24|8|@]|D|@]|E|$M|N]]|$1|W|3|X|5|6|7|25|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|L|7|26|8|@]|D|@]|E|$M|N]]|$1|10|3|11|5|6|7|27|8|@]|D|@]|E|$]]|$1|12|3|13|5|L|7|28|8|@]|D|@]|E|$M|N]]|$1|14|3|15|5|6|7|29|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|2A|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]]|19|$1A|$5|1B|1C|1D|E|$1E|1F]]|1G|$5|1B|1C|1D|E|$1E|1H]]|1I|$5|1B|1C|1D|E|$1E|1J]]]]

This will zoom in and out as well as pan but keep the image within the bounds of the container. Written as a control so add the style to the <code>App.xaml</code> directly or through the <code>Themes/Viewport.xaml</code>.

For readability I've also uploaded this on <a href="https://gist.github.com/ahancock1/a2958f7eedd3e8d13e6ddda8feef0a65" rel="nofollow noreferrer">gist</a> and <a href="https://github.com/ahancock1/Han.Wpf.ViewportControl" rel="nofollow noreferrer">github</a>

I've also packaged this up on <a href="https://www.nuget.org/packages/Han.Wpf.ViewportControl/1.0.0" rel="nofollow noreferrer">nuget</a> 

<pre><code>PM &gt; Install-Package Han.Wpf.ViewportControl
</code></pre>

./Controls/Viewport.cs: 

<pre><code>public class Viewport : ContentControl
{
 private bool _capture;
 private FrameworkElement _content;
 private Matrix _matrix;
 private Point _origin;

 public static readonly DependencyProperty MaxZoomProperty =
 DependencyProperty.Register(
 nameof(MaxZoom),
 typeof(double),
 typeof(Viewport),
 new PropertyMetadata(0d));

 public static readonly DependencyProperty MinZoomProperty =
 DependencyProperty.Register(
 nameof(MinZoom),
 typeof(double),
 typeof(Viewport),
 new PropertyMetadata(0d));

 public static readonly DependencyProperty ZoomSpeedProperty =
 DependencyProperty.Register(
 nameof(ZoomSpeed),
 typeof(float),
 typeof(Viewport),
 new PropertyMetadata(0f));

 public static readonly DependencyProperty ZoomXProperty =
 DependencyProperty.Register(
 nameof(ZoomX),
 typeof(double),
 typeof(Viewport),
 new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

 public static readonly DependencyProperty ZoomYProperty =
 DependencyProperty.Register(
 nameof(ZoomY),
 typeof(double),
 typeof(Viewport),
 new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

 public static readonly DependencyProperty OffsetXProperty =
 DependencyProperty.Register(
 nameof(OffsetX),
 typeof(double),
 typeof(Viewport),
 new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

 public static readonly DependencyProperty OffsetYProperty =
 DependencyProperty.Register(
 nameof(OffsetY),
 typeof(double),
 typeof(Viewport),
 new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

 public static readonly DependencyProperty BoundsProperty =
 DependencyProperty.Register(
 nameof(Bounds),
 typeof(Rect),
 typeof(Viewport),
 new FrameworkPropertyMetadata(default(Rect), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

 public Rect Bounds
 {
 get =&gt; (Rect) GetValue(BoundsProperty);
 set =&gt; SetValue(BoundsProperty, value);
 }

 public double MaxZoom
 {
 get =&gt; (double) GetValue(MaxZoomProperty);
 set =&gt; SetValue(MaxZoomProperty, value);
 }

 public double MinZoom
 {
 get =&gt; (double) GetValue(MinZoomProperty);
 set =&gt; SetValue(MinZoomProperty, value);
 }

 public double OffsetX
 {
 get =&gt; (double) GetValue(OffsetXProperty);
 set =&gt; SetValue(OffsetXProperty, value);
 }

 public double OffsetY
 {
 get =&gt; (double) GetValue(OffsetYProperty);
 set =&gt; SetValue(OffsetYProperty, value);
 }

 public float ZoomSpeed
 {
 get =&gt; (float) GetValue(ZoomSpeedProperty);
 set =&gt; SetValue(ZoomSpeedProperty, value);
 }

 public double ZoomX
 {
 get =&gt; (double) GetValue(ZoomXProperty);
 set =&gt; SetValue(ZoomXProperty, value);
 }

 public double ZoomY
 {
 get =&gt; (double) GetValue(ZoomYProperty);
 set =&gt; SetValue(ZoomYProperty, value);
 }

 public Viewport()
 {
 DefaultStyleKey = typeof(Viewport);

 Loaded += OnLoaded;
 Unloaded += OnUnloaded;
 }

 private void Arrange(Size desired, Size render)
 {
 _matrix = Matrix.Identity;

 var zx = desired.Width / render.Width;
 var zy = desired.Height / render.Height;
 var cx = render.Width &lt; desired.Width ? render.Width / 2.0 : 0.0;
 var cy = render.Height &lt; desired.Height ? render.Height / 2.0 : 0.0;

 var zoom = Math.Min(zx, zy);

 if (render.Width &gt; desired.Width &amp;&amp;
 render.Height &gt; desired.Height)
 {
 cx = (desired.Width - (render.Width * zoom)) / 2.0;
 cy = (desired.Height - (render.Height * zoom)) / 2.0;

 _matrix = new Matrix(zoom, 0d, 0d, zoom, cx, cy);
 }
 else
 {
 _matrix.ScaleAt(zoom, zoom, cx, cy);
 }
 }

 private void Attach(FrameworkElement content)
 {
 content.MouseMove += OnMouseMove;
 content.MouseLeave += OnMouseLeave;
 content.MouseWheel += OnMouseWheel;
 content.MouseLeftButtonDown += OnMouseLeftButtonDown;
 content.MouseLeftButtonUp += OnMouseLeftButtonUp;
 content.SizeChanged += OnSizeChanged;
 content.MouseRightButtonDown += OnMouseRightButtonDown;
 }

 private void ChangeContent(FrameworkElement content)
 {
 if (content != null &amp;&amp; !Equals(content, _content))
 {
 if (_content != null)
 {
 Detatch();
 }

 Attach(content);
 _content = content;
 }
 }

 private double Constrain(double value, double min, double max)
 {
 if (min &gt; max)
 {
 min = max;
 }

 if (value &lt;= min)
 {
 return min;
 }

 if (value &gt;= max)
 {
 return max;
 }

 return value;
 }

 private void Constrain()
 {
 var x = Constrain(_matrix.OffsetX, _content.ActualWidth - _content.ActualWidth * _matrix.M11, 0);
 var y = Constrain(_matrix.OffsetY, _content.ActualHeight - _content.ActualHeight * _matrix.M22, 0);

 _matrix = new Matrix(_matrix.M11, 0d, 0d, _matrix.M22, x, y);
 }

 private void Detatch()
 {
 _content.MouseMove -= OnMouseMove;
 _content.MouseLeave -= OnMouseLeave;
 _content.MouseWheel -= OnMouseWheel;
 _content.MouseLeftButtonDown -= OnMouseLeftButtonDown;
 _content.MouseLeftButtonUp -= OnMouseLeftButtonUp;
 _content.SizeChanged -= OnSizeChanged;
 _content.MouseRightButtonDown -= OnMouseRightButtonDown;
 }

 private void Invalidate()
 {
 if (_content != null)
 {
 Constrain();

 _content.RenderTransformOrigin = new Point(0, 0);
 _content.RenderTransform = new MatrixTransform(_matrix);
 _content.InvalidateVisual();

 ZoomX = _matrix.M11;
 ZoomY = _matrix.M22;

 OffsetX = _matrix.OffsetX;
 OffsetY = _matrix.OffsetY;

 var rect = new Rect
 {
 X = OffsetX * -1,
 Y = OffsetY * -1,
 Width = ActualWidth,
 Height = ActualHeight
 };

 Bounds = rect;
 }
 }

 public override void OnApplyTemplate()
 {
 base.OnApplyTemplate();
 _matrix = Matrix.Identity;
 }

 protected override void OnContentChanged(object oldContent, object newContent)
 {
 base.OnContentChanged(oldContent, newContent);

 if (Content is FrameworkElement element)
 {
 ChangeContent(element);
 }
 }

 private void OnLoaded(object sender, RoutedEventArgs e)
 {
 if (Content is FrameworkElement element)
 {
 ChangeContent(element);
 }

 SizeChanged += OnSizeChanged;
 Loaded -= OnLoaded;
 }

 private void OnMouseLeave(object sender, MouseEventArgs e)
 {
 if (_capture)
 {
 Released();
 }
 }

 private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 if (IsEnabled &amp;&amp; !_capture)
 {
 Pressed(e.GetPosition(this));
 }
 }

 private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
 {
 if (IsEnabled &amp;&amp; _capture)
 {
 Released();
 }
 }

 private void OnMouseMove(object sender, MouseEventArgs e)
 {
 if (IsEnabled &amp;&amp; _capture)
 {
 var position = e.GetPosition(this);

 var point = new Point
 {
 X = position.X - _origin.X,
 Y = position.Y - _origin.Y
 };

 var delta = point;
 _origin = position;

 _matrix.Translate(delta.X, delta.Y);

 Invalidate();
 }
 }

 private void OnMouseRightButtonDown(object sender, MouseButtonEventArgs e)
 {
 if (IsEnabled)
 {
 Reset();
 }
 }

 private void OnMouseWheel(object sender, MouseWheelEventArgs e)
 {
 if (IsEnabled)
 {
 var scale = e.Delta &gt; 0 ? ZoomSpeed : 1 / ZoomSpeed;
 var position = e.GetPosition(_content);

 var x = Constrain(scale, MinZoom / _matrix.M11, MaxZoom / _matrix.M11);
 var y = Constrain(scale, MinZoom / _matrix.M22, MaxZoom / _matrix.M22);

 _matrix.ScaleAtPrepend(x, y, position.X, position.Y);

 ZoomX = _matrix.M11;
 ZoomY = _matrix.M22;

 Invalidate();
 }
 }

 private void OnSizeChanged(object sender, SizeChangedEventArgs e)
 {
 if (_content?.IsMeasureValid ?? false)
 {
 Arrange(_content.DesiredSize, _content.RenderSize);

 Invalidate();
 }
 }

 private void OnUnloaded(object sender, RoutedEventArgs e)
 {
 Detatch();

 SizeChanged -= OnSizeChanged;
 Unloaded -= OnUnloaded;
 }

 private void Pressed(Point position)
 {
 if (IsEnabled)
 {
 _content.Cursor = Cursors.Hand;
 _origin = position;
 _capture = true;
 }
 }

 private void Released()
 {
 if (IsEnabled)
 {
 _content.Cursor = null;
 _capture = false;
 }
 }

 private void Reset()
 {
 _matrix = Matrix.Identity;

 if (_content != null)
 {
 Arrange(_content.DesiredSize, _content.RenderSize);
 }

 Invalidate();
 }
}
</code></pre>

./Themes/Viewport.xaml:

<pre><code>&lt;ResourceDictionary ... &gt;

 &lt;Style TargetType="{x:Type controls:Viewport}"
 BasedOn="{StaticResource {x:Type ContentControl}}"&gt;
 &lt;Setter Property="Template"&gt;
 &lt;Setter.Value&gt;
 &lt;ControlTemplate TargetType="{x:Type controls:Viewport}"&gt;
 &lt;Border BorderBrush="{TemplateBinding BorderBrush}"
 BorderThickness="{TemplateBinding BorderThickness}"
 Background="{TemplateBinding Background}"&gt;
 &lt;Grid ClipToBounds="True"
 Width="{TemplateBinding Width}"
 Height="{TemplateBinding Height}"&gt;
 &lt;Grid x:Name="PART_Container"&gt;
 &lt;ContentPresenter x:Name="PART_Presenter" /&gt;
 &lt;/Grid&gt;
 &lt;/Grid&gt;
 &lt;/Border&gt;
 &lt;/ControlTemplate&gt;
 &lt;/Setter.Value&gt;
 &lt;/Setter&gt;
 &lt;/Style&gt;

&lt;/ResourceDictionary&gt;
</code></pre>

./App.xaml

<pre><code>&lt;Application ... &gt;
 &lt;Application.Resources&gt;
 &lt;ResourceDictionary&gt;
 &lt;ResourceDictionary.MergedDictionaries&gt;

 &lt;ResourceDictionary Source="./Themes/Viewport.xaml"/&gt;

 &lt;/ResourceDictionary.MergedDictionaries&gt;
 &lt;/ResourceDictionary&gt;
 &lt;/Application.Resources&gt;
&lt;/Application&gt;
</code></pre>

Usage:

<pre><code>&lt;viewers:Viewport&gt;
 &lt;Image Source="{Binding}"/&gt;
&lt;/viewers:Viewport&gt;
</code></pre>

Any issues, give me a shout.

Happy coding :)

blocks|key|3120208|text|由@WiesławŠoltés+answer+above提供的卓越解决方案的一个补充|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3120209|现有的代码使用右键单击来重置图像位置，但我更习惯于通过双击来重置图像位置。只需替换现有的child_MouseLeftButtonDown处理程序：|3120210|private+void+child_MouseLeftButtonDown(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++if+(child+!=+null)
++++++++{
++++++++++++var+tt+=+GetTranslateTransform(child);
++++++++++++start+=+e.GetPosition(this);
++++++++++++origin+=+new+Point(tt.X,+tt.Y);
++++++++++++this.Cursor+=+Cursors.Hand;
++++++++++++child.CaptureMouse();
++++++++}
++++}|code-block|syntax|javascript|3120211|有了这个：|3120212|private+void+child_MouseLeftButtonDown(object+sender,+MouseButtonEventArgs+e)
++++{
++++++++if+((e.ChangedButton+==+MouseButton.Left+&&+e.ClickCount+==+1))
++++++++{
++++++++++++if+(child+!=+null)
++++++++++++{
++++++++++++++++var+tt+=+GetTranslateTransform(child);
++++++++++++++++start+=+e.GetPosition(this);
++++++++++++++++origin+=+new+Point(tt.X,+tt.Y);
++++++++++++++++this.Cursor+=+Cursors.Hand;
++++++++++++++++child.CaptureMouse();
++++++++++++}
++++++++}

++++++++if+((e.ChangedButton+==+MouseButton.Left+&&+e.ClickCount+==+2))
++++++++{
++++++++++++this.Reset();
++++++++}
++++}|3120213|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/6782715/521342^0|N|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

One addition to the superb solution provided by @Wiesław Šoltés answer <a href="https://stackoverflow.com/a/6782715/521342">above</a>
The existing code resets the image position using right click, but I am more accustomed to doing that with a double click. Just replace the existing child_MouseLeftButtonDown handler:
<pre><code>private void child_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 if (child != null)
 {
 var tt = GetTranslateTransform(child);
 start = e.GetPosition(this);
 origin = new Point(tt.X, tt.Y);
 this.Cursor = Cursors.Hand;
 child.CaptureMouse();
 }
 }
</code></pre>
With this:
<pre><code>private void child_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 if ((e.ChangedButton == MouseButton.Left &amp;&amp; e.ClickCount == 1))
 {
 if (child != null)
 {
 var tt = GetTranslateTransform(child);
 start = e.GetPosition(this);
 origin = new Point(tt.X, tt.Y);
 this.Cursor = Cursors.Hand;
 child.CaptureMouse();
 }
 }

 if ((e.ChangedButton == MouseButton.Left &amp;&amp; e.ClickCount == 2))
 {
 this.Reset();
 }
 }
</code></pre>

blocks|key|345996|text|我也尝试了this+answer，但对结果并不完全满意。我不断地用谷歌搜索，最终找到了一个Nuget包，它帮助我管理我想要的结果，anno+2021。我想与Stack+Overflow的前开发人员分享它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|345997|我使用了通过this+Github+Repository找到的Gu.WPF.Geometry+this+Nuget+Package。开发的所有积分应该归这个包的所有者Johan+Larsson所有。|style|BOLD|345998|我是如何使用它的？我想让命令在zoombox下面显示为按钮，如MachineLayoutControl.xaml中所示。|CODE|345999|<UserControl
+++x:Class="MyLib.MachineLayoutControl"
+++xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+++xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+++xmlns:csmachinelayoutdrawlib="clr-namespace:CSMachineLayoutDrawLib"
+++xmlns:effects="http://gu.se/Geometry">
+++<UserControl.Resources>
+++++++<ResourceDictionary+Source="Resources/ResourceDictionaries/AllResourceDictionariesCombined.xaml"+/>
+++</UserControl.Resources>

+++<Grid+Margin="0">
+++++++<Grid.RowDefinitions>
+++++++++++<RowDefinition+Height="*"+/>
+++++++++++<RowDefinition+Height="Auto"+/>
+++++++</Grid.RowDefinitions>

+++++++<Border
+++++++++++Grid.Row="0"
+++++++++++Margin="0,0"
+++++++++++Padding="0"
+++++++++++BorderThickness="1"
+++++++++++Style="{StaticResource+Border_Head}"
+++++++++++Visibility="Visible">
+++++++++++<effects:Zoombox
+++++++++++++++x:Name="ImageBox"
+++++++++++++++IsManipulationEnabled="True"
+++++++++++++++MaxZoom="10"
+++++++++++++++MinZoom="0.1"
+++++++++++++++Visibility="{Binding+Zoombox_Visibility}">
+++++++++++++++<ContentControl+Content="{Binding+Viewing_Canvas}"+/>
+++++++++++</effects:Zoombox>
+++++++</Border>
+++++++++++<StackPanel
+++++++++++++++Grid.Column="1"
+++++++++++++++Margin="10"
+++++++++++++++HorizontalAlignment="Right"
+++++++++++++++Orientation="Horizontal">
+++++++++++++++<Button
+++++++++++++++++++Command="effects:ZoomCommands.Increase"
+++++++++++++++++++CommandParameter="2.0"
+++++++++++++++++++CommandTarget="{Binding+ElementName=ImageBox}"
+++++++++++++++++++Content="Zoom+In"
+++++++++++++++++++Style="{StaticResource+StyleForResizeButtons}"+/>

+++++++++++++++<Button
+++++++++++++++++++Command="effects:ZoomCommands.Decrease"
+++++++++++++++++++CommandParameter="2.0"
+++++++++++++++++++CommandTarget="{Binding+ElementName=ImageBox}"
+++++++++++++++++++Content="Zoom+Out"
+++++++++++++++++++Style="{StaticResource+StyleForResizeButtons}"+/>

+++++++++++++++<Button
+++++++++++++++++++Command="effects:ZoomCommands.Uniform"
+++++++++++++++++++CommandTarget="{Binding+ElementName=ImageBox}"
+++++++++++++++++++Content="See+Full+Machine"
+++++++++++++++++++Style="{StaticResource+StyleForResizeButtons}"+/>

+++++++++++++++<Button
+++++++++++++++++++Command="effects:ZoomCommands.UniformToFill"
+++++++++++++++++++CommandTarget="{Binding+ElementName=ImageBox}"
+++++++++++++++++++Content="Zoom+To+Machine+Width"
+++++++++++++++++++Style="{StaticResource+StyleForResizeButtons}"+/>
+++
+++++++++++</StackPanel>

</Grid>
</UserControl>|code-block|syntax|javascript|346000|在底层的Viewmodel中，我有以下相关代码：|346001|public+Visibility+Zoombox_Visibility+{+get+=>+movZoombox_Visibility;+set+{+movZoombox_Visibility+=+value;+OnPropertyChanged(nameof(Zoombox_Visibility));+}+}
public+Canvas+Viewing_Canvas+{+get+=>+mdvViewing_Canvas;+private+set+=>+mdvViewing_Canvas+=+value;+}|346002|此外，我还希望在加载时立即执行，Uniform+to+Fill+Command被执行，这是我在代码隐藏MachineLayoutControl.xaml.cs中设法做到的事情。您可以看到，我只在命令执行时将Zoombox设置为可见，以避免在加载用户控件时出现“闪烁”。|346003|++++public+partial+class+MachineLayoutControl+:+UserControl
++++{
++++++++#region+Constructors

++++++++public+MachineLayoutControl()
++++++++{
++++++++++++InitializeComponent();
++++++++++++Loaded+%2B=+MyWindow_Loaded;
++++++++}

++++++++#endregion+Constructors

++++++++#region+EventHandlers

++++++++private+void+MyWindow_Loaded(object+sender,+RoutedEventArgs+e)
++++++++{
++++++++++++Application.Current.Dispatcher.BeginInvoke(
+++++++++++++++DispatcherPriority.ApplicationIdle,
+++++++++++++++new+Action(()+=>
+++++++++++++++{
+++++++++++++++++++ZoomCommands.Uniform.Execute(null,+ImageBox);
+++++++++++++++++++((MachineLayoutControlViewModel)DataContext).Zoombox_Visibility+=+Visibility.Visible;
+++++++++++++++}));
++++++++}

++++++++#endregion+EventHandlers
++++}|346004|​|346005|📷|atomic|346006|346007|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/741956/pan-zoom-image/6782715#6782715|1|https://github.com/GuOrg/Gu.Wpf.Geometry|2|https://www.nuget.org/packages/Gu.Wpf.Geometry/|3|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/9c59110337f47671835dd3082619b5dc.png|imageAlt^0|5|B|0|0|V|F|2B|G|6|M|1|1B|I|2|0|V|P|0|0|0|0|F|3B|1F|S|0|0|0|1|0|0|1|0|1|3|0|0|1|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|D|3|E|5|6|7|1P|8|@$A|1Q|B|1R|F|G]|$A|1S|B|1T|F|G]]|9|@$A|1U|B|1V|1|1W]|$A|1X|B|1Y|1|1Z]]|C|$]]|$1|H|3|I|5|6|7|20|8|@$A|21|B|22|F|J]]|9|@]|C|$]]|$1|K|3|L|5|M|7|23|8|@]|9|@]|C|$N|O]]|$1|P|3|Q|5|6|7|24|8|@]|9|@]|C|$]]|$1|R|3|S|5|M|7|25|8|@]|9|@]|C|$N|O]]|$1|T|3|U|5|6|7|26|8|@$A|27|B|28|F|G]|$A|29|B|2A|F|J]]|9|@]|C|$]]|$1|V|3|W|5|M|7|2B|8|@]|9|@]|C|$N|O]]|$1|X|3|Y|5|6|7|2C|8|@$A|2D|B|2E|F|G]]|9|@]|C|$]]|$1|Z|3|10|5|11|7|2F|8|@$A|2G|B|2H|F|G]]|9|@$A|2I|B|2J|1|2K]]|C|$]]|$1|12|3|Y|5|6|7|2L|8|@$A|2M|B|2N|F|G]]|9|@]|C|$]]|$1|13|3|-4|5|6|7|2O|8|@]|9|@]|C|$]]]|14|$15|$5|16|17|18|C|$19|1A]]|1B|$5|16|17|18|C|$19|1C]]|1D|$5|16|17|18|C|$19|1E]]|1F|$5|1G|17|1H|C|$1I|1J|1K|-4]]]]

I also tried <a href="https://stackoverflow.com/questions/741956/pan-zoom-image/6782715#6782715">this answer</a> but was not entirely happy with the result. I kept googling around and finally found a Nuget Package that helped me to manage the result I wanted, anno 2021. I would like to share it with the former developers of Stack Overflow.
I used <a href="https://www.nuget.org/packages/Gu.Wpf.Geometry/" rel="nofollow noreferrer">this Nuget Package</a> Gu.WPF.Geometry found via <a href="https://github.com/GuOrg/Gu.Wpf.Geometry" rel="nofollow noreferrer">this Github Repository</a>. All credits for develoment should go to Johan Larsson, the owner of this package.
How I used it? I wanted to have the commands as buttons below the zoombox, as shown here in <code>MachineLayoutControl.xaml</code> .
<pre><code>&lt;UserControl
 x:Class=&quot;MyLib.MachineLayoutControl&quot;
 xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
 xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
 xmlns:csmachinelayoutdrawlib=&quot;clr-namespace:CSMachineLayoutDrawLib&quot;
 xmlns:effects=&quot;http://gu.se/Geometry&quot;&gt;
 &lt;UserControl.Resources&gt;
 &lt;ResourceDictionary Source=&quot;Resources/ResourceDictionaries/AllResourceDictionariesCombined.xaml&quot; /&gt;
 &lt;/UserControl.Resources&gt;

 &lt;Grid Margin=&quot;0&quot;&gt;
 &lt;Grid.RowDefinitions&gt;
 &lt;RowDefinition Height=&quot;*&quot; /&gt;
 &lt;RowDefinition Height=&quot;Auto&quot; /&gt;
 &lt;/Grid.RowDefinitions&gt;

 &lt;Border
 Grid.Row=&quot;0&quot;
 Margin=&quot;0,0&quot;
 Padding=&quot;0&quot;
 BorderThickness=&quot;1&quot;
 Style=&quot;{StaticResource Border_Head}&quot;
 Visibility=&quot;Visible&quot;&gt;
 &lt;effects:Zoombox
 x:Name=&quot;ImageBox&quot;
 IsManipulationEnabled=&quot;True&quot;
 MaxZoom=&quot;10&quot;
 MinZoom=&quot;0.1&quot;
 Visibility=&quot;{Binding Zoombox_Visibility}&quot;&gt;
 &lt;ContentControl Content=&quot;{Binding Viewing_Canvas}&quot; /&gt;
 &lt;/effects:Zoombox&gt;
 &lt;/Border&gt;
 &lt;StackPanel
 Grid.Column=&quot;1&quot;
 Margin=&quot;10&quot;
 HorizontalAlignment=&quot;Right&quot;
 Orientation=&quot;Horizontal&quot;&gt;
 &lt;Button
 Command=&quot;effects:ZoomCommands.Increase&quot;
 CommandParameter=&quot;2.0&quot;
 CommandTarget=&quot;{Binding ElementName=ImageBox}&quot;
 Content=&quot;Zoom In&quot;
 Style=&quot;{StaticResource StyleForResizeButtons}&quot; /&gt;

 &lt;Button
 Command=&quot;effects:ZoomCommands.Decrease&quot;
 CommandParameter=&quot;2.0&quot;
 CommandTarget=&quot;{Binding ElementName=ImageBox}&quot;
 Content=&quot;Zoom Out&quot;
 Style=&quot;{StaticResource StyleForResizeButtons}&quot; /&gt;

 &lt;Button
 Command=&quot;effects:ZoomCommands.Uniform&quot;
 CommandTarget=&quot;{Binding ElementName=ImageBox}&quot;
 Content=&quot;See Full Machine&quot;
 Style=&quot;{StaticResource StyleForResizeButtons}&quot; /&gt;

 &lt;Button
 Command=&quot;effects:ZoomCommands.UniformToFill&quot;
 CommandTarget=&quot;{Binding ElementName=ImageBox}&quot;
 Content=&quot;Zoom To Machine Width&quot;
 Style=&quot;{StaticResource StyleForResizeButtons}&quot; /&gt;
 
 &lt;/StackPanel&gt;

&lt;/Grid&gt;
&lt;/UserControl&gt;

</code></pre>
In the underlying Viewmodel, I had the following relevant code:
<pre><code>public Visibility Zoombox_Visibility { get =&gt; movZoombox_Visibility; set { movZoombox_Visibility = value; OnPropertyChanged(nameof(Zoombox_Visibility)); } }
public Canvas Viewing_Canvas { get =&gt; mdvViewing_Canvas; private set =&gt; mdvViewing_Canvas = value; }
</code></pre>
Also, I wanted that immediately on loading, the Uniform to Fill Command was executed, this is something that I managed to do in the code-behind <code>MachineLayoutControl.xaml.cs</code> . You see that I only set the Zoombox to visible if the command is executed, to avoid &quot;flickering&quot; when the usercontrol is loading.
<pre><code> public partial class MachineLayoutControl : UserControl
 {
 #region Constructors

 public MachineLayoutControl()
 {
 InitializeComponent();
 Loaded += MyWindow_Loaded;
 }

 #endregion Constructors

 #region EventHandlers

 private void MyWindow_Loaded(object sender, RoutedEventArgs e)
 {
 Application.Current.Dispatcher.BeginInvoke(
 DispatcherPriority.ApplicationIdle,
 new Action(() =&gt;
 {
 ZoomCommands.Uniform.Execute(null, ImageBox);
 ((MachineLayoutControlViewModel)DataContext).Zoombox_Visibility = Visibility.Visible;
 }));
 }

 #endregion EventHandlers
 }
</code></pre>
<a href="https://i.stack.imgur.com/8kcpj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8kcpj.png" alt="Result" /></a>

I want to create a simple image viewer in WPF that will enable the user to:

<ul>
<li>Pan (by mouse dragging the image).</li>
<li>Zoom (with a slider).</li>
<li>Show overlays (rectangle selection for example).</li>
<li>Show original image (with scroll bars if needed).</li>
</ul>

Can you explain how to do it? 

I didn't find a good sample on the web.
Should I use ViewBox? Or ImageBrush? 
Do I need ScrollViewer?

Pan & Zoom Image

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我想在WPF中创建一个简单的图像查看器，使用户能够：平移(通过鼠标拖动图像)。缩放(使用滑块)。显示覆盖(例如矩形选择)。显示原始图像(如果需要，使用滚动条)。你能解释一下怎么做吗？我在网上找不到好的样品。我应该使用ViewBox吗？或者是ImageBrush？我需要ScrollViewer吗？

问平移和缩放图像
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问平移和缩放图像EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问平移和缩放图像
EN