User Id :    Password :      New Member   Forgot Password  
Magnifying Glass Effect in Silverlight
Description Magnifying Glass Effect in Silverlight   No. of Views     1727
  Rating     0
Author Rahul Saxena   Posted On     04 Nov 2011
Tags Silverlight    

Sample Code   Download Code

In this article I am going to show how we can magnify an image. By magnifying mean we can zoom a particular part of an image.

This is the xaml code

<UserControl x:Class="MagnifyingGlassEffect.MainPage" 
    d:DesignHeight="350" d:DesignWidth="450"> 
    <Canvas x:Name="LayoutRoot" Background="White"> 
        <Image x:Name="ImageToMagnify" Width="320" Height="240" Source="Earth.jpg" MouseMove="ImageToMagnify_MouseMove"
               MouseLeftButtonDown="ImageToMagnify_MouseLeftButtonDown" MouseLeftButtonUp="ImageToMagnify_MouseLeftButtonUp" />
        <Image x:Name="glass" Width="320" Height="240" Visibility="Collapsed" Source="Earth.jpg" IsHitTestVisible="False"> 
                <ScaleTransform ScaleX="2" ScaleY="2"/> 
                <EllipseGeometry x:Name="geometry" RadiusX="40" RadiusY="40" /> 

This is my xaml.cs code

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 MagnifyingGlassEffect 
    public partial class MainPage : UserControl 
        public MainPage() 

        private void ImageToMagnify_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
            glass.Visibility = Visibility.Visible; 

        private void ImageToMagnify_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
            glass.Visibility = Visibility.Collapsed; 

        private void ImageToMagnify_MouseMove(object sender, MouseEventArgs e) 

        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); 

When run the application then

Image 1.

When we magnify this image


Image 2



Image 3

About Author

About Author Rahul shows great interests in working with Microsoft technologies. He specializes in the implementation of DataBase & Graphics. His area of expertise includes: C#, ASP.NET,ADO.NET,Windows Forms & Web Services. He hails from background , Master's in Computer Application. With programming he loves photography, traveling and reading books. Rahul Saxena
No Photo
Country India
Company N/A
Home Page N/A

Rate this article

Rating options from poor, fair, good, very good to excelent.  


Write your comment here.
Verification Code