Writing Movable Transparent control with Magnifier functionality.

• Download demo project - 371 Kb

Introduction

With the advent of GDI+ in .Net, graphics programming is made very easy. One of the main functionality provided by Microsoft in .net is the transparency, yet this transparency can be applied to only to forms. For having our cool transparent control, Bob Powell in article at   http://www.bobpowell.net/transcontrols.htm

I will just continue this article to write a control which provides magnification functionality as well.

Writing Transparent control with Magnification functionality.

We will develop this magnifier control in two steps, first we will write a transparent control and then change it to add magnifying functionality.

Step 1:

I have written a class TransControl inheriting from System.Windows.Forms.Form

namespace TransControl

{

/// <summary>

 

/// Summary description for Form1.

 

/// </summary>

 

public class Form1 : System.Windows.Forms.Form

{
<CODE>

Now to make this control I will have to make couple of things as,

First, I will have to change the behavior of the window by giving it a <SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: Georgia; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA">WS_EX_TRANSPARENT style. This is accomplished by overriding the CreateParams property so that the correct window style is included when the control is instantiated.
The listing below shows this property override.

protectedoverrideCreateParams CreateParams 

{ 

get 

{ 

CreateParams cp=base.CreateParams; 

cp.ExStyle|=0x00000020; //WS_EX_TRANSPARENT 

returncp; 

} 

} 

Second, just to make sure the control background is not painted, we will have a blank OnPaintBackground event, as follows.

protected override void OnPaintBackground(PaintEventArgs pevent) 
{ 
//Do not write anything here, and do not remove it. 

} 

So with this our transparent control is ready now we need to make this control movable, so we will add these events in the class as follows,

protected void this_MouseMove(object sender, MouseEventArgs e)

{

if(isMouseDown)

{

this.Left = this.Left + (e.X-x);

this.Top = this.Top + (e.Y-y);

//Refresh the parent to ensure that whatever is behind the control gets painted 

//before we need to do our own graphics output.

this.Parent.Refresh();

}

}

protected void this_MouseDown(object sender, MouseEventArgs e)

{

x= e.X;

y=e.Y;

left=this.Left;

top=this.Top;

isMouseDown=true;

this.Cursor= Cursors.SizeAll;

}

 

protected void this_MouseUp(object sender, MouseEventArgs e)

{

isMouseDown=false;

this.Cursor= Cursors.Default;

this.Refresh();

}

Here ends our movable transparent control, now we will add the magnifier functionality.

Step 2:

We have written the transparent control, now we will change it to add Magnification functionality

This control should do two things,

1) It should magnify the selected background

2) It should support, setting X & Y offset, to see magnification of a particular point.

For Magnification, I have used very simple logic as , whenever you draw an image of small size on bigger canvas, it looks like magnified although the quality is not very good.

I have declared three properties in TransControl, as

public int XOffset=0;

public int YOffset=0;

public int MagnificationFactor=0;

These three properties will be used by TransControl to provide magnification. Remember, in first step we overrided the OnPaintBackground method and kept it blank, now we will the code in it as follows,

protected override void OnPaintBackground(PaintEventArgs pevent)

{

pevent.Graphics.DrawImage(this.Parent.BackgroundImage,new Rectangle(0,0,this.Width,this.Height),this.Left + XOffset,this.Top + YOffset,this.Width-(MagnificationFactor/10),this.Height-(MagnificationFactor/10), GraphicsUnit.Pixel);

}

Thats all, we are ready with Movable magnifier control.