Magnifying Glass Effect in Silverlight

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"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="350" d:DesignWidth="450">

<Image x:Name="ImageToMagnify" Width="320" Height="240" Source="Earth.jpg" MouseMove="ImageToMagnify_MouseMove"

MouseLeftButtonDown="ImageToMagnify_MouseLeftButtonDown" MouseLeftButtonUp="ImageToMagnify_MouseLeftButtonUp" />

<Image.RenderTransform>

</Image.RenderTransform>

<Image.Clip>

</Image.Clip>

</Image>

</Canvas>

</UserControl>

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

{

InitializeComponent();

}

private void ImageToMagnify_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

glass.Visibility = Visibility.Visible;

UpdateGlassPosition(e.GetPosition(ImageToMagnify));

}

private void ImageToMagnify_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

glass.Visibility = Visibility.Collapsed;

}

private void ImageToMagnify_MouseMove(object sender, MouseEventArgs e)

{

UpdateGlassPosition(e.GetPosition(ImageToMagnify));

}

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.