Developing GUIs in C#

Modern software uses GUIs. GUIs allow users to perform their tasks effortlessly through user-friendly interactions. Microsoft developed the object-oriented programming language C# (pronounced C Sharp) as its preferred language for developing its products across various platforms.

The easy-to-use, contemporary, and versatile C# works in the context of the wide-ranging set of technologies offered by Microsoft’s platform. This platform is designed to support, among other features, cross-platform development. The simplicity of the C# syntax allows developers to use it for different programming tasks. Developers used to C, C++, or Java can easily transition to C# due to all of them being C-style languages with similar syntax basics, such as the use of curly braces.

C# is an object-oriented language supporting event-driven programming and has a rich library support that makes it appropriate for UI development. Let’s explore some of them:

• Rich library support: C# is part of the .NET platform. This platform contains an extensive range of libraries. These libraries include large quantities of pre-written code. This code is exposed in the form of classes and interfaces that can be accessed through pre-compiled public APIs. This pre-existing code allows developers to focus on developing their application’s distinctive functionalities instead of rewriting already-available solutions.
• Object-oriented programming: As an object-oriented programming language, C# includes classes, inheritance, and polymorphism. In C#, GUIs are represented as objects that contain and are near other objects and, in turn, allow users to invoke methods. This sequence of events enables developers to write modular code to handle the UI interactions and their effects.
• Event-driven programming: Events represent user actions, sensor inputs, or commands from other programs. Events enable the fluid execution of a program through the use of event-driven programming. This programming style simplifies the development of GUI-driven functionality because user actions trigger events that lead to the execution of the corresponding code. To fully appreciate the benefits of event-driven programming, it is helpful to understand the concepts of tight and loose coupling. Event-driven programming supports loose coupling, where components interact through well-defined interfaces, enhancing modularity, flexibility, and maintainability.

To use these features to start creating GUIs, we will need a tool that can facilitate the process. The tool of choice for C# development is Visual Studio. In the next section, we will install Visual Studio and develop our first GUIs.

Installing Visual Studio

The first step to be able to create the application is to install Visual Studio. Different options for this are available, including Visual Studio Code, Visual Studio Community, Visual Studio Professional, and Visual Studio Enterprise. In this book, we will use Visual Studio Code and Community as they are free and include the features we will explore. To download Visual Studio, navigate to https://visualstudio.microsoft.com/ and follow these steps:

1. Run the installer once the download is complete. The installation can be customized by picking specific workloads and components.
2. Select C# Workload. Be careful when choosing the C# development workload during the installation. Make sure that you select the following workloads:
   1. .NET Multi-platform App UI development
   2. .NET desktop development
3. Follow the prompts to complete the installation process. Once installed, click the Launch button to start.

Once in Visual Studio, we can explore its main components as they appear on the screen:

• Solution Explorer: Displays the structure of the solution and projects. Files, folders, and project dependencies can be navigated from here.

Figure 1.1 – Solution Explorer

• Editor: The main area where the actual coding is done. It provides code completion, syntax highlighting, and other helpful tools to boost productivity.

Figure 1.2 – Code editor

• Toolbox: Offers several elements, controls, and other features that may be dropped onto windows or forms.

Figure 1.3 – Toolbox

• Properties: Displays the properties of the currently selected item in the designer or code editor. You can use it to modify various properties of controls and components.

Figure 1.4 – Properties window

• Designer: Developers can drag and drop controls across a form or window to build the user experience graphically. Developers can flip through the code view and design view to see the code.

Figure 1.5 – Designer window

Now that Visual Studio is installed, we can create our first UI.

Using Visual Studio to create a GUI in C#

We can create the first project by following these instructions.

1. From the Start menu, select Create New Project.
2. From the All languages drop-down menu, select C#.
3. From All Platforms, select Windows.
4. From All Project Types, select Desktop.
5. From the list, choose Windows Form App (.NET).

   Note

   The .NET framework is now outdated and is only included here to show the foundations for the other technologies.

6. Enter Hello World for Project Name.
7. Click the Create button.

Visual Studio offers a smooth programming experience, which makes it the best option for C# GUI development. A blank Windows form is shown in Figure 1.6.

Figure 1.6 – Blank Windows form in Visual Studio

The next step is to add controls to the form. Those controls are added by dragging and dropping from Toolbox. Follow the steps below to complete the form.

1. Select View and then Toolbox. From here, start adding controls to the form. For this example, drag and drop a label, a text box, and a button so the form looks like Figure 1.7. These elements are under the Common Controls section of the Toolbox and can also be found using the search box in it.

Figure 1.7 – Form with a label, text box, and button

2. Once the elements are in place, you can use the Properties window to change their properties. Make the following changes:
   1. Label:
      • Text: Name
   2. Textbox:
      • (Name): txtName
   3. Button
      • Text: Greet
      • (Name): btnGreet

After making those changes, the form should look like this:

Figure 1.8 – Controls with updated properties

Note that each of the elements in the form, including the form, are objects in an object-oriented hierarchy where all of them inherit from a class named Control, and the label, textbox, and button are contained in the form.

As mentioned before, C# uses events to manage the interactions, so we need to access the code for the event that indicates that the button has been clicked on to add the code that produces the interaction. To do that, double-click on the Greet button. The code editor shown in Figure 1.9 will be displayed.

Figure 1.9 – Code editor window showing the button click method

Complete the code by showing a popup saying 'Hello' followed by the name inserted in the text box. The code should look as follows:

        private void btnGreet_Click(object sender, EventArgs e)
        {
            MessageBox.Show($"Hello {txtName.Text}");
        }

This code works as follows:

• private void btnGreet_Click(object sender, EventArgs e): This event handler method gets called when the btnGreet button is clicked. The private keyword means this method is only accessible within the same class. The void term means this method doesn’t return any value. The parameter’s sender object and EventArgs e represent the control that fired the event and the event data, respectively.
• MessageBox.Show($"Hello {txtName.Text}");: This line of code shows a message box with a greeting message. The MessageBox.Show() method displays a message box to the user. The message is "Hello" concatenated with the text from txtName. The txtName.Text part is the text property of a TextBox control named txtName, which contains the text entered by the user.

So, when the btnGreet button is clicked, a message box will appear saying “Hello” followed by whatever name the user has entered into the txtName text box. For example, if the user entered John into the txtName text box and then clicked the btnGreet button, a message box would appear saying “Hello John”.

This example, though simple, shows the main ideas behind designing a GUI in C#. Those steps include selecting the platform/technology to be used, creating the interactions by placing the UI elements in the desired locations, and programming the interactions by writing code to respond to user actions when interacting with the UI components.