Method for realizing local enlargement effect of pictures by silverlight

In this paper, an example is given to describe the method of realizing local enlargement effect of pictures by silverlight. Share it for your reference, as follows:

Many shopping platforms (such as JD.COM Shopping) have this effect when browsing product details. A few days ago, I saw a friend ask if SL can be realized, of course

Interface:

1. Small picture on the left (just use a rectangular Fill1 picture)
2. Translucent rectangle on left
3. Large picture on the right (use one Canvas to set Clip cropping visual area as a mask, and place the picture in Canvas)

Principle:

Get the relative position of the semitransparent rectangle on the left side, and then dynamically adjust Canvas. Left and Canvas. Top on the large image on the right side

You need to know the following technical points:

1. Application of Clip
2. How to Drag an Object
3. Boundary detection when dragging
4. Dynamically adjust the Canvas. Left and Canvas. Top properties of objects

Dimension points:

1. The "aspect ratio" of the visible area of the large picture on the right side should be the same as that of the translucent rectangle on the left side
2. The original size-to-length ratio of the picture should be the same as the length ratio of the small picture on the left
3. Original picture size/left small picture size = right visible area size/translucent rectangle size

Key code:

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()
    {
      //  Required for initializing variables 
      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();// Title animation, which can be removed 
    }
    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>
    ///  Debugging information 
    /// </summary>
    void Debug()
    {
      txtResult.Text = " Relative mouse coordinates: " + mousePosition.ToString() + "\n Small frame left : " + rect.GetValue(Canvas.LeftProperty) + ", Small frame top : " + rect.GetValue(Canvas.TopProperty) + "\n Big picture left : " + ((double)img.GetValue(Canvas.LeftProperty)).ToString("F0") + ", Big picture right : " + ((double)img.GetValue(Canvas.TopProperty)).ToString("F0");
    }
    /// <summary>
    ///  Adjust the position of the large picture on the right 
    /// </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);
    }
  }
}

For more readers interested in C # related content, please check the topics on this site: "Summary of C # Picture Operation Skills", "C # Common Control Usage Tutorial", "WinForm Control Usage Summary", "C # Data Structure and Algorithm Tutorial", "C # Object-Oriented Programming Introduction Tutorial" and "C # Programming Thread Use Skills Summary"

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