Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / Windows Forms

Design WinForms Controls using Photoshop

Rate me:
Please Sign up or sign in to vote.
4.91/5 (67 votes)
2 Nov 2019CPOL5 min read 73.2K   4.8K   91   26
Use your skills as a designer to create gorgeous control

Image 1

Introduction

As a software developer & freelancer, it's so important for me to release a good looking UI for clients. That's why I always follow the best methodologies to satisfy customers.

In this article, I will explain one of the best methods that I always use to make awesome user interfaces without counting only on GDI+ but also on your skills as a designer if you are one, so you won't be obliged to study GDI+ all time long.

Image 2

(Studio: A1-Pictures)

Tutorials Series

Background

Right, I am a software developer but I am a designer as well so I don't want my skills as a designer to go in vain while I am able to use them in many fields.

Why Windows Forms

There's no particular reason, once you learn how to use this methodology, you will be able to apply its steps on your project (WinForms, WPF...).

Why Photoshop

In fact, Adobe Photoshop is by far the best tool I've ever used to design logos, layouts or whatever and of course, if you are not familiar with it and you prefer another tool, then go ahead and use it. 

Still, I am aware that many people will say "I am not a designer, what should I do?", so...

How to Draw a Control in Photoshop

I've never thought that the day of me posting a tutorial about design here in CodeProject.com will come, but it can't be helped. However, we can't progress any further if you don't have numerous basics of design.

In here, I am going to show you how to draw your own button in Adobe Photoshop, it's as easy as drinking water (the example I'll show you is easy :D).

First of all, create a new document file that has the same properties as this:

Image 3

Once you create your new image file, select Rounded Rectangle tool (Rectangle tool -> *long press* -> Rounded Rectangle tool):

Image 4

Now go simply and draw it and make it fill the whole background: 

Image 5

Now through the window of properties, make it fill the whole layer. You can change the forecolor from that window too, to show the properties panel, go through (Window -> Properties).

Image 6

Secondly, having a rounded rectangle is not enough to make a beautiful user control (button), it's flat & rounded without external effects.

Let's add a style to our beloved frame: 

Image 7

(Add a layer style)

In fact, every person has his own special touch indeed so I won't recommend any style or order you to use any particular property, be free, mate.

Hmm, after adding my layer style, I ended up with this layout. :) 

Image 8

That's all of it when it comes to the design side!

Once you finish the article, you'll be able to make the layout you drew function like this:

Image 9

Let's continue. :)

How to Create a Dynamic Button

First of all, you need to create a component class which will be our main button:

Image 10

PsButton: PictureBox

After creating such a class, let's begin drawing it, how so?

All we need is drawing 3 frames that will appear one by one according to the mouse events.

Image 11MouseEnter

Image 12

Image 13MouseLeave | MouseUp (same frame)

Image 14

Image 15MouseDown

Image 16

And of course, you are able to customize your frames depending on your taste.

How To Draw 3 Different Frames

To create 3 different images that will change according to the events of the mouse, you can follow two procedures:

  1. Draw 3 layouts and set each layout to a specific event. You can do this step using your own techniques because there is no specific drawing method. 
  2. Draw only 1 layout, create 3 copies of it with different colors:

    Image 17

To change the colors using Adobe Photoshop, go through these steps:

  1. Context Menu
  2. Image
  3. Adjustments
  4. Hue/Saturation...

    Image 18

After creating the 3 images, add them to the resources and declare 3 objects as the following code shows to store them:

C#
private Image Button() => Properties.Resources.Button;               //Red-Brown button
private Image HoveredButton() => Properties.Resources.ButtonHov;     //Blue button
private Image ClickedButton() => Properties.Resources.ButtonClicked; //Black-Whie button

To make the color of the button changeable according to the events of the code, we need to make:

C#
public PsButton()
       {
           this.Size = new Size(this.Button().Size.Width, this.Button().Size.Height);
           this.Image = this.Button();
           this.SizeMode = PictureBoxSizeMode.StretchImage;
           this.MouseEnter += (sender, args) => this.Image = this.HoveredButton();
           this.MouseLeave += (sender, args) => this.Image = this.Button();
           this.MouseUp += (sender, args) => this.Image = this.Button();
           this.MouseDown += (sender, args) => this.Image = this.ClickedButton();
       }

Creating the layout of the button: DONE.

Actually, doing these steps will only give you a dynamic box that changes its colors once you click or move your mouse's cursor on it, hmmm then, what's left?

In fact, every common button must contain a text, here the role of the GDI+ comes! Using GDI+, we will print a specific text in the center of our beautiful button.

How To Print A Text in the Middle of the Button

To do such a thing, we need to change our language from English to the language of the universe and apply some maths.

The first step to take is to get the string and then to set it, after that, we have to measure it in the OnPaint method while overriding it:

C#
SizeF s = g.MeasureString("OK", Font); 

(simulation)

  1. Image 19

  2. Image 20

  3. Image 21

I suppose that the simulation is so clear, however, maths is more friendly:

"Image 22"

Code:

C#
private void OnPaint(object sender, PaintEventArgs e)
       {
           Graphics g = e.Graphics;
           var Dimensions = e.ClipRectangle;
           SizeF s = g.MeasureString(this.Text, Font);
         g.DrawString(
               this.TextBox.Text,
               this.Font, this.ForeColor,
               Dimensions.Width / 2 - (s.Width / 2),
               Dimensions.Y + 4
               );
    }

Applying this equation will print our string in the visual center of the button.

How to Create a Better Looking MessageBox

Is it a MessageBox control? It's not, indeed, what we are going to do is to imitate one.

In fact, the control is a Form that we set its FormBorderStyle to None, then we did set its background image depending on our needs.

The content & Title of the msg are two public labels:

C#
public System.Windows.Forms.Label Title;
public System.Windows.Forms.Label Content;

(keep in mind to set their locations wisely to make it look cute).

Now let's just inherit the beloved Show method: 

C#
public void Show(string Content, string Title)
       {
           this.Title.Text = Title;
           this.Content.Text = Content;
           this.Show();
       }

That's all of it, folks! ♥

How to Use the Code

I made a simple library that contains 3 user controls:

Image 23

PsButton

Image 24

Login Form

Image 25

PsMessageBox

Adding the PsButtons or the Login form is pretty easy, just drag & drop the controls.

If you are going to ask me why I didn't create properties(Image(s)) like  OnClickImage,HoveredImage...  and you are wondering if I will make those properties, then you better stop moaning about that because I won't, mate, for 2 reasons :

  • I am here to explain a method to create a better-looking control, not to share one.
  • No free hours for me, the school you know.

When it comes to the PsMessageBox, you won't notice a big difference between showing this msgBox or the standard one as the next code shows:

C#
PsMessageBox messageBox = new PsMessageBox();
messageBox.Show("Welcome back , king.","Connected");

Image 26

Sample

The sample I did include is a login form (the wallpaper is from Castlevania lords of shadows 2 video game -- Konami).

Image 27

Image 28

Issues

It counts a lot on resources.

History

  • 5/10/2016: First release
  • 6/23/2016: Added another tutorial

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Student
France France
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionVery well explained Pin
AchLog4-Nov-19 2:26
AchLog4-Nov-19 2:26 
PraiseGreat tutorial Pin
jespa00724-Jun-16 21:18
jespa00724-Jun-16 21:18 
GeneralRe: Great tutorial Pin
Alaa Ben Fatma29-Jun-16 2:32
professionalAlaa Ben Fatma29-Jun-16 2:32 
QuestionBad control implementation PinPopular
Robert Paveza24-Jun-16 16:00
Robert Paveza24-Jun-16 16:00 
AnswerRe: Bad control implementation Pin
Alaa Ben Fatma24-Jun-16 16:37
professionalAlaa Ben Fatma24-Jun-16 16:37 
Thank you for passing by and reading my article, Robert.
The methodology does not focus only on buttons, you might be right that I chose the wrong control to base my PsControl on, but in other cases the userconrol will behave in a good way after all.
Thank you so much for the information I will work on making it smoother !
AnswerRe: Bad control implementation Pin
kiquenet.com8-Nov-19 21:01
professionalkiquenet.com8-Nov-19 21:01 
QuestionHow to create a password text box with transparent background Pin
thelvaci24-Jun-16 9:53
thelvaci24-Jun-16 9:53 
AnswerRe: How to create a password text box with transparent background Pin
Alaa Ben Fatma24-Jun-16 14:14
professionalAlaa Ben Fatma24-Jun-16 14:14 
GeneralRe: How to create a password text box with transparent background Pin
thelvaci26-Jun-16 10:52
thelvaci26-Jun-16 10:52 
GeneralGood one. Pin
Sumuj John25-May-16 14:10
professionalSumuj John25-May-16 14:10 
GeneralRe: Good one. Pin
Alaa Ben Fatma25-May-16 22:53
professionalAlaa Ben Fatma25-May-16 22:53 
GeneralNice work Pin
Member 1252329624-May-16 4:28
professionalMember 1252329624-May-16 4:28 
GeneralRe: Nice work Pin
Alaa Ben Fatma24-May-16 4:58
professionalAlaa Ben Fatma24-May-16 4:58 
QuestionOther than Photoshop? Pin
DW196220-May-16 3:13
DW196220-May-16 3:13 
AnswerRe: Other than Photoshop? Pin
Alaa Ben Fatma20-May-16 4:08
professionalAlaa Ben Fatma20-May-16 4:08 
GeneralRe: Other than Photoshop? Pin
MikesRuthlessYa20-May-16 14:38
MikesRuthlessYa20-May-16 14:38 
GeneralRe: Other than Photoshop? Pin
Alaa Ben Fatma21-May-16 11:40
professionalAlaa Ben Fatma21-May-16 11:40 
SuggestionNice article, and suggestion on automating the HSB changes for various statuses Pin
wmjordan18-May-16 17:43
professionalwmjordan18-May-16 17:43 
GeneralRe: Nice article, and suggestion on automating the HSB changes for various statuses Pin
Alaa Ben Fatma19-May-16 3:17
professionalAlaa Ben Fatma19-May-16 3:17 
GeneralRe: Nice article, and suggestion on automating the HSB changes for various statuses Pin
Alaa Ben Fatma19-May-16 13:44
professionalAlaa Ben Fatma19-May-16 13:44 
GeneralGood. My vote of 5 Pin
aarif moh shaikh17-May-16 21:45
professionalaarif moh shaikh17-May-16 21:45 
GeneralRe: Good. My vote of 5 Pin
Alaa Ben Fatma18-May-16 1:56
professionalAlaa Ben Fatma18-May-16 1:56 
GeneralMy vote of 5 Pin
csharpukiller17-May-16 4:32
csharpukiller17-May-16 4:32 
GeneralRe: My vote of 5 Pin
Alaa Ben Fatma18-May-16 1:56
professionalAlaa Ben Fatma18-May-16 1:56 
SuggestionExcellent technique Pin
Dmitriy Gakh17-May-16 4:12
professionalDmitriy Gakh17-May-16 4:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.