很多购物平台中(比如京东购物),浏览产品详情时都有这种效果,前几天看到有朋友问SL能不能实现,当然可以了。

界面:

1.左侧小图片(用一个矩形Fill一张图片即可)
2.左侧半透明矩形
3.右侧大图片(用一个Canvas设置Clip裁剪可视区域作为蒙板,图片放置在Canvas中即可)

原理:

获取左侧半透明矩形的相对位置,然后动态调整右侧大图的Canvas.Left与Canvas.Top

需要知道以下技术点:
1.Clip的应用
2.如何拖动对象
3.拖动时的边界检测
4.动态调整对象的Canvas.Left与Canvas.Top属性

尺寸要点:

1.右侧大图可视区域与左侧半透明矩形的“长宽比例”应该相同
2.“图片原始尺寸长度比” 应该 “与左侧小图片长度比”相同
3.图片原始大小/左侧小图大小 = 右侧可视区域大小/半透明矩形大小。

关键代码:
  1. using System.Windows;
  2. using System.Windows.Controls;
  3. using System.Windows.Input;

  4. namespace PartMagnifier
  5. {
  6.     public partial class MainPage : UserControl
  7.     {
  8.         bool trackingMouseMove = false;
  9.         Point mousePosition;


  10.         public MainPage()
  11.         {
  12.             // 为初始化变量所必需
  13.             InitializeComponent();


  14.         }

  15.         private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)
  16.         {
  17.             Adjust();
  18.         }

  19.         private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  20.         {
  21.             FrameworkElement element = sender as FrameworkElement;
  22.             mousePosition = e.GetPosition(element);
  23.             trackingMouseMove = true;
  24.             if (null != element)
  25.             {
  26.                 element.CaptureMouse();
  27.                 element.Cursor = Cursors.Hand;
  28.             }
  29.             Adjust();
  30.             Debug();
  31.             sb.Begin();//标题动画,可去掉
  32.         }

  33.         private void Rectangle_MouseMove(object sender, MouseEventArgs e)
  34.         {
  35.             FrameworkElement element = sender as FrameworkElement;
  36.             if (trackingMouseMove)
  37.             {
  38.                 double deltaV = e.GetPosition(element).Y - mousePosition.Y;
  39.                 double deltaH = e.GetPosition(element).X - mousePosition.X;
  40.                 double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
  41.                 double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);
  42.                 if (newLeft <= 10)
  43.                 {
  44.                     newLeft = 10;
  45.                 }
  46.                 if (newLeft >= 130)
  47.                 {
  48.                     newLeft = 130;
  49.                 }
  50.                 if (newTop <= 10) { newTop = 10; }
  51.                 if (newTop >= 85) { newTop = 85; }
  52.                 element.SetValue(Canvas.TopProperty, newTop);
  53.                 element.SetValue(Canvas.LeftProperty, newLeft);
  54.                 mousePosition = e.GetPosition(element);
  55.                 Adjust();
  56.                 if (mousePosition.X <= 0 || mousePosition.Y <= 0) { return; }
  57.                 Debug();
  58.             }
  59.         }

  60.         private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  61.         {
  62.             FrameworkElement element = sender as FrameworkElement;
  63.             trackingMouseMove = false;
  64.             element.ReleaseMouseCapture();
  65.             mousePosition.X = mousePosition.Y = 0;
  66.             element.Cursor = null;
  67.         }

  68.         /// <summary>
  69.         /// 调试信息
  70.         /// </summary>
  71.         void Debug()
  72.         {
  73.             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");
  74.         }


  75.         /// <summary>
  76.         /// 调整右侧大图的位置
  77.         /// </summary>
  78.         void Adjust()
  79.         {
  80.            
  81.             double n = cBig.Width / rect.Width;
  82.             double left = (double)rect.GetValue(Canvas.LeftProperty) - 10;
  83.             double top = (double)rect.GetValue(Canvas.TopProperty) - 10;
  84.             double newLeft = -left * n;
  85.             double newTop = -top * n;
  86.             img.SetValue(Canvas.LeftProperty, newLeft);
  87.             img.SetValue(Canvas.TopProperty, newTop);
  88.         }

  89.     }
  90. }
复制代码
主要代码下载:
附件: 亲,您没有权限下载或查看附件喔:-) 试试登录注册吧!
TOP

谢谢,找了好长时间
TOP

拼吾爱程序人生

拼吾爱程序人生
TOP

学习资料下载
TOP

GOOD

GOOD
TOP

下来看看
TOP

学技术!
TOP

不错

还不错.
TOP

正在学习Silverlight
TOP

我要下载

..................奶奶的 ,有点麻烦
TOP