Working with Silverlight Magnifying Glass Effect

This story help you to learn how we can zoom a part of an image Magnifying Glass Effect in Silverlight.
  • 2255

In this story 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:


When we magnify this image:



More Articles

© 2020 DotNetHeaven. All rights reserved.