很多购物平台中(比如京东购物)，浏览产品详情时都有这种效果，前几天看到有朋友问SL能不能实现，当然可以
界面:
1.左侧小图片(用一个矩形Fill一张图片即可)
2.左侧半透明矩形
3.右侧大图片(用一个Canvas设置Clip裁剪可视区域作为蒙板，图片放置在Canvas中即可)
原理：
获取左侧半透明矩形的相对位置，然后动态调整右侧大图的Canvas.Left与Canvas.Top
需要知道以下技术点:
1.Clip的应用
2.如何拖动对象
3.拖动时的边界检测
4.动态调整对象的Canvas.Left与Canvas.Top属性
尺寸要点:
1.右侧大图可视区域与左侧半透明矩形的“长宽比例”应该相同
2.“图片原始尺寸长度比” 应该 “与左侧小图片长度比”相同
3.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小
关键代码：
代码:by 菩提树下的杨过 http://www.cnblogs.com/yjmyzz
using
System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace PartMagnifier
{
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);
}
}
}
using System.Windows.Controls;
using System.Windows.Input;
namespace PartMagnifier
{
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);
}
}
}
