We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can be easily solved by simply using a graphics creation tool such as Paint, Gimp, or Adobe Photoshop and the Transparency key tool found within the C# program.
To ensure you have the correct amount of space for all form objects needed and even room for adding features down the road, design of your new program becomes the key to a successful build. In keeping with that tradition of design we will need to first layout how we would like our form to look at the end of our project.
For this example we will be creating a mock MP3 Player. I have decided to make the form appear in the shape of a banner with the display information and buttons in the center. Here is how I would like my form to look when it is complete:
To ensure you have the correct amount of space for all form objects needed and even room for adding features down the road, design of your new program becomes the key to a successful build. In keeping with that tradition of design we will need to first layout how we would like our form to look at the end of our project.
For this example we will be creating a mock MP3 Player. I have decided to make the form appear in the shape of a banner with the display information and buttons in the center. Here is how I would like my form to look when it is complete:
As you can tell I am not an artist but for the purpose of this article let’s pretend it is the greatest design ever. You can do this step with nothing but a scratch piece of paper and pen just so you have a visual goal to work towards. Next we want to conceptualize a layout on the form to see if it meets your needs.
Once again, despite the artistry it appears to be in line with my concept.
The next step is where we turn idea into reality. From here going forward we will need to use an image creation program. I will use the basic MS PAINT program to create the form mask that we need. In your program of choice re-create the form that you want to see. It is best to put it in the middle of a slightly larger image. Remember to outline where your form items will be located.
Next we want to fill the surrounding area with a solid color. This color should usually be something obnoxious as it will be easier to locate later down the line. In this example I choose lime green. The white area where your objects will be placed should also be colored to your liking at this point.
This final mask image will show our form in the middle area and the surrounding green area as the mask. Save the image to your desktop or an equally accessible location.
Now we will move to the Visual Studio / C# portion of this process. Create a new Windows Application in Visual Studio and add a PictureBox to the form. Next you will want to select the image mask you just created.
Expand the image and form until it fits correctly. At the end your form should look similar to this example:
In the properties box we will be setting the FormBorderStyle property to “None” to eliminate the top blue title bar. This is where our first bit of code comes into play. Because of a lack of the title bar we need to move the form directly. To achieve this effect you will need to add the following:
[At the top]
[Above public Form1()]
Source: http://www.codeproject.com
You should now be able to move your form without a title bar.
The final step is setting the transparency key. Please note that you need to select Form1 for this and not the picturebox. From the properties box scroll down to TransparencyKey and set it to the same obnoxious color at your pictures background.
Add and code your objects, run the program and there you have it, a sweet looking form ready to impress your end users.
If you are unhappy with the layout just re-draw another form and try again. The possibilities are endless.