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

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

About the Author

No Biography provided

Comments and Discussions

 
Questionnice PinmemberMember 103553547-Feb-14 6:43 
GeneralMy vote of 5 Pinmembervivek.tewari2417-Jun-12 19:28 
GeneralMy vote of 5 Pinmembershehrozeee29-Jul-10 10:17 
GeneralMy vote of 1 Pinmembervahid_mardani2-Aug-09 11:50 
GeneralHelp Pinmemberarijit_datta268-Mar-07 20:46 
Questionquestion besides this post Pinmembersushantkaura3-Mar-07 9:44 
GeneralCode for VS2005 Pinmemberesteban8am31-Jan-07 5:18 
QuestionTransparancy Limitation Conundrum Pinmemberjalfan2-Feb-06 13:36 
Generalcreate transparent controls on a MdiChild PinsussAnonymous9-Aug-04 6:09 
GeneralRe: create transparent controls on a MdiChild PinmemberControl Vertex20-Oct-05 20:34 
GeneralRe: create transparent controls on a MdiChild PinmemberDeanAnthonyMcCoy16-Nov-06 7:45 
GeneralIm getting a &quot;type expected&quot; error in the task list... PinsussAnonymous8-May-04 15:12 
Generalgod but You have some error !!! Pinmemberal-saqqaf12-Mar-03 5:31 
QuestionCan anyone please explain why I get this error Pinmemberasadeen17-Dec-02 9:38 
GeneralThe terrible Ts PinmemberToasty016-May-02 16:13 
GeneralRe: The terrible Ts PinmemberM.A.K.Jeelani16-May-02 17:51 
GeneralRe: The terrible Ts Pinsussarvind2719-Sep-05 9:27 
Generaloperating system PinmemberAnonymous20-Jul-01 1:35 
GeneralRe: operating system PinmemberAnonymous5-Nov-01 8:24 
GeneralRe: operating system PinmemberJeremy Kimball10-Mar-02 11:57 
GeneralRe: operating system PinmemberToasty015-May-02 21:31 
GeneralRe: operating system Pinmemberbrian141516-May-02 16:39 
GeneralJust a little nitpicking... PinmemberJeremy Kimball4-Jun-01 7:10 
GeneralRe: Just a little nitpicking... PinmemberAnonymous4-Jun-01 17:19 
GeneralRe: Just a little nitpicking... Pinmemberaner_glx26-Oct-01 21:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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 | Mobile
Web03 | 2.8.140709.1 | Last Updated 1 Jun 2001
Article Copyright 2001 by M.A.K.Jeelani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid