Introduction
This article introduces you to creating your own custom appearance user interfaces, witch you will find to be much more easy then you’ve ever expected. The code for this article is written in C#, and for it to work on your machine, you must have .NET Framework 1.1 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. The picture I’ve attached might not be pretty enough, but they’ll do the job just fine.
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. I’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).
Before adjusting the PictureBox, we must add the pictures. To do that, we select View -> 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 (the image I used is called “close normal.jpg” and it’s included in the graphics folder).
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 (I 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;
So far, so good. Let’s handle now the MouseMove action. Double-click the MouseMove action. We are now in the pictureBox1_MouseMove method. If the mouse is down, and the user wants to move the window, we would like that to move around. Add the following code:
if ( mouse_is_down )
{
Point current_pos = Control.MousePosition;
this.Location = current_pos;
}
The variable of type Point represents the current position of the mouse. Let’s run the application and see what’s happening.
As you can see, the window moves, but the mouse position is set to the upper left corner of the window. Why is that? By changing the mouse position, we also change the window position and the mouse coordinates are set to (0,0)(relative to the window) . This can be avoided by adding some extra code. All we have to do is remember the position of the mouse when the click was performed. We’ll need to declare another variable, of type Point, at the beginning of the class. I called it mouse_pos.
private Point mouse_pos;
In the pictureBox1_MouseDown method, add the following code to remember the mouse position when the click was performed:
mouse_pos.X = e.X; mouse_pos.Y = e.Y;
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;
}
We now added code to remember the mouse position. Run the application. In the end, for some fun, let’s add some improvements:
– in the pictureBox1_MouseDown method, add the following line:
pictureBox1.Image=new Bitmap("..\..\Images\up bar selected.jpg");
What this basically does is when you perform the click, changes the Image property of pictureBox1.
– in the PictureBox_MouseUp method, let’s change back the image:
pictureBox1.Image =new Bitmap("..\..\Images\up bar.jpg");
Note: the “..” indicates the current directory’s parent directory, “” indicates an escape sequence, and must be typed twice(“\”) to indicate the “” character. When you run your application, your current directory is “{path to application}binDebug”, and to access the Image folder, I have to “climb” two directories up. Let’s play some more. Set the form’s BackgroundImage property to the “face.jpg” image located in the Images folder. Also, set TransparencyKey to Gray(128,128,128) (You may need to set your color depth to 16 bits to see the effects. This is a bug from Microsoft.)
Here is the final application:
Well, here’s where this ends. Hope you had as much fun as me doing this.
I wish you good luck and happy programming!
Attachments:
Project Files: Custom_Window_Sample.zip
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: