Creating a Magnifying Glass Effect in Silverlight

This article will show you the basics of creating a Silverlight magnifying glass control, where you will be able to position the cursor over an image and click to zoom in on the image portion under the cursor.

The XAML here contains two image elements, the first is the original image and the second is the image as viewed through the magnifying glass. We have applied a ScaleTransform to the second Image. Basically this is the one shown over the first with bigger scale. We also clipped the image to the shape of the circle to get the feel of the zoom lens. 

<UserControl x:Class="Magnifying_Glass.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="640" Height="480">
    <Canvas x:Name="MyRootLayout">
          <Image x:Name="myTargetImg" Stretch="None"
               MouseMove="myTargetImg_MouseMove"
               MouseLeftButtonDown="myTargetImg_MouseLeftButtonDown"
               MouseLeftButtonUp="myTargetImg_MouseLeftButtonUp"
               Source="10.jpg"/>
        <Image x:Name="MyZoomedGlass" Stretch="None" Visibility="Collapsed" 
               IsHitTestVisible="False" Source="10.jpg" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="2" ScaleY="2"/>
                </TransformGroup>
            </Image.RenderTransform>
            <Image.Clip >
                <EllipseGeometry x:Name="MyGeometry" RadiusX="40" RadiusY="40" />
            </Image.Clip>
        </Image>
    </Canvas>
</UserControl>

In the C# we will need to handle the three mouse events MouseLeftButtonDown, MouseLeftButtonUp and MouseMove. 

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace Magnifying_Glass
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void UpdateGlassPosition(Point position) 
        {
            MyGeometry.Center = position;
            MyZoomedGlass.SetValue(Canvas.LeftProperty, -position.X);
            MyZoomedGlass.SetValue(Canvas.TopProperty, -position.Y); 
        }

        private void myTargetImg_MouseMove(object sender, MouseEventArgs e)
        {
            UpdateGlassPosition(e.GetPosition(myTargetImg)); 
        }

        private void myTargetImg_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            MyZoomedGlass.Visibility = Visibility.Visible;
            UpdateGlassPosition(e.GetPosition(myTargetImg));
            MyRootLayout.Cursor = Cursors.Hand;
        }

        private void myTargetImg_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            MyZoomedGlass.Visibility = Visibility.Collapsed;
            MyRootLayout.Cursor = Cursors.Arrow;
        }
    }
}

The second image will be shown once we do MouseLeftButtonDown on the first image. We also set the cursor to Hand. This give some pleasing feeling on the UI. UpdateGlassPosition function is called with the mouse point, with respect to the first image. This is done by passing the first image as the parameter to the GetPostion function.

Once we move the mouse (with the left button pressed), the zoom glass moves along with it. And also show the snap shot of the image part at the location with bigger size.

The output looks as below.

Reference Articles