A One-Stop Solution for Creating a C# GUI

The direct manipulation of graphical icons, such as buttons, scroll bars, windows, tabs, menus, cursors, and the mouse pointing device, is becoming the standard for user-centered design in software application programming. Graphical user interfaces (GUIs) allow users to operate computers and other electronic devices intuitively. Many current graphical user interfaces have a touchscreen and voice-command feature. "

This tutorial on C# GUI is focused on guiding you through the features of C# GUI. You will learn the implementation of C# GUI through the practical examples in this tutorial.

Here's How to Land a Top Software Developer Job

Full Stack Developer - MERN StackExplore Program
Here's How to Land a Top Software Developer Job

What Is a C# GUI?

The graphical user interface (GUI) is a user interface that allows users to interact with technology via the use of graphical icons rather than complex code. The graphical user interface was invented in the late 1970s by the Xerox Palo Alto research lab. 

GUI was initially offered commercially for Apple's Macintosh, and Microsoft's Windows operating systems. The model–view–controller software architecture decouples internal data representations from the display of data to the user.

Now, go ahead and get started with the project creation itself.

Project Creation for C# GUI in Visual Studio

You will use visual studio 2019 for this project. You will follow the following steps to create a project:

C#-GUI-Demo-img01

  • You must click on “Create a New Project.”

C#-GUI-Demo-img02

C#-GUI-Demo-img03

  • Then you must give this project a name like “GUIDemo”

Now, you will try different features of GUI.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

GUI Creation of Calculator in C#

  • You must change the window label from form1 to the “GUI Demo”. You can find this in the solution explorer tab.
  • Now, you will check out different features of the GUI one by one.

C#-GUI-Demo-img04

  • Start with a button. You can find it in the Toolbox. You can name it “Click Here”. Now, you must double-click on it to write up code to give it some functionality.

Code:

private void button1_Click(object sender, EventArgs e)

        {

            MessageBox.Show("Welcome To Simplilearn!!");

        }

C#-GUI-Demo-img04.

Now, when you click this button it gives a message box with an OK button. When you click the ok button it just closes this message box. 

Now, =add some more interactivity to it. You must use dialogResult and an enum “MessageBoxButtons.YesNo”

Code: 

private void button1_Click(object sender, EventArgs e)

        {

            DialogResult dr =  MessageBox.Show("Do you want to close this window?", "Confirm", MessageBoxButtons.YesNo, MessageBoxIcon.Question);

            if (dr == DialogResult.Yes)

                this.Close();

        }

C#-GUI-Demo-img05.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

Now, when you click the button, it gives us a ‘Yes No’ prompt. Where if you click yes then it will terminate the program and on no, it will just close the message box. 

C#-GUI-Demo-img07

Let’s use some labels and textboxes. 

  • You must name the first label as “User Name” and place a textbox in front of it.
  • Name another label as “Password” and place a textbox in front of it. 
  • Now, add a button and name it “Sign Up”.
  • You must now rename the “Click here” button to “Close”. 
  • By default, when you type anything in a textbox, it is in a readable format. 
  • But for passwords, you need some kind of visual protection. So you will toggle “UseSystemPasswordChar” from false to true. 
  • This will convert all character types in the password textbox from regular characters to bold dot symbols.

C#-GUI-Demo-img08

Now, use some radio buttons, you will take a label and name it “Gender” and name the radio buttons as “Male” and “Female”. 

C#-GUI-Demo-img09.

Now you must use a Checkbox, and you can name it “I Understand And I Accept the Terms and Conditions”.

C#-GUI-Demo-img10.

Now say you want the “Sign Up” button to be available only when the checkbox is checked. So you will now toggle the “Enabled” property of the “Sign Up” Button. Now, you must write code for the checkbox.

Code: 

private void checkBox1_CheckedChanged(object sender, EventArgs e)

        {

            button2.Enabled = checkBox1.Checked;

        }

C#-GUI-Demo-img11

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program
Learn the Ins & Outs of Software Development

As you can see now “Sign Up” button is only available when you check the checkbox.

Now suppose you have another set of radio buttons, let's say, payment method. Now, you need to separate the gender set and payment set. Otherwise, you won't be able to select different choices. So, you must use group containers to separate them. 

C#-GUI-Demo-img12.

Now, add a code for the “Sign Up” Button.

Code:

 private void button2_Click(object sender, EventArgs e)

        {

            MessageBox.Show("Account is Created");

            this.Close();

        }

And this was all for this tutorial on “C# GUI”.

Next Steps

"Calculator project using C#" can be your next concept to learn. A scientific calculator is a calculator that is designed to assist you in calculating problems in science, engineering, and mathematics. It has far more buttons than a standard calculator, which only allows you to perform the four basic arithmetic operations of addition, subtraction, multiplication, and division.

Looking to work in software development? You've come to the right place. There are plenty of opportunities here. Our Software Development Courses are taught by Caltech CTME and IIT-Kanpur. Data structures and algorithms are covered in depth in these sessions, from the basics to more complex ideas like Competitive Programming. As a software engineer, you'll become familiar with data structures such as trees, graphs, and queues. 

If you have any queries about this "C# GUI" tutorial, please drop them in the comment section below. Our 24/7 expert team will promptly respond to your queries.

About the Author

Vaibhav KhandelwalVaibhav Khandelwal

Vaibhav Khandelwal is a proactive tech geek who's always on the edge of learning new technologies. He is well versed in competitive programming and possesses sound knowledge of web development. He likes to read fictional and sci-fi novels and likes to play strategy games like chess

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.