This chapter requires access to Visual Studio Community (https://visualstudio.microsoft.com/downloads/) with the following workloads installed:

• ASP.NET and Web Development
• .NET Multi-platform App UI (MAUI) Development
• .NET desktop development
• Universal Windows Platform (UWP) Development

The code shown in the examples can be found here: https://github.com/PacktPublishing/GUI-Programming-with-C-Sharp/tree/main/Chapter%201

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.

As mentioned in the previous section, libraries play a key role in UI development. Many libraries have been used for this, and the libraries have evolved. Some older libraries include Windows Forms and Windows Presentation Foundation (WPF). In this book, we will not focus on those. Instead, we will expand on modern libraries, including Blazor, WebAssembly, .NET MAUI, and Windows UI Library 3 (WinUI 3).

Blazor

Microsoft offers a powerful frontend framework called Blazor. This framework can construct interactive client-side web GUIs. Blazor distinguishes itself from other frameworks because it allows developers to use C# and .NET to write the client-side part of the code without needing JavaScript. Developers familiar with C# and .NET can use their current skills and knowledge without the need to learn other GUI technologies. Blazor supports two hosting models: Blazor Server (SignalR-based) and Blazor WebAssembly (client-side in the browser). As a result, the learning period for developers new to web development is reduced, and the productivity of existing developers who are well versed in .NET and C# is increased.

Additionally, developers can make the most of the vast libraries offered by .NET, which boosts their productivity even more and increases the capabilities of their applications. Developers use the library SignalR, which allows them to streamline the process of adding real-time web functionality to their applications. Using this process, any changes happening on the server can be notified to the client using push notifications, which gives their applications the appearance of real-time responsiveness.

.NET MAUI

.NET MAUI allows developers to create mobile and desktop applications using C# and Extensible Application Markup Language (XAML).

.NET MAUI is an evolution of Xamarin.Forms and supports different operating systems, including Android, iOS, macOS, and Windows. The main advantage of using MAUI is that applications can be repackaged on any device, such as a smartphone, tablet, or desktop. As a result, developers no longer need to write platform-specific code for their applications, which helps them save precious time and resources. This also allows developers to concentrate all their effort on creating high-quality applications that could flawlessly work on all major platforms with the help of .NET MAUI.

WinUI 3

WinUI 3 builds modern native Windows applications. Although WinUI 3 is part of the Windows App SDK (formerly known as Project Reunion), it is shipped separately from the Windows operating system. As the next generation of the WinUI framework, WinUI 3 develops WinUI into a complete UX framework. Thus, WinUI is accessible as a UI layer for all desktop Windows apps. As it is separate from Windows SDKs, it can provide developers with a combined set of APIs and tools that they could utilize to develop production desktop apps. These apps were designed for Windows 10 and later versions and published in the Microsoft Store.

A vital feature of WinUI 3 is that developers can develop packaged and unpackaged C# and C++ WinUI 3 desktop apps with its help. The packaged applications include the package manifest and additional resources to let the developers turn the app into an MSIX package. Unpackaged applications, on the other hand, do not require a manifest or additional packaging, allowing developers to run and distribute their apps more flexibly without the constraints of the MSIX packaging process.

In this section, you’ll create the same Hello World form you created using a Windows form in Blazor and MAUI. We’ll implement it in WinUI 3 in a future chapter.

Blazor

To create the Hello World app in Blazor, create a new project in C# for Windows under the Cloud category and select Blazor Web App by following these steps:

1. Select Create New Project and mark the options shown in the following screenshot:

Figure 1.10 – New Blazor Web App project options

2. In the Project Configuration window, click Next.
3. Find the Home.razor page in Solution Explorer, as shown here:

Figure 1.11 – Blazor solution

4. Modify the code within the page so that it looks like the following:

   @page "/greet"
   <h3>Greet</h3>
   <input @bind="Name" placeholder="Enter your name" />
   <button @onclick="ShowGreeting">Greet</button>
   @if (!string.IsNullOrEmpty(Greeting))
   {
       <p>@Greeting</p>
   }
   @code {
       string Name { get; set; }
       string Greeting { get; set; }
       void ShowGreeting()
       {
           Greeting = $"Hello {Name}";
       }
   }
   

5. Run the project. The screen in Figure 1.12 should display. At this point, you may receive one or more popups related to SSL certificates. If this happens, accept the requests. The component can be accessed through the /greet URL.

Figure 1.12 – Final Blazor GUI

We will dedicate multiple chapters to Blazor. However, here is a short overview of the code:

• @page "/greet" sets the route for this component. In this context, a route defines the URL path ("/"greet") that maps to and displays the specified component when accessed by the user.
• The input element is data-bound to the Name property, updating the name whenever the user enters the field.
• The button element has an @onclick directive that calls the ShowGreeting method when the button is clicked.
• The ShowGreeting method sets the Greeting property to a string that includes the name entered by the user. This will in turn cause the string being displayed to update. This line will become important when debugging the code as it is the spot where the breakpoint can be set.
• The @if block renders the greeting message only if it’s not null or empty.

When running the application, you can navigate to this component by entering /greet in your browser’s address bar. When you enter a name and click the Greet button, you should see the greeting message appear below the button. This is similar to the functionality of the Windows Forms code, but it uses Blazor and WebAssembly.

MAUI

To create the same form in .NET MAUI, follow these steps:

1. Select Create New Project and select the following options:

Figure 1.13 – New MAUI project options

2. Find the MainPage.xaml and MainPage.xaml.cs files in Solution Explorer, as seen in Figure 1.14.

Figure 1.14 – MAUI solution

3. Modify the code in MainPage.xaml to look like the following code.

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class= "HelloWorldMAUI.MainPage">
       <StackLayout Margin="20">
           <Entry x:Name="NameEntry" Placeholder="Enter your name" />
           <Button Text="Greet" Clicked="OnGreetButtonClicked" />
           <Label x:Name="GreetingLabel" />
       </StackLayout>
   </ContentPage>
   

In this code, note the following:

• The Entry element is where the user can enter their name
• The Button element has a Clicked event that calls the OnGreetButtonClicked method when the button is clicked
• The Label element is where the greeting message will be displayed

4. Modify the MainPage.xaml.cs code to look like the following one:

   namespace HelloWorldMAUI
   {
       public partial class MainPage : ContentPage
       {
           public MainPage()
           {
               InitializeComponent();
           }
           void OnGreetButtonClicked(object sender, EventArgs e)
           {
               GreetingLabel.Text = $"Hello {NameEntry.Text}";
           }
       }
   }
   

5. Run the project. The form should look as shown in Figure 1.15:

Figure 1.15 – Final MAUI GUI

In this code, the OnGreetButtonClicked method sets the Text property of the GreetingLabel to a string that includes the text entered in NameEntry.

So, when you enter a name and click the Greet button, you should see the greeting message on the label. This is similar to the event-driven implementation of the Windows form example.

WinUI 3

Chapter 8 will discuss the steps needed to run a WinUI 3 project. For comparison, the code looks as follows:

<Page
    x:Class= "HelloWorld.GreetPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Margin="20">
        <TextBox x:Name="NameTextBox" PlaceholderText="Enter your name" />
        <Button Content="Greet" Click="OnGreetButtonClicked" />
        <TextBlock x:Name="GreetingTextBlock" />
    </StackPanel>
</Page>

In this code, note the following:

• The TextBox element is where the user can enter their name
• The Button element has a Click event that calls the OnGreetButtonClicked method when the button is clicked
• The TextBlock element is where the greeting message will be displayed

Next, you have to implement the OnGreetButtonClicked method in the GreetPage.xaml.cs code-behind file. Here’s what the code might look like:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
namespace YourNamespace
{
    public sealed partial class GreetPage : Page
    {
        public GreetPage()
        {
            this.InitializeComponent();
        }
        private void OnGreetButtonClicked(object sender, RoutedEventArgs e)
        {
            GreetingTextBlock.Text = $"Hello {NameTextBox.Text}";
        }
    }
}

In this code, the OnGreetButtonClicked method sets the Text property of GreetingTextBlock to a string that includes the text entered in NameTextBox.

So, when you enter a name and click the Greet button, you should see the greeting message appear in the text block. This is similar to the functionality of the Windows Forms, Blazor WebAssembly, and .NET MAUI code you provided, but in a WinUI 3 context.

In this chapter, we introduced the concept of GUI development using C#, a powerful and versatile programming language. We explored GUI development through various frameworks, namely, Windows Forms, Blazor, .NET MAUI, and WinUI 3. Each framework offers unique features and capabilities for creating robust and interactive UIs. Windows Forms, for instance, is a tried-and-true framework that has been used for many years to develop desktop applications. On the other hand, Razor is a newer framework designed for building dynamic web pages with C#. .NET MAUI and WinUI 3 are exciting frameworks that allow developers to create cross-platform applications with a single code base. You can write your application once and run it on multiple platforms, including Windows, macOS, iOS, and Android.

Throughout the chapter, we focused on practical implementation, demonstrating the creation of a simple Hello World application that illustrates key concepts in GUI development. By looking at the different implementations of this application across the four frameworks, we explored their similarities and differences. These comparisons will serve as the foundation for a deeper exploration of each framework and its functionality in future chapters.

The Blazor implementation is the one that deviates the most from a traditional C# implementation. MAUI and WinUI 3 are very similar and continue to evolve from their roots in Windows Forms.

In the next chapter, we will explore Blazor and WebAssembly in detail. These technologies are revolutionizing how we develop web applications, and we believe they hold exciting possibilities for the future of GUI development.