ItProjects For You

Creating Custom Windows

Introduction

This tutorial introduces you to creating your own custom appearance user interfaces,which you will find to be much more easy then you've ever expected.The code for this tutorial is written in C#, and for it to work on your machine,you must have .NET Framework installed.

Getting to work

Enough talking already,let's get to work.First of all,you will need some custom graphics.In the sample attached,you will find some jpegs,but you can make your own using any picture editor,from Paint to Photoshop.Now, using Visual Studio,let's create a new C# Windows Application. To do that, go to: File -> New -> Project -> Visual C# Projects -> Windows Application.Choose a name for your project,and press OK (you might also want to place your project in a different folder then the default one,so change the location of your project if you need to).If you've done this right,you are now in front of a plain window,with nothing on it.We must first create the design of the application, and then later we'll do the coding.From the main menu,choose View -> Properties Window (or just press F4).In the properties window,we have to change some of the default settings.First, we must set the FormBorderStyle property to None.We've also set the TopMost property to True,but that's not really necessary(by setting it to true,the application would stay on top of other windows,even if it doesn't have the focus).The next step is to add the title bar.To do that,select from the main menu View -> ToolBox (or press Ctrl+Alt+X).We need to add a PictureBox control,so find and drag it to the form's surface.We need to resize it and position it like it's done in the picture below:

Before adjusting the PictureBox,we must add the pictures.To do that,we selectView ->Solution Explorer(Ctrl+Alt+L),right-click the project name,choose Add ->New Folder.Name the folder Images or any other name you like.Now,right-click the folder we had just created,choose Add -> Add Existing Item…, browse to the pictures you want to use and select them,press OK and there are included in our project.The next thing we need to do is select the PictureBox and adjust its properties.We have to set the Image property to the image we want to use,that we previously added.One more property needs to be changed,the Dock property changed to Top.We now need to add another PictureBox,for the close button.Position the newly created PictureBox on the upper right corner of the form,and set its Image property to the image you want.We are done with the design part.Now let's get to the coding part.The first thing we need to do is put some code to have the ability to close the window.To do that,double-click the second PictureBox,and Visual Studio will create the following method:

private void pictureBox2_Click_1(object sender,System.EventArgs e)
{
}

So,we need to tell the form that when that picture box is clicked,it must close.We need to add the following code:

this.Close();

The application is ready to run for the first time.To run it,we must choose Debug -> Start Without Debugging (or simply press Ctrl+F5).For the final part of this tutorial,let's add functionality to the form by allowing the user to move it.To do that,we must handle events for the MouseDown,MouseMove and MouseUp actions.In the Designer View,select the first PictureBox, the bigger one, and go to the Properties window (or press F4),and click the lightning shaped button.In the Mouse section,double-click MouseDown property.Visual Studio has created for you a function to handle the MouseDown action on the PictureBox(NOT on the form):

private void pictureBox1_MouseDown
(object sender,System.Windows.Forms.MouseEventArgs e)
{
}

We'll need to declare a variable to see weather the mouse is pressed or not (We called it mouse_is_down,you can call it however you want).We must declare this variable,after the class definition,right under the declaration of the two PictureBox controls.Add the following code:

private bool mouse_is_down=false;

Now,go to pictureBox1_MouseDown method and add the following:

mouse_is_down=true;

We now know when the mouse is down.But if the user presses the mouse and then releases it,our mouse_is_down remains true.Let's fix that by adding another function that handles the MouseUp event.In the Mouse section,double-click MouseUp property,and add the following code:

mouse_is_down=false;

Let's go now to the pictureBox1_MouseMove method, and add:

if ( mouse_is_down )
{
   Point current_pos =
   Control.MousePosition;
   current_pos.X = current_pos.X -
   mouse_pos.X; //add this current_pos.Y =
   current_pos.Y - mouse_pos.Y; //add this
   this.Location = current_pos;
}

Download Sourcecode