Browse DevX
Sign up for e-mail newsletters from DevX


Don't Be Square: Creating Non-Rectangular Windows with .NET : Page 4

If you're tired of the same old rectangular boring user interfaces in your Windows programs and prefer the funky shapes of applications such as Windows Media Player 9, follow this step-by-step guide to take your applications where they have never been before.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Adding Event Handlers
With Windows Forms, you get a lot of goodies for free, such as form closing, resizing, and dragging handling; but you lose those when using a borderless form (frmBorderstyle=None), so you have to implement your own.

To Add a Close handler to the form:
  • Drag a button control onto the form. Call it btnClose, and assign its Text the string "X".
  • Double click this button to add a click event handler. In Visual Studio.NET, double clicking a control in design mode adds an event handler for the control's default event. If you want to add any other events, you use the events dialog. You'll see how to do this a little later.
  • You should now be in the code editor for the btn_Close() event. Change the event so that it looks like the following:

private void btnClose_Click(object sender, System.EventArgs e) { this.Close(); }

Your form will now close when a user clicks the 'X' button. You can put this button anywhere on the form; you're not limited to the top right hand corner location that you get by default with a traditional form. You could replace the button with a custom Close icon that would work the same way to close the form. If you refer back to Figure 1, you'll see that that's how Windows Media Player does it, too.

To Add a Drag Handler to the form:
  • First, declare a variable of type Point to track the offset of the mouse as you drag it around to move the form. You'll see how this is used in a moment, but for now, place the following code in the declarations section of your form. You can place it just below the declaration of the button at the top of the form declaration.

private Point ptOffset;

  • Next, add a PictureBox control that will intercept the mouse events for mousedown and mousemove so that you can perform the dragging operation. Place the PictureBox over the location that you want to have 'sensitive' to dragging. Many shapeless applications use a specific part of the form (often called a "thumb") for dragging the form around. Assign the BackColor property PictureBox a color other than white (so it won't be transparent). Your form should now look something like Figure 5, where for clarity I colored it dark blue.
Figure 5. Finished GUI sample: The dark blue area acts as a drag point, called a "thumb," so users can move the form even though it doesn't have a visible title bar.
  • Add MouseDown and MouseMove event handlers to the form. In C#, you do this by clicking on the events icon on the property editor. This icon looks like a bold of lightning. To add the event handler, find the event name and double click it. This adds the event declaration and handler to your code. Note that if you are doing this in VB.NET, the designer is a little different—you select the PictureBox control from the dropdown list at the top of the code window, and then select the appropriate events from the dropdown list at the top right of the code window.
  • Edit the MouseDown event handler code so it looks like the following:

private void pictureBox1_MouseDown( object sender, System.Windows.Forms.MouseEventArgs e) { ptOffset = new Point(-e.X - pictureBox1.Left, -e.Y - pictureBox1.Top); }

  • The preceding handler keeps track of the location where the user first depresses the mouse button. That becomes your point of reference when dragging. Note that ptOffset is set relative to the position of the picture box. The MouseEventArgs argument provides X and Y properties that give you the position of the mouse relative to the top left corner of the form—so you translate the mouse location by the PictureBox coordinates to get a point relative to the picture box.
  • Next you need to edit the MouseMove event handler so that it moves the form around when you drag the mouse, as shown below.

private void pictureBox1_MouseMove( object sender, System.Windows.Forms.MouseEventArgs e) { if( e.Button==MouseButtons.Left) { Point mousePos = Control.MousePosition; mousePos.Offset(ptOffset.X, ptOffset.Y); this.Location = mousePos; } }

  • The code first checks to see if the left mouse button is pressed, and if so, calculates the current position of the mouse relative to the one when the mouse was first pushed down (stored in ptOffset) using the Point class's Offset method. Doing that determines where the new location of the form should be. Finally, the code relocates the form to that position.
  • You can now drag the form around, by clicking anywhere in the PictureBox area (the drag "hotpoint") and then dragging. The PictureBox may look ugly now, but—it's a PictureBox; therefore, you can change the background picture to blend in with the background of the form. For example, you could use the same wooden background, but add some thumb lines and/or change the mouse cursor to indicate that it's a hotspot. Experiment, and have fun!
You can continue to add controls to the form, and color the controls so that they match the skin of the form appropriately. The download demonstrates some of this for you.

In this article you saw how to play with some of the features of .NET that support advanced UI features such as transparency. This is just the tip of the iceberg of some of the nice things that are now available in Visual Studio.NET and the .NET framework. You are no longer bound to boring grey rectangles in your UI if you don't want to be and if you don't want to invest thousands of man hours in overriding them.

Laurence Moroney is a freelance enterprise architect who specializes in designing and implementing service-oriented applications and environments using .NET, J2EE, or (preferably) both. He has authored books on .NET and Web services security, and more than 30 professional articles. A former Wall Street architect, and security analyst, he also dabbles in journalism, reporting for professional sports. You can find his blog at http://www.philotic.com/blog.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date