Implementing an MDI Form

The Multiple-Document Interface (MDI) is a specification that defines a user interface for applications that enable the user to work with more than one document at the same time under one parent form (window).

Visualize the working style of an application in which you are allowed to open multiple forms in one parent container window, and all the open forms will get listed under the Windows menu.  Whereas having an individual window for each instance of the same application is termed as single document interface (SDI); applications such as Notepad, Microsoft Paint, Calculator, and so on, are SDI applications. SDI applications get opened only in their own windows and can become difficult to manage, unlike when you have multiple documents or forms open inside one MDI interface.

Hence, MDI applications follow a parent form and child form relationship model. MDI applications allow you to open, organize, and work with multiple documents at the same time by opening them under the context of the MDI parent form; therefore, once opened, they can’t be dragged out of it like an individual form.

The parent (MDI) form organizes and arranges all the child forms or documents that are currently open. You might have seen such options in many Windows applications under a Windows menu, such as Cascade, Tile Vertical, and so on.

Try It: Creating an MDI Parent Form with a Menu Bar

In this exercise, you will create an MDI form in the WinApp project. You will also see how to create a menu bar for the parent form, that will allow you to navigate to all the child forms. To do so, follow these steps:

  1. Navigate to Solution Explorer, select the WinApp project, right-click, and select “Add” -> “Windows form”. Change the Name value from “Form1.cs” to “ParentForm.cs”, and click “Add”.
  2. Select the newly added ParentForm in the Design View. Select the ParentForm form by clicking the form’s title bar, navigate to the Properties window, and set the following properties:

    • Set the “IsMdiContainer” property to True (the default value is False). Notice that the background color of the form has changed to dark gray.
    • Set the Size property’s Width to 546 and Height to 411.

     

  3. Drag a MenuStrip control to the ParentForm. In the top-left corner, you should now see a drop-down showing the text “Type Here”. Enter the text “Open Forms” in the drop-down. This will be your main, top-level menu.
  4. Now under the Open Forms menu, add a submenu by entering the text “Win App”.
  5. Under the Win App submenu, enter “User Info”.
  6. Now click the top menu, “Open Forms”, and on the right side of it, type “Help”. Under the Help menu, enter “Exit”.
  7. Now, click the top menu, on the right side of Help, type “Windows”.
  8. Under the Windows menu, add the following options as separate submenus: Cascade, Tile Horizontal, Tile Vertical, and Arrange Icons. These will help in arranging the child forms.
  9. Now it’s time to attach code to the submenus you have added under the main menu Open Forms. First, you’ll add code for the submenu Win App, that basically will open the WinApp form. In the Design View, double-click the “Win App” submenu, that will take you to the Code View. Under the click event, add the following code:

    WinApp objWA = new WinApp();
    objWA.Show();

  10. Now to associate functionality with the User Info submenu: double-click this submenu, and under the click event add the following code:

    UserInfo objUI = new UserInfo();
    objUI.Show();

  11. To associate functionality with the Exit submenu located under the Help main menu, double-click “Exit”, and under the click event add the following code:

    Application.Exit();

  12. Now you have the form-opening code functionality in place, and you are nearly set to run the application. But first, you need to set the ParentForm as the start-up object. To do so, open Program.cs, and modify the “Application.Run(new UserInfo());” statement to the following:

    Application.Run(new ParentForm());

  13. Now build the solution, and run the application by pressing F5; the MDI application will open and should look as in Figure 1-1.

    MDIForm1.jpg

    Figure 1-1. Running an MDI form application

  14. Now if you click “Win App” and then “User Info” then both the forms will open one by one. These forms can be opened and dragged outside of the MDI form. This is not an expected behavior from a MDI application, as shown in Figure 1-2.

    This issue will be addressed later in this chapter.

    MDIForm2.jpg

    Figure 1-2. Running an MDI form application

How It Works

Each Windows Forms form is a class and exposes a Show() function by an instance created for it. You use the following code, that is creating an object and then invoking the Show() method. This opens the other form from the MDI parent form.

This creates an instance of the WinApp form and opens it for you:

WinApp objWA = new WinApp();
objWA.Show();

The following code creates an instance of the UserInfo form and opens it for you:

UserInfo objUI = new UserInfo();

Read Full Article Here

 

Understanding Windows Forms

 

Windows Forms, also known as WinForms, is one of the longest lived and oldest techniques for building Desktop applications. Windows Forms work as containers to host controls that allow you to present an application. Even though WPF has been available since 2007 and was delivered as part of .NET 3.0 and onwards, WinForms are still used heavily in Enterprise application development and remains a strong competitor for WPF. If your application doesn’t need heavy graphics, multimedia and/or a rich eye candy UI then Windows Forms is the best technology to build a Desktop client application.

 

User Interface Design Principles

 

The best mechanism for interacting with any application is often a user interface. Therefore, it becomes important to have an efficient design that is easy to use. When designing the user interface, your primary consideration should be the people who will use the application. They are your target audience, and knowing your target audience makes it easier for you to design a user interface that helps users learn and use your application. A poorly designed user interface, on the other hand, can lead to frustration and inefficiency if it causes the target audience to avoid or even discard your application.

 

Forms are the primary element of a Microsoft Windows application. As such, they provide the foundation for each level of user interaction. Various controls, menus, and so on, can be added to forms to supply specific functionality. In addition to being functional, your user interface should be attractive and inviting to the user.

 

Best Practices for User Interface Design

 

The user interface provides a mechanism for users to interact with your application. Therefore, an efficient design that is easy to use is of paramount importance. The following are some guidelines for designing user-friendly, elegant, and simple user interfaces.

 

Simplicity

 

Simplicity is an important aspect of a user interface. A visually “busy” or overly complex user interface makes it harder and more time-consuming to learn the application. A user interface should allow a user to quickly complete all interactions required by the program, but it should expose only the functionality needed at each stage of the application. When designing your user interface, you should keep program flow and execution in mind so that users of your application will find it easy to use. Controls that display related data should be grouped together on the form. ListBox, ComboBox, and CheckBox controls can be used to display data and allow users to choose from preset options.

 

The use of a tab order (the order by which users can cycle through controls on a form by pressing the Tab key) allows users to rapidly navigate fields.

 

Trying to reproduce a real-world object is a common mistake when designing user interfaces. For instance, if you want to create a form that takes the place of a paper form, it is natural to attempt to reproduce the paper form in the application. This approach might be appropriate for some applications, but for others, it might limit the application and provide no real user benefit, because reproducing a paper form can limit the functionality of your application. When designing an application, think about your unique situation and try to use the computer’s capabilities to enhance the user experience for your target audience.

 

Default values are another way to simplify your user interface. For example, if you expect 90 percent of the users of an application to select Washington in a State field, make Washington the default choice for that field.

 

Information from your target audience is paramount when designing a user interface. The best information to use when designing a user interface is input from the target audience. Tailor your interface to make frequent tasks easy to perform.

 

Position of Controls

 

The location of controls on your user interface should reflect their relative importance and frequency of use. For example, if you have a form for both the input of required information and of optional information then the controls for the required information are more important and should receive greater prominence. In Western cultures, user interfaces are typically designed to be read from left to right and from top to bottom. The most important or frequently used controls are most easily accessed at the top of a form. Controls that will be used after a user completes an action on a form, such as a Submit button, should follow the logical flow of information and be placed at the bottom of the form.

 

It is also necessary to consider the relatedness of information. Related information should be displayed in controls that are grouped together. For example, if you have a form that displays information about a customer, a purchase order, or an employee then you can group each set of controls on a Tab control that allows a user to easily move back and forth between displays.

 

Aesthetics is also an important consideration in the placement of controls. You should try to avoid forms that display more information than can be understood at a glance. Whenever possible, controls should be adequately spaced to create visual appeal and ease of accessibility.

 

Consistency

 

Your user interface should exhibit a consistent design across each form in your application. An inconsistent design can make your application seem disorganized or chaotic, hindering adoption by your target audience. Don’t ask users to adapt to new visual elements as they navigate from form to form.

Read Full Article Here