本文实例讲述了WPF/Silverlight实现图片局部放大的方法。，具体如下：
最近的项目中也要用到一个局部图片放大的功能，前面这篇《silverlight实现图片局部放大效果的方法》虽然已经给出了原理、知识要点、尺寸要点及后端主要代码，但遗憾的是没有给出xaml的代码。这里按照前文中的提示，动手用WPF实践了一下，花了一个小时，终于搞出来了。这篇文章也就算是一个补充吧。
界面如下图所示：
实现的原理和用到的知识点请点击上面的链接，杨大侠已经说的很清楚了。这里主要强调的就是尺寸要点：
右侧大图可视区域与左侧半透明矩形的“长宽比例”应该相同
“图片原始尺寸长度比” 应该 “与左侧小图片长度比”相同
图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小
为了简单起见，我们把尺寸固定死（其实是可以搞成活的），这里仅为了演示，以下尺寸满足上面的条件。
准备一张原图：dog.jpg 分辨率：1920 * 1080
左侧小图片显示区域：用Canvas 显示，尺寸：320 * 180
半透明矩形框尺寸：50*50
右侧大图显示区域：用Canvas显示，尺寸：300 * 300
以下是XAML代码：
<Window x:Class="WpfZoom.MainWindow"
xmlns="http://www.easck.com/winfx/2006/xaml/presentation"
xmlns:x="http://www.easck.com/winfx/2006/xaml"
<Canvas x:Name="RootCanvas">
<!--左侧小图-->
<Canvas x:Name="SmallBox" Width="320" Height="180" Canvas.Left="20" Canvas.Top="20">
<Canvas.Background>
<ImageBrush ImageSource="Images/dog.jpg" Stretch="UniformToFill" />
</Canvas.Background>
<!--半透明矩形框-->
<Rectangle x:Name="MoveRect" Fill="White" Opacity="0.3" Stroke="Red" Width="50" Height="50" Canvas.Top="78" Canvas.Left="202"
MouseMove="MoveRect_MouseMove"
MouseLeftButtonDown="MoveRect_MouseLeftButtonDown"
MouseLeftButtonUp="MoveRect_MouseLeftButtonUp"/>
</Canvas>
<!--右侧大图-->
<Canvas x:Name="BigBox" Width="300" Height="300" Canvas.Left="360" Canvas.Top="20">
<!--右侧原图片 注意尺寸-->
<Image x:Name="bigImg" Width="1920" Height="1080" Canvas.Left="0" Canvas.Top="-780" Source="Images/dog.jpg" />
<Canvas.Clip>
<RectangleGeometry Rect="0,0,300,300" />
</Canvas.Clip>
</Canvas>
</Canvas>
</Window>
