Click here to Skip to main content
Click here to Skip to main content

Writing Movable Transparent control with Magnifier functionality.

By , 11 Jul 2006
Rate this:
Please Sign up or sign in to vote.

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><FONT color=#0000ff size=2><FONT size=2></FONT>

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

}
<FONT size=2></FONT>

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

</FONT>
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Md Abid
Systems Engineer
India India
I am Systems Engineer working in Microsoft Technologies from last three years. My area of interest is Software Architecture & Design, GDI+ etc.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 11 Jul 2006
Article Copyright 2006 by Md Abid
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid