本文参考：菩提树下的杨过的silverlight图片局部放大效果。
效果图：
前台代码：
<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="630" Height="270">
<Canvas x:Name="LayoutRoot" Background="#FFB8BEBA" Loaded="LayoutRoot_Loaded">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded" >
<BeginStoryboard>
<Storyboard x:Name="sb" RepeatBehavior="2x">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="6">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:02" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseInOut" Amplitude="4"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="00:00:03" Value="-3">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Rectangle Stroke="Black" Width="200" Height="125" Canvas.Left="10" Canvas.Top="10">
<Rectangle.Fill>
<ImageBrush ImageSource="img/1.jpg" Stretch="Uniform"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle Stroke="Black" Height="50" Width="80" Fill="#99FFFFFF" StrokeThickness="0" Cursor="Hand" Canvas.Left="70" Canvas.Top="40" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" MouseMove="Rectangle_MouseMove" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" x:Name="rect">
</Rectangle>
<TextBlock x:Name="txtName" Canvas.Left="63" Canvas.Top="144" Text="图片局部放大效果" TextWrapping="Wrap" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-719.885"/>
<TranslateTransform X="1" Y="1"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock Canvas.Left="10" Canvas.Top="244" Text="by 菩提树下的杨过" TextWrapping="Wrap"/>
<TextBlock x:Name="txtResult" Canvas.Left="10" Canvas.Top="182" TextWrapping="Wrap" Width="200" TextAlignment="Center" Height="38"/>
<Canvas Width="400" Height="250" Canvas.Top="10" Canvas.Left="220" x:Name="cBig">
<Canvas.Clip>
<RectangleGeometry Rect="0,0,400,250">
</RectangleGeometry>
</Canvas.Clip>
<Image x:Name="img" Height="625" Width="1000" Canvas.Left="0" Canvas.Top="0" Source="img/1.jpg" Stretch="None">
</Image>
</Canvas>
<Rectangle Width="400" Height="250" Stroke="Black" Canvas.Top="10" Canvas.Left="220"/>
</Canvas>
</UserControl>
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Diagnostics;
namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
bool trackingMouseMove = false;
Point mousePosition;
public MainPage()
{
InitializeComponent();
}
private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
Adjust();
}
private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
mousePosition = e.GetPosition(element);
trackingMouseMove = true;
if (null != element)
{
element.CaptureMouse();
element.Cursor = Cursors.Hand;
}
Adjust();
Debug();
sb.Begin();//标题动画，可去掉
}
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
if (trackingMouseMove)
{
double deltaV = e.GetPosition(element).Y - mousePosition.Y;
double deltaH = e.GetPosition(element).X - mousePosition.X;
double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);
if (newLeft <= 10)
{
newLeft = 10;
}
if (newLeft >= 130)
{
newLeft = 130;
}
if (newTop <= 10) { newTop = 10; }
if (newTop >= 85) { newTop = 85; }
element.SetValue(Canvas.TopProperty, newTop);
element.SetValue(Canvas.LeftProperty, newLeft);
mousePosition = e.GetPosition(element);
Adjust();
if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; }
Debug();
}
}
private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
FrameworkElement element = sender as FrameworkElement;
trackingMouseMove = false;
element.ReleaseMouseCapture();
mousePosition.X = mousePosition.Y = 0;
element.Cursor = null;
}
/// <summary>
/// 调试信息
/// </summary>
void Debug()
{
txtResult.Text = "鼠标相对坐标：" + mousePosition.ToString() + "\n小框left：" + rect.GetValue(Canvas.LeftProperty) + ",小框top：" + rect.GetValue(Canvas.TopProperty) + "\n大图left：" + ((double)img.GetValue(Canvas.LeftProperty)).ToString("F0") + ",大图right：" + ((double)img.GetValue(Canvas.TopProperty)).ToString("F0");
}
/// <summary>
/// 调整右侧大图的位置
/// </summary>
void Adjust()
{
double n = cBig.Width / rect.Width;
double left = (double)rect.GetValue(Canvas.LeftProperty) - 10;
double top = (double)rect.GetValue(Canvas.TopProperty) - 10;
double newLeft = -left * n;
double newTop = -top * n;
img.SetValue(Canvas.LeftProperty, newLeft);
img.SetValue(Canvas.TopProperty, newTop);
}
}
}