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.  Notice how this has a scale transform applied to it:

<UserControl x:Class="MagnifyingGlass.Page"

    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="LayoutRoot" Background="White">

        <Image x:Name="myImage" Width="320" Height="240" Source="reef.jpg" MouseMove="myImage_MouseMove" MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseLeftButtonUp="Image_MouseLeftButtonUp" />

        <Image x:Name="glass" Width="320" Height="240" Visibility="Collapsed" Source="reef.jpg" IsHitTestVisible="False">

            <Image.RenderTransform>

                <ScaleTransform ScaleX="2" ScaleY="2"/>

            </Image.RenderTransform>

            <Image.Clip>

                <EllipseGeometry x:Name="geometry" RadiusX="40" RadiusY="40" />

            </Image.Clip>

        </Image>

    </Canvas>

</UserControl>

 

 

 

 

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

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace MagnifyingGlass

{

    public partial class Page : UserControl

    {

        public Page()

        {

            InitializeComponent();

        }

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            glass.Visibility = Visibility.Visible;

            UpdateGlassPosition(e.GetPosition(myImage));

        }

        private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            glass.Visibility = Visibility.Collapsed;

        }

        private void myImage_MouseMove(object sender, MouseEventArgs e)

        {

            UpdateGlassPosition(e.GetPosition(myImage));

        }

        private void UpdateGlassPosition(Point position)

        {

            geometry.Center = new Point(position.X, position.Y);

            glass.SetValue(Canvas.LeftProperty, -position.X);

            glass.SetValue(Canvas.TopProperty, -position.Y);

        }

    }

}

In the code we respond to the mouse events and calculate the position of the zoomed in area.  The magnified area is only visible when the mouse button is pressed.