User interface development based on Windows Forms class library

MINISTRY OF SCIENCE AND HIGHER EDUCATION OF THE RUSSIAN FEDERATION SOUTHERN FEDERAL UNIVERSITY








Mikhail E. Abramyan




USER INTERFACE DEVELOPMENT
BASED ON WINDOWS FORMS CLASS LIBRARY



Textbook for students of computer science and programming











Rostov-on-Don - Taganrog
Southern Federal University Press
2021

УДК 004.438.NET
ББК 32.973.202
А16
Published by decision of the Educational-Methodical Commission of the I. I. Vorovich Institute of Mathematics, Mechanics, and Computer Science of the Southern Federal University (minutes No. 5 dated April 12, 2021)

Reviewers:
doctor of Technical Sciences, Professor of the Department of Computer Science of the Rostov State Transport University, Professor M. A. Butakova;
candidate of Physical and Mathematical Sciences, Head of the Department of Computer Science and Computational Experiment of the I. I. Vorovich Institute of Mathematics, Mechanics, and Computer Science
of the Southern Federal University, Docent S. S. Mikhalkovich
Публикуется с разрешения издательства БХВ, являющегося владельцем прав на первое издание книги на русском языке:
Абрамян М.Э., Visual C# на примерах, 2008.
Published with the permission of the publishing house BHV, which is the copyright holder of the first edition of the book in Russian:
Абрамян М.Э., Visual C# на примерах, 2008.

        Abramyan, M. E.
А16 User interface development based on Windows Forms class library : textbook / M. E. Abramyan ; Southern Federal University. - Rostov-on-Don ; Taganrog : Southern Federal University Press, 2021. - 278 p.
      ISBN 978-5-9275-3830-0

    The tutorial focuses on developing a graphical user interface based on the Microsoft Windows Forms class library, which is a part of the .NET Framework since version 1.0. The tutorial is presented in the form of detailed descriptions of 23 projects that demonstrate various aspects of user interface development for Windows applications. Projects can be implemented in the Microsoft Visual Studio 2015-2019 IDE. Description of projects is accompanied by numerous comments. Typical errors that arise during the development of Windows applications are considered, ways to fix them are indicated. The final section contains 65 study assignments designed to consolidate the learning material.
    The textbook is intended for students specializing in science and engineering.
УДК 004.438.NET
ISBN 978-5-9275-3830-0                                      ББК 32.973.202
                                          © ООО “БХВ”, 2017
                                          © Southern Federal University, 2021

C

Preface ................................................................. 8
1.  Developing projects in Microsoft Visual Studio environment ......... 10
   1.1. Creating, saving, and opening a project ........................ 10
   1.2. Adding a new form to the project and placing a new control on the form ........................................................... 12
   1.3. Setting properties of forms and controls ....................... 16
   1.4. Defining event handlers......................................... 18
   1.5. Making changes to the program text ............................. 19
   1.6. Application launch...............................................20
2.  Console application: DISKINFO project .............................. 22
   2.1. Creating a console application ..................................22
   2.2. Receiving the information about current disk ....................24
   2.3. Using command line arguments ................................... 28
3. Exception handling: EXCEP  project....................................30
   3.1. Handling a specific exception and exception groups ............. 30
   3.2. Handling any exception...........................................34
   3.3. Re-throwing a handled exception..................................35
4. Events: EVENTS project................................................37
   4.1. Connecting an event to a handler ................................37
   4.2. Disconnecting a handler from an event............................41
   4.3. Connecting another handler to an event ......................... 43
5.  Forms: WINDOWS project..............................................46
   5.1. Setting the visual properties of forms. Opening forms in normal and modal mode .......................................................46
   5.2. Checking the state of the subordinate form.......................49
   5.3. Controls adapting to fit the window ............................ 51
   5.4. Modal and non-modal buttons of the dialog window ................52
   5.5. Setting the active form control .................................54
   5.6. Request for confirmation of closing the form ....................54
6.  Sharing event handlers and working with keyboard: CALC project ..... 57
   6.1. Event handler for multiple controls..............................57
   6.2. Calculations with control of the correctness of the input data . 58
   6.3. The simplest techniques to speed up work using keyboard .........60
   6.4. Using a keyboard event handler .................................61
   6.5. Control over changes to the input data..........................62

7.  Working with date and time: CLOCK project......................... 64
   7.1. Displaying the current time on the form ...................... 64
   7.2. Implementation of the stopwatch capabilities ................. 66
   7.3. Alternative options for executing commands using the mouse ... 70
7.4.  Displaying the current status of the clock and stopwatch on the taskbar..................................................... 71
8.  Text input: TEXTBOXES project .................................... 72
   8.1. Additional highlighting of the active text box ............... 72
   8.2. Changing the tab order of text boxes ......................... 74
   8.3. Blocking exit from an empty text box ......................... 76
   8.4. Informing the user about the error ........................... 77
   8.5. Providing additional information about the error ............. 78
   8.6. Form-level error checking..................................... 78
9.  Mouse event handling: MOUSE project............................... 80
   9.1. Dragging with the mouse. Setting the z-order of controls on a form.......................................................... 80
   9.2. Resizing with the mouse ...................................... 84
   9.3. Using additional cursors ..................................... 86
   9.4. Handling a situation with simultaneous pressing of several mouse buttons........................................... 87
   9.5. Dragging and resizing a control of any type. Using the find and replace tool ................................... 90
10.  Drag-and-drop: ZOO project ...................................... 93
   10.1. Dragging labels on a form.................................... 93
   10.2. Dragging labels to text boxes................................ 96
   10.3. Interaction oflabels......................................... 97
   10.4. Actions in case of dragging to invalid target ............... 99
   10.5. Additional coloring of source and target while dragging .... 100
   10.6. Customizing the cursor in drag-and-drop mode ............... 101
   10.7. Information about the current state of the program. Buttons with images............................................... 102
   10.8. Restoring the initial state ................................ 105
11.  Cursors and icons: CURSORS project ............................. 107
   11.1. Using standard cursors ..................................... 107
   11.2. Setting the cursor for a form and waiting mode indication .. 109
   11.3. Connecting new cursors to the project and saving them as embedded resources............................................. 111
   11.4. Working with icons.......................................... 112
   11.5. Placing an icon of application in the notification area .... 113
12.  Menus and processing of text files: TEXTEDIT1 project........... 116
   12.1. Menu creation .............................................. 116
   12.2. Saving text to a file ...................................... 119

12.3.  Clearing the editing area and opening an existing file ..... 121
  12.4.  Request to save changes .................................... 124
13.  Advanced menu options, color and font setting: TEXTEDIT2 project .......................................................... 126
  13.1.  Setting the font style (menu items as checkboxes) .......... 126
  13.2.  Setting text alignment (menu items as radio buttons) ....... 128
  13.3.  Setting the color of symbols and background color (third-level menu commands and the Color dialog box)................... 130
  13.4.  Setting font properties using the Font dialog box .......... 131
14.  Editing commands, context menus: TEXTEDIT3 project ............. 134
  14.1.  Editing commands ........................................... 134
  14.2.  Special visualization of unavailable editing commands. Working with the clipboard...................................... 136
  14.3.  Creating a context menu..................................... 138
15.  Toolbar: TEXTEDIT4 project.......................................140
  15.1.  Creation a toolbar and shortcut buttons. Adding images to menu items .................................................. 140
  15.2.  Using shortcut buttons that behave as checkboxes and radio buttons .............................................. 143
16.  Status bar and hints: TEXTEDIT5 project ........................ 147
  16.1.  Using the status bar ....................................... 147
  16.2.  Inaccessible shortcut buttons............................... 148
  16.3.  Hiding the toolbar and status bar........................... 149
  16.4.  Displaying hints on the status bar.......................... 149
17.  Formatting a document: TEXTEDIT6 project ....................... 152
  17.1.  Replacing the TextBox control with the RichTextBox control . 152
  17.2.  Correcting the state of shortcut buttons and menu commands when changing the current format................................ 155
  17.3.  Setting paragraph properties................................ 157
  17.4.  Display the current row and column ......................... 159
  17.5.  Loading and saving text without format settings ............ 161
18.  Colors: COLORS project ..........................................163
  18.1.  Defining a color as a combination of four color components. Track bars and scroll bars...................................... 163
  18.2. Inverting colors and output color constants ................. 167
  18.3. Grayscale colors ............................................ 168
  18.4. Displaying color names ...................................... 169
  18.5. Controls and their associated labels ........................ 171
  18.6. Anchoring controls .......................................... 172
19.  Drop-down list and list box: LISTBOXES project ................. 175
  19.1. Creating and using drop-down lists........................... 175
  19.2. List box: adding and removing items ......................... 177

19.3. Additional list operations................................... 179
   19.4. Performing list operations with the mouse ................... 182
20.  Checkboxes and checked list boxes: CHECKBOXES project............ 186
   20.1. Checkboxes and checking their state ......................... 186
   20.2. Global setting of CheckedListBox items ...................... 189
   20.3. Using checkboxes with three states .......................... 190
21.  Viewing images: IMGVIEW project.................................. 193
   21.1. Displaying a directory tree.................................. 193
   21.2. View images from image files in the selected directory....... 200
   21.3. Docking of controls and its features ........................ 206
   21.4. Setting the image view mode.................................. 208
   21.5. Saving information about the state of the program in the Windows registry............................................. 211
   21.6. Restoring information from the Windows registry.............. 213
22.  MDI application: JPEGVIEW project ............................... 216
   22.1. Opening and closing child forms in MDI application .......... 216
   22.2. Standard actions with child forms ........................... 220
   22.3. Adding a list of open child forms to the menu ............... 222
   22.4. Closing all child forms at the same time .................... 223
   22.5. Image scaling ............................................... 223
   22.6. Automatic resizing of child forms ........................... 224
   22.7. Additional control tools .................................... 225
   22.8. Scrolling the image using the keyboard....................... 228
23.  Splash screen application: TRIGFUNC project ..................... 231
   23.1. Creating a table of trigonometric function values ........... 231
   23.2. Displaying the splash window when loading the program........ 235
   23.3. Using the splash window as an information window ............ 237
   23.4. Displaying the progress of the program loading............... 238
   23.5. Early termination of the program............................. 240
   23.6. Dragging the splash window................................... 241
24.  Creating controls at runtime: HTOWERS project.................... 243
   24.1. Creating a start position ................................... 243
   24.2. Redrawing the tower when changing the number of blocks ...... 244
   24.3. Dragging blocks to a new location ........................... 245
   24.4. Restoring the start position and counting the number of block movings ................................................... 248
   24.5. Information about solving the problem ....................... 249
   24.6. Demo mode implementation..................................... 250
25.  Study assignments................................................ 253
   25.1. General requirements ........................................ 253
   25.2. CONSOLE project: console applications, file and directory processing....................................... 253

25.3. DIALOGS project: form interaction ............................256
   25.4. SYNC project: control synchronization ........................259
   25.5. DRAGDROP project: drag-and-drop mode..........................262
   25.6. TIMER project: timer-controlled programs .....................265
   25.7. REGISTRY project: dialog boxes and working with the Windows registry ...........................................269
   25.8. MDIFORMS project: MDI applications ...........................273
References.............................................................277

Preface




     This textbook focuses on developing a graphical user interface based on the Windows Forms class library. This library appeared in .NET Framework 1.0 (the Microsoft Visual Studio .NET 2003 IDE), was significantly improved in .NET Framework 2.0 (the Microsoft Visual Studio 2005 IDE) and after that practically did not change; nevertheless, it was included in all subsequent versions of Microsoft Visual Studio. Despite the presence of the newer Windows Presentation Foundation class library, which is related to the development of the graphical interface and provides more features, the Windows Forms library retains its position, due to greater ease of use and convenient visual design tools. At the same time, the capabilities of this library are quite enough for the development of fully functional Windows desktop applications of medium complexity. In addition, the Windows Forms library contains a number of important concepts related to GUI design. Therefore, studying it in a course on the basics of user interface development seems to be quite justified.
     The learning material of the book is presented in the form of descriptions of 23 examples, which are fully functional software projects. Each of the examples focuses on a specific topic indicated in its name, but much additional information is provided in the description of the project development process and accompanying comments. We focuse on best practices for developing event-driven applications and the efficient use of Windows Forms library components. The tools providing a convenient and reliable dialogue between the program and the user are discussed in detail. We also discuss common errors that occur when using the various Windows Forms library classes and show how to fix them.
     Most of the examples are slightly modified versions of the examples given in [1]. The exception is the IMGVIEW example, which has been changed more significantly by eliminating several obsolete controls (DriveListBox, DirListBox, and FileListBox) and using the TreeView control instead, which allows visualizing hierarchical lists of data.
     The book assumes an acquaintance with the basics of programming in the C# language at the level of knowledge of the system of basic types and control statements (see, for instance, [2]). The in-depth knowledge of the .NET object model is not required. Mostly C# 3.0 is used, which allows you to develop projects in the Visual Studio 2008 and higher. Among the innovations, only interpolated strings are used, which appeared in C# 6.0 (Visual Studio 2015); in earlier versions, you can use the string.Format function instead. The LINQ queries (implemented in C# 3.0) are used only in the projects LISTBOXES and IMGVIEW

(Chapters 19 and 21) and are commented in detail. Chapter 1 provides a detailed description of the Microsoft Visual Studio tools used to develop Windows applications.
     The last chapter of the book contains 65 study assignments divided into 7 groups related to the following topics:
     •   developing console applications,
     •   interaction between windows of an application,
     •   synchronizing controls and sharing event handlers,
     •   implementing the drag-and-drop mode,
     •   creating timer-driven programs,
     •   use of standard dialog boxes and the Windows registry,
     •   developing MDI applications.
     Most assignments contain references to sections of the book that describe the required controls and how to use them.

1.    Developing projects in Microsoft Visual Studio environment




     Currently, the most common version of Microsoft Visual Studio is version 2019, targeting the .NET 4.8 platform and the C# 8.0 language, although most of the features discussed are available for earlier versions. In particular, the Windows Forms library itself has remained unchanged since the release of .NET 3.5, C# 3.0, and Visual Studio 2008.


            1.1.  Creating, saving, and opening a project


     When you start Visual Studio, the Start Page is automatically loaded into it, which allows you to quickly load one of the previously developed projects (the Open recent list), open any other existing project (the Open a project or solution item), and also create a new project (the Create a new project item). All these actions are also available from the menu of the Visual Studio environment:
     •  File | New | Project... or Ctrl+Shift+N - create a new project;
     •  File | Open | Project/Solution... or Ctrl+Shift+O - open an existing project;
     •  File | Recent Projects and Solutions - open one of the recently developed projects.
     The Visual Studio environment is organized in such a way that you cannot create a “stand alone” project. Each project must be contained in a special entity called a solution, which can be described as a group of related projects. Only one solution can be loaded into the Visual Studio environment at a time; loading another solution leads to automatic closing of the previous solution.
     When creating a new project, a dialog box appears on the screen, in which first of all you need to select the language used (in our case, C# or Visual C#), and then the project template and its name. As a template for all considered projects (except for the first two projects DISKINFO and EXCEP), you should choose Windows Forms App (or Windows Forms Application). As to the name, it is recommended to use the name of the example given in the title of the corresponding chapter, for example, EVENTS (see Chapter 4). Note that the project name can contain not only digits and Latin letters, but also other characters allowed in file names, including spaces, although this feature is not recommended for use.
     In Visual Studio, when creating a new project, you must immediately specify the directory to save it (the Location text box). Project placement is also affected by information related to the solution in which the project will be placed,

such as the Place solution and project in the same directory checkbox. Note that previous versions of Visual Studio used a checkbox with the opposite meaning, Create directory for solution. If the solution includes a single project, then you should check the Place solution and project in the same directory checkbox (or uncheck the Create directory for solution checkbox); this will cause the created solution to have the same name as the created project, and all the files associated with the project and its solution will be placed in the same directory specified in the Location text box.
     If the Place solution and project in the same directory checkbox is unchecked (or the Create directory for solution checkbox is checked), you can specify a solution name that may be different from the project name. In this situation, a more complicated directory hierarchy is created: a solution directory will be created in the directory with the name specified in the Location text box and the project directory will be created in the solution directory.
     Note one more feature of the Visual Studio environment (which we, however, will not use): the created project can be added to the current solution.
     To save all changes made to the current project (or rather, to the current solution), Visual Studio provides the File | Save All menu command, as well as the Ctrl+Shift+S shortcut key.
     When you open an existing project, the Open dialog box appears on the screen, in which you can select either a file with the .sln extension (containing information about the solution with the specified name) or a file with the .csproj extension (containing information about the project with the specified name). However, even if you select some project, the entire solution project containing it will be loaded.
     Examples TEXTEDIT2 - TEXTEDIT6 suggest not creating a new project, but modifying an existing project. Before starting to develop such examples, you should copy all the solution files from the example with the previous number to a new directory, then load this resulting copy into Visual Studio and start modifying it.
     Let us describe the steps for modifying projects using the example of converting the TEXTEDIT1 project into the TEXTEDIT2 project.
     First, you should change the name of the project and the name of the associated solution. The simplest way to perform this is using the Solution Explorer window, usually located on the right side of the screen (Fig. 1.1 on the left shows this window for the TEXTEDIT1 project): just select the line corresponding to the project in the Solution Explorer window (in Fig. 1.1, this line is highlighted) or a solution (this line begins with the word Solution), press the F2 key, enter a new name and press Enter. The same action should be performed for the name of the solution. The Solution Explorer window after changing the name TEXTEDIT1 of the project and its solution to TEXTEDIT2 is shown in Fig. 1.1 on the right.

You should also change the assembly name, that is, the name of the resulting exe-file. To do this, run the Project | <Project name> Properties menu command (in our case, Project | TEXTEDIT2 Properties), go to the corresponding editor tab with the project name, select the Application section of this tab, and specify a new name in the Assembly name text box (Fig. 1.2). You can also change the default namespace name for this project (the Default namespace text box),

but this is not necessary.

Solution Explorer

References 0 m Forml.cs c“ Program.es

Search

      Solution Explorer (Ctrl+j) P ” Solution 'TEXTEDIT2' (1 project) E TEXTEDIT2

I

Ci 0¹ (§> ”

Fig. 1.1. Solution Explorer window before changing the project name (left) and after changing it (right)

Fig. 1.2. Top part of the project properties window


            1.2. Adding a new form to the project and placing a new control on the form


     When you create a new Windows Forms Application project, its main form (a class named Form1) is automatically created and immediately loaded into Visual Studio. A set of files is associated with Form1, the main of which are Form1.cs and Form1.Designer.cs. These files contain a description of this form in C#, and the second of them (Form1.Designer.cs) contains the part of the description that is generated automatically in response to various developer actions related to visual design (the developer’s own code is usually placed in the Form1.cs file).
     If you need to use additional forms in your project (see, for example, Chapter 5), then the easiest way to add them to the project is by using the Project | Add Form (Windows Forms)... menu command (in previous versions, the command was namedProject | Add Windows Form.).When this command is executed, a dialog box appears in which you must specify the name of the added form (which will also be the initial part of the names of the files contain

ing its description). The examples described always use the default form names (Form1, Form2, etc.).
       Any created form is displayed in the Visual Studio editor in design mode (an image of the form and its contents appears on the screen); the corresponding editor tab name ends with the text [Design]. For example, for the main form Form1, the tab name contains the text Form1.cs [Design]. To go to the contents of the corresponding cs-file, just press the F7 key; a new tab with the text of this file will appear in the editor (the name of this tab will contain the file name, for example, Form1.cs). To switch back from the program code to the form image, you can use the Shift+F7 key combination. You can also switch between the form image and the program code using the context menu: when you right-click on the image of the form, the first item of the pop-up menu is named View Code and allows you to go to the program code of the cs-file, and when the context menu for the program code of the cs-file is called, the View Designer menu item is available which allows you to return to design mode.
       Another convenient way to switch between different windows of the Visual Studio environment is to use the Ctrl+Tab key combination: after pressing it, an auxiliary window appears on the screen with a list of all loaded files and forms (Active Files), as well as all open auxiliary tool windows (Active Tool Windows). Fig. 1.3 shows an example of this window. After this window appears, you should, without releasing the Ctrl key, select the name of the file or tool window that you want to activate (you can use the arrow keys and the Tab key to select), and then release the Ctrl key.

                                     [T Forml.cs [Design]
                                     Visual C# Source file
                                     Active Tool Windows   Active Files
                                     >J1 Solution Explorer H Forml.cs
                                     ft Properties
                                     Й Toolbox             (eg TEXTEDIT2
                                     □ Command Window
                                        Output
                                     (5э Error List




                                                     D:\WinForms\TEXTEDIT2\Forml.cs


Fig. 1.3. Auxiliary window for selecting one of the loaded files or tool windows of the Visual Studio environment
     Any tab in the editor can be closed; to do this, just make it active and press the Ctrl+F4 key combination or call the context menu of a tab by right-clicking on its tab name and select Close.
     If the required form is not loaded in the editor after loading an existing project, it is enough to double-click the name of this form in the Solution Explorer window (see Fig. 1.1). Alternatively, you can right-click the name of this form and select Open from the context menu that appears. This menu also contains

the View Code item, which allows you to load the text of the cs-file into the editor, and the View Designer, which allows you to load the form image into the editor in design mode.
     To place a new control on the form, use the Toolbox window (this window can be displayed on the screen either by the View | Toolbox menu command or by the Ctrl+Alt+X key combination). This window is usually displayed on the left side of the screen; Fig. 1.4 contains a view of the upper part of the Toolbox window when the All Windows Forms group is selected in it. Note that controls appear in the Toolbox window only when the editor is in design mode. In this window, it is necessary to select the group containing the required control (by clicking on the name of this group), then click on the name of the required control to select it (in Fig. 1.4, the Button control is selected), and finally click in the position of the form where the selected control is supposed to be placed.
     In order to select a control in the Toolbox window, you do not need to know which group it is contained in, since this window contains the All Windows Forms group, which lists all available controls in alphabetical order (see Fig. 1.4).

Fig. 1.4. Top view of the Toolbox window

     If the Toolbox window covers the part of the form where you want to place the control, you can click on the image in the title bar of the Toolbox window; this will cause the Toolbox window to be positioned to the left of the form window, and the image will be changed to 4. Note that, in this mode, the Toolbox window will not automatically hide after placing the selected control on the form (to hide the Toolbox window, just click on the image ).
     To quickly place several controls of the same type on a form, you should, after selecting the required control in the Toolbox window, click the form several times while holding down the Ctrl key. If you need to deselect a control in the Toolbox window without placing it on the form, then it is enough to select the Pointer item in this window (it is located first in any group of controls - see Fig. 1.4).
     If you want to place a control not on a form, but in another control (for example, in a Panel control), then, when placing the control, you must click in the

area of the target control. Only special controls called container controls can be used as target controls (the form itself is a container control too). A container control (form, panel, etc.) that contains other controls is called the parent of the child controls it contains.
     When describing the stages of project development, we will always indicate in which container control each control should be placed.
     You can display a parent-child hierarchy of all controls located in a form. The corresponding window is displayed on the screen by the View | Other Windows | Document Outline menu command. Using the drag-and-drop of the controls in this window, you can also adjust their hierarchy. See Fig. 21.7 in Section 21.2 for an example of the Document Outline window.
     After adding a control to a form, it automatically gets a name, which is stored in its Name property. By default, the name of any control starts with a lowercase letter and consists of the control type name and an order number. Thus, the first button placed on the form (a control of type Button) will be named button1, the second button will be named button2, and so on. Forms have names that begin with an uppercase letter (Form1, Form2, etc.); this is due to the fact that these names are the names of new classes that are descendants of the base Form class. The default name can always be replaced with another name that allows, for example, to clarify the purpose of a particular control (for example, the button containing the text OK can be named as btnOK). However, the described projects almost always use the control names offered by the Visual Studio environment by default; this allows you to reduce the number of steps for setting control properties and simplifies reading program code. “Meaningful” names are used only for menu items, shortcut buttons, and sections of the status bar (see Chapters 12, 15, 16). It should be noted, however, that when developing large projects it is advisable to use meaningful names for all controls.
     When describing actions for adding a control to a form, it is almost never specified how to position a control on its parent control, since this can be easily determined from the given figure. Let us list the ways to position a control:
     •  dragging with the mouse over the form (while auxiliary alignment lines appear on the form allowing the control to snap to the boundaries of the form or place it at the level of the boundaries of existing controls);
     •  using the alignment panel Layout (see Section 18.1, Comment 1);
     •  move by one pixel using the arrow keys;
     •  explicit indication of the value of the Location property in the Properties window (working with the Properties window is discussed in detail in Section 1.3).
     The sizes of the visual controls are also usually not specified. To adjust the control size, you can drag with the mouse on one of the handles surrounding the selected control, or use the arrow keys while holding down the Shift key. You