Monday, February 12, 2007

Creating custom WinForms in .NET 2.0. Yes, Forms with more attractive shapes...

Have you ever wanted to create an application with a GUI that looked just like one of those skins in Windows Media Player 10 ? In .NET you don't have to write a single line of code to generate one such form. Earlier, creating a non-rectangular form was the toughest part which involved complex low-level coding by trapping various Form-handles and calling so many system API's.

I'll show you how to create a Form just like the one as shown in the figure.

Start by creating a transparent Bitmap image using MS Paint or other Image editors.

Add this image to the Form by setting its BackgroundImage property.

Set the BackgroundImageLayout to None.

Set the FormBorderStyle to None.

Set the TransparencyKey to White. This color will appear transparent on the Form.

Thats it, run your application to find a more attractive window. But hold on, its not over yet. This form has one serious limitation. You can't drag and move this form around because you've alread set the FormBorderStyle property to None and the borders & title bar are missing. The title bar functionalities need to be explicitly added to the code to handle all the basic functions like Close, Minimize, Maximize and Move.

Adding a Close Handler

Drag and drop a Button control from the ToolBox over the form. Resize and rename this as btnClose with its Text property 'X'. Set the control's BackColor property to the one that blends with your Form's color. Double click on it and add the following code to the Form's Close EventHandler.

private void btnClose_Click(object sender, EventArgs e)

{
    this.Close();         
}

Adding Drag/Move functionality

When the left-button of a mouse is clicked on the form, we first capture the thickness, in pixels, of the border for the window. We then create a point that is relative to the Form's Border and the mouse's current position. This Point becomes the new reference that is available globally.

private Point _OffsetPoint;

private void CustomForm_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)

{
    if (e.Button == MouseButtons.Left)
    {
        int formBorderWidth = SystemInformation.FrameBorderSize.Width;
        int formBorderHeight = SystemInformation.FrameBorderSize.Height;
        _OffsetPoint = new Point(-(e.X + formBorderWidth), -(e.Y + formBorderHeight));      
    }
}

The SystemInformation Class can be used to get information about the current system environment like Windows display element sizes, OS settings and other Hardware installed on the machine. The FrameBorderSize property gives the thickness of the border for the window.

When a window is dragged, the new position of the mouse determines the Form's new location. This is achieved by the Point Class' Offset Method. Setting the form's Location property with this new point will translate the form to this point.

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

This is just slice of what you can do with Visual Studio.NET and the .NET framework. Have fun with it !!

No comments: