Click here to Skip to main content
12,405,895 members (66,817 online)
Click here to Skip to main content
Add your own
alternative version

Stats

270.6K views
2 downloads
58 bookmarked
Posted

Create Transparent Windows using C#

, 31 May 2001
Rate this:
Please Sign up or sign in to vote.
This article demonstrates various new UI features such as Transparent Windows, Control Anchoring and Control Docking.

Introduction

Hi there! Its time to do what? To play Columbus! Of course not all set to go rediscover America but at least to discover the new enhanced User Interface capabilities of the .Net platform! In this lab we'll be looking at various new UI features such as Transparent Windows, Control Anchoring and Control Docking. The jargon getting to you? Fret not at the end of this lab exercise not only will you be able to understand what these mean but also be able to create WinForm applications which use them.

So lets start the journey by starting the Visual Studio.net IDE (if its not already running)

Creating the full application

  1. Start Visual Studio.net

  2. Click File -> New -> Project

  3. Select Visual C# Projects on the left hand panel. And Windows Application on the right-hand-side pane, and type in the name as “ UserXP ” and click OK . This would fire-up the WinForm IDE.

  4. Drag and Drop one TrackBar control on the form. [ you might have to scroll down a bit]

    This is how a TrackBar control looks in the ToolBox

  5. Make sure that the TrackBar control is selected on the form. Look for the Orientation property in the properties box. Click on the drop down arrow and set it to Vertical.

  6. Make sure that the TrackBar control is selected on the form. look for the Dock property in the properties box. Click on the drop down arrow. A figure as shown below appears


    Click on the Left side button on the grid.

    Why did we do that?

    What we've just done is that we've ‘docked' the TrackBar control to the left side of the screen. Now the TaskBar control is ‘tied' or rather ‘is glued' to the left side of the screen, if you notice in the designer the control is already stuck on to the left side of the screen. Even if you at runtime maximize the screen it doesn't budge! It stays right there! We'll see this in action soon.

  7. Make sure that the TrackBar control is still selected and look for the properties listed below in the properties window and set them to the ones specified.

    Property

    Set To

    Large Change

    5

    Maximum

    100

    Minimum

    10

    Small Change

    5

    Value

    100


  8. Phew, almost done! Drag and Drop two label controls from the toolbox onto the form.

    This is how a Label control looks on the ToolBox

  9. Position the label controls as shown in the screen shot below.


    Your Form should now look like this

  10. Change the Text properties of the Label controls to the ones seen in the screen shot.

  11. Drag and Drop a Button control onto the form


    This is how a Button control looks on the ToolBox

  12. Set the Button's Text property to “ End Me Now ! ”


    Change the Text property of the button control

  13. Make sure that the TrackBar control is selected on the form. look for the Anchor property in the properties box. Click on the drop down arrow. A figure as shown below appears


    Anchor property of the Button

  14. Check all four side of the button.

    Why did we do that?

    The Anchor property of any control when set ‘anchors' the control to that position on the Form. That means even if the user resizes the form the control automatically resizes and repositions itself to fit onto the new form size. When a control is anchored to a form and the form is resized, the control maintains the distance between the control and the anchor positions. In our lab, you have a Button control that is anchored to the top, left, right, and bottom edges of the form, as the form is resized, the Textbox control resizes horizontally so that it matches the same distance from the right and left sides of the form. In addition, the control positions itself vertically so that its location is always the same distance from the top and bottom edge of the form. If a control is not anchored and the form is resized, the position of the control relative to the edges of the form is changed.

  15. Position the Button as shown below.


    Your form should now look like this

  16. Now for the coding part! Double click on the TaskBar control on the form to open the code window.

  17. Type in the following line of code

    Form1.Opacity =   (TrackBar1.Value) / 100 


    Type in the above line of code into the code window

    Why did we do that?

    To explore Transparent Windows! To make a window transparent we need to set its opacity property, 1 means its completely opaque( not transparent), the kind of windows we are used to see. And 0 meaning that the window is completely transparent ( infact invisible!). we will be able to adjust the transparency of our form using the TrackBar ! Push it up towards Full Visibility to make it completely opaque, push it right down to make it almost completely transparent! We will see this in action next.

  18. Switch back to the Designer view, by clicking on the icon in the Solution Explorer.


    Click on the view designer button

  19. Double click on the Button control. This should open the code window again for you. Type in the following line of code.

    MessageBox.Show ( "You cant get rid of me that easily!"); 
  20. Phew! We are finally done! Tough one huh? Columbus 's life wasn't easy either! Now lets check out what we've exactly made. Run the program by clicking on the Debug m enu -> and then Start. ( or by pressing F5 )


    Your very own ghostly window!

  21. Drag the TaskBar up and down to vary the degree of transparency of your form. Amazing isn't it? Now try to maximize the window! Notice any thing different? The button changes its size, maintaining a proportionate distance between the edges!! That's Control Anchoring!! Wink | ;)

Hope you guyz had fun [I know you learnt nothing worthwhile!] but in any case if you think you have and there is anything more that you would like to know or would like to flog me about some dumb mistake I made please do so at mjeelani@yahoo.com

</body></html>

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

Share

About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

 
Questionnice Pin
Member 103553547-Feb-14 6:43
memberMember 103553547-Feb-14 6:43 
GeneralMy vote of 5 Pin
vivek.tewari2417-Jun-12 19:28
membervivek.tewari2417-Jun-12 19:28 
GeneralMy vote of 5 Pin
shehrozeee29-Jul-10 10:17
membershehrozeee29-Jul-10 10:17 
GeneralMy vote of 1 Pin
vahid_mardani2-Aug-09 11:50
membervahid_mardani2-Aug-09 11:50 
GeneralHelp Pin
arijit_datta268-Mar-07 20:46
memberarijit_datta268-Mar-07 20:46 
Questionquestion besides this post Pin
sushantkaura3-Mar-07 9:44
membersushantkaura3-Mar-07 9:44 
GeneralCode for VS2005 Pin
esteban8am31-Jan-07 5:18
memberesteban8am31-Jan-07 5:18 
QuestionTransparancy Limitation Conundrum Pin
jalfan2-Feb-06 13:36
memberjalfan2-Feb-06 13:36 
Generalcreate transparent controls on a MdiChild Pin
Anonymous9-Aug-04 6:09
sussAnonymous9-Aug-04 6:09 
GeneralRe: create transparent controls on a MdiChild Pin
Control Vertex20-Oct-05 20:34
memberControl Vertex20-Oct-05 20:34 
GeneralRe: create transparent controls on a MdiChild Pin
DeanAnthonyMcCoy16-Nov-06 7:45
memberDeanAnthonyMcCoy16-Nov-06 7:45 
GeneralIm getting a &quot;type expected&quot; error in the task list... Pin
Anonymous8-May-04 15:12
sussAnonymous8-May-04 15:12 
Generalgod but You have some error !!! Pin
al-saqqaf12-Mar-03 5:31
memberal-saqqaf12-Mar-03 5:31 
QuestionCan anyone please explain why I get this error Pin
asadeen17-Dec-02 9:38
memberasadeen17-Dec-02 9:38 
GeneralThe terrible Ts Pin
Toasty016-May-02 16:13
memberToasty016-May-02 16:13 
GeneralRe: The terrible Ts Pin
M.A.K.Jeelani16-May-02 17:51
memberM.A.K.Jeelani16-May-02 17:51 
GeneralRe: The terrible Ts Pin
arvind2719-Sep-05 9:27
sussarvind2719-Sep-05 9:27 
Generaloperating system Pin
Anonymous20-Jul-01 1:35
memberAnonymous20-Jul-01 1:35 
GeneralRe: operating system Pin
Anonymous5-Nov-01 8:24
memberAnonymous5-Nov-01 8:24 
GeneralRe: operating system Pin
Jeremy Kimball10-Mar-02 11:57
memberJeremy Kimball10-Mar-02 11:57 
GeneralRe: operating system Pin
Toasty015-May-02 21:31
memberToasty015-May-02 21:31 
GeneralRe: operating system Pin
brian141516-May-02 16:39
memberbrian141516-May-02 16:39 
GeneralJust a little nitpicking... Pin
Jeremy Kimball4-Jun-01 7:10
memberJeremy Kimball4-Jun-01 7:10 
GeneralRe: Just a little nitpicking... Pin
Anonymous4-Jun-01 17:19
memberAnonymous4-Jun-01 17:19 
GeneralRe: Just a little nitpicking... Pin
aner_glx26-Oct-01 21:14
memberaner_glx26-Oct-01 21:14 
GeneralRe: Just a little nitpicking... Pin
M.A.K.Jeelani14-May-02 18:24
memberM.A.K.Jeelani14-May-02 18:24 
GeneralI can't access the property at run time. Pin
Phips Xue3-Jun-01 18:14
memberPhips Xue3-Jun-01 18:14 
GeneralRe: I can't access the property at run time. Pin
Craig Dodge22-Jul-01 14:34
memberCraig Dodge22-Jul-01 14:34 
GeneralRe: I can't access the property at run time. Pin
Alexandr Khilov26-Mar-02 8:13
memberAlexandr Khilov26-Mar-02 8:13 
GeneralRe: I can't access the property at run time. Pin
M.A.K.Jeelani14-May-02 18:19
memberM.A.K.Jeelani14-May-02 18:19 
GeneralRe: I can't access the property at run time. Pin
evildictaitor7-Sep-06 16:05
memberevildictaitor7-Sep-06 16:05 
GeneralNice, but... ah... Pin
Bilal Naveed2-Jun-01 11:55
memberBilal Naveed2-Jun-01 11:55 
GeneralRe: Nice, but... ah... Pin
Anonymous3-Jun-01 1:13
memberAnonymous3-Jun-01 1:13 
GeneralRe: Nice, but... ah... Pin
evildictaitor7-Sep-06 16:06
memberevildictaitor7-Sep-06 16:06 
GeneralRe: Nice, but... ah... Pin
jeelani3-Jun-01 6:50
memberjeelani3-Jun-01 6:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160721.1 | Last Updated 1 Jun 2001
Article Copyright 2001 by M.A.K.Jeelani
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid