Method for achieving local image enlargement effect in silverlight

This article describes the method of silverlight to achieve local image enlargement effect. Share it for your reference, as follows:

In many shopping platforms (such as JD.com Shopping), this effect has occurred when browsing product details. A few days ago, I saw a friend asking if SL can be implemented, of course.

interface:

1. Small picture on the left (just use a rectangle Fill one picture)
2. Translucent rectangle on the left
3. Large picture on the right (use a Canvas to set the Clip crop visual area as a mask, and the picture can be placed in the Canvas)

principle:

Get the relative position of the translucent rectangle on the left, and dynamically adjust the size of the big picture on the right

You need to know the following technical points:

Applications
2. How to drag an object
3. Boundary detection when dragging
4. Dynamically adjust the object and properties

Size points:

1. The "length and width ratio" of the large image on the right should be the same as the translucent rectangle on the left
2. "The original size and length ratio of the picture" should be the same as the small picture on the left
3. Original size of the image/size of the small image on the left = size of the visible area on the right/similar rectangle size

Key Code:

using ;
using ;
using ;
namespace PartMagnifier
{
  public partial class MainPage : UserControl
  {
    bool trackingMouseMove = false;
    Point mousePosition;
    public MainPage()
    {
      // Required to initialize variables      InitializeComponent();
    }
    private void LayoutRoot_Loaded(object sender,  e)
    {
      Adjust();
    }
    private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
      FrameworkElement element = sender as FrameworkElement;
      mousePosition = (element);
      trackingMouseMove = true;
      if (null != element)
      {
        ();
         = ;
      }
      Adjust();
      Debug();
      ();//Title animation can be removed    }
    private void Rectangle_MouseMove(object sender, MouseEventArgs e)
    {
      FrameworkElement element = sender as FrameworkElement;
      if (trackingMouseMove)
      {
        double deltaV = (element).Y - ;
        double deltaH = (element).X - ;
        double newTop = deltaV + (double)();
        double newLeft = deltaH + (double)();
        if (newLeft &lt;= 10)
        {
          newLeft = 10;
        }
        if (newLeft &gt;= 130)
        {
          newLeft = 130;
        }
        if (newTop &lt;= 10) { newTop = 10; }
        if (newTop &gt;= 85) { newTop = 85; }
        (, newTop);
        (, newLeft);
        mousePosition = (element);
        Adjust();
        if ( &lt;= 0 ||  &lt;= 0) { return; }
        Debug();
      }
    }
    private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
      FrameworkElement element = sender as FrameworkElement;
      trackingMouseMove = false;
      ();
       =  = 0;
       = null;
    }
    /// &lt;summary&gt;
    /// Debugging information    /// &lt;/summary&gt;
    void Debug()
    {
       = "Mouse relative coordinates:" + () + "\nBox left:" + () + ", small box top:" + () + "\nLarge image left:" + ((double)()).ToString("F0") + ",Large image right:" + ((double)()).ToString("F0");
    }
    /// &lt;summary&gt;
    /// Adjust the position of the large picture on the right    /// &lt;/summary&gt;
    void Adjust()
    {
      double n =  / ;
      double left = (double)() - 10;
      double top = (double)() - 10;
      double newLeft = -left * n;
      double newTop = -top * n;
      (, newLeft);
      (, newTop);
    }
  }
}

For more information about C# related content, please check out the topic of this site:Summary of C# picture operation skills》、《Tutorial on the usage of common C# controls》、《Summary of WinForm control usage》、《C# data structure and algorithm tutorial》、《Introduction to C# object-oriented programming tutorial"and"Summary of thread usage techniques for C# programming》

I hope this article will be helpful to everyone's C# programming.