GUI Programming: Designing a Simple Program

Graphical User Interface (GUI) Concepts

• GUI allows users to interact with a program visually
• GUI gives a program a distinctive "look" and "feel"
• GUI is built from GUI controls, which are objects that can display information on the screen or enable users to interact with an application
• GUI controls implement the IComponent interface

Windows Forms

• Windows Forms are used to create GUIs for programs
• A Form is a graphical element that appears on your computer's desktop
• A Form is a container for controls and components
• In visual programming, Visual Studio generates much of the GUI-related code
• When a control is dragged from the Toolbox onto the form, Visual Studio generates the code for us
• When a user interacts with a control, events are generated, and event handlers process those events
• Method InitializeComponent sets the properties of the controls added to the form

Designing a Simple Program

• Step 1: Create the GUI by dragging the components (a Button, a Label, and a TextBox) onto the form
• Step 2: Change the names of the components to meaningful names (e.g., textBox1 -> inputPasswordTextBox)
• Step 3: Change the autosize of the label from true to false
• Step 4: Set the Text property of the label to "Show Me" and clear the Text of the label and TextBox
• Step 5: Set the BorderStyle property of the label to Fixed3D to give it a three-dimensional appearance
• Step 6: Set the password character of the TextBox to the asterisk character (*)
• Step 7: Double-click on the Button to create the Click event
• Step 8: Add the following code to the body of the button method: displayPasswordLabel.Text = inputPasswordTextBox.Text;

Another Example: Add Program

• Step 1: Create the GUI by dragging the components (a Button, three Labels, and three TextBoxes) onto the form
• Step 2: Change the names of the components to meaningful names (e.g., textBox1 -> NumTextBox1)
• Step 3: Change the text properties of the labels and button as follows:
  • Label1 -> Number1:
  • Label2 -> Number2:
  • Label3 -> Sum:
  • Button1 -> Add
• Step 4: Double-click on the AddButton to create the Click event
• Step 5: Add the following code to the body of the AddButton method:

double num1, num2, sum;
string output = "";
num1 = double.Parse(NumTextBox1.Text);
num2 = double.Parse(NumTextBox2.Text);
sum = num1 + num2;
output += sum;
SumTextBox.Text = output;

Homework

• Please do all the operations.

Design and implement a simple graphical user interface (GUI) program using a Button, Label, and TextBox components. Set properties and adjust settings to achieve the desired functionality. Follow step-by-step instructions to complete the task.