Lecture 5th: Windows application interface beautification

2004.12.16 ou yanliang

Course Introduction

This article describes how to beautify the Graphical User Interface (GUI: Graphical User Interface) based on Windows Forms)

 

Basic Content

What is Windows form-based GUI?

VS. NET Usage

C # Or VB. NET

 

Course Content

User Experience

Performance Enhancement

Beautify the UI

Application Flow Control

"Look and feel" for Windows Applications"

 

User Experience

Long operation: Use progress bar)

Do not block interface (UI) threads; use multiple threads for long-time operations

Status bar)

After the operation starts, the user shall be able to cancel or terminate the operation for a long time through the interface operation

Enhance User Experience: allows you to control program running through the interface

Provide necessary program switches when appropriate

Verify the user input and use the validation control.

Use a user-friendly MessageBox. Be sure to use the appropriate buttons and icons in the prompt dialog box.

 

Progress bar)

For operations that take a long time, you must prompt the user about the progress of the current operation.

For long-time operations, do not block the main thread, that is, the UI thread.

You can use ThreadPool. QueueUserWorkItem () for asynchronous calls.

You can use the cancel/stop function.

Disable some menus and visually prompt users that some functions are disabled when running certain programs.

After the program ends, you need to use BeginInvoke and delegate to re-enable some prohibited menus and controls.

 

Status Bar

StatusBar is often placed under the form. We recommend that you use the dock

We can provide multiple panels in the status bar to provide different information.

Usually there is a panel to prompt the program running information, and some other Panel, such as display progress, time, etc.

Set the starting status information in the status bar before a long background program

After the background program ends, clear the status information or set the status information to the stopped status.

And display the necessary error information through the status bar during the background program running

 

Demonstration 1

Progress bar and status bar)

 

Use the wait pointer

If some operations must be blocked and it is difficult to calculate the progress of these operations, you need to use the wait pointer (wait cursor)

Visually notifies the user that some programs are being executed and may take some time.

Use try ...... Finally and reset the mouse pointer to the default state in finally

 

Demonstration 2

Set the mouse wait pointer

 

Disable appropriate controls

You can set the Enabled attribute to control whether the control is available. You can visually display the execution status of your application.

Disable appropriate menus

Disable the button on the dialog box before a long program starts.

After the program ends, enable some controls, prompting you to perform the next step, making it easier for you to understand the logic of application execution.

Use disabled controls to help users understand the workflow of applications through the UI

 

Demonstration 3

Disable/enable controls

The UpdateProgress method is the main form method, and EmulateLongProcess is a method called by a non-main thread. When EmulateLongProcess wants to call methods in the main thread, we need to make a judgment. InvokeRequired is a member of WindowsForm. When its value is true, it indicates that the current method is not called in the same thread. That is to say, the source of calling the UpdateProgress method is not the thread of the current form. The BeginInvoke method is used to pass the method call to the current thread. That is to say, let the thread where the current form is located re-Execute UpdateProgress.

This is necessary because when other threads want to update the interface elements, it is best to notify the interface thread of the form to update it. In this example, when the first entry to the UpdateProgress method is another thread, it will return immediately. Before return, it will let your cross-section thread call Updateprogress. That is to say, when you enter UpdateProgress for the second time, InvokeRequired will change to false, and the interface thread will execute the following code. In this way, when the progress bar goes, we can do other things on the main form, such as clicking Stop to Stop the progress bar.

 

Use appropriate controls

Use the TreeView control to display Hierarchical Data

Use ListView to display a group of data with multiple columns

You can use the DataGrid Control to change the data in each cell.

You can use TabControl to classify controls in the form according to the logic of use.

 

Splitters Docking and Anchoring

Use the Splitter control to separate user regions

Use the Fill option of the Dock property to enable the control to Fill part of the screen

When setting Anchor, you can ensure that the relative positions of controls in the form and the form do not change when the window size changes.

 

Demonstration 4

Controls

 

Common Dialog Controls

By using Common Dialog, you can perform standard operations on a familiar interface.

ColorDialog

FontDialog

OpenFileDialog

PageSetupDialog

PrintDialog

PrintPreviewDialog

SaveFileDialog

 

Demonstration 5

Common Dialog

More Control

The ImageList control is used to control the images used in the control.

ListView

TreeView

ToolBar

CheckedListBox

DateTimePicker

 

Demonstration 6

More Widgets

 

Array Performance

Array -- use ListBox. Items. AddRange () to enhance performance

Sort data items in the Array using Array. Sort

Implement the IComparer interface to customize the sorting method

 

Demonstration 7

Array

Loop Method

AddRange Mode

Sort

 

Wizard

The Wizard will bring you the standard "Look and feel"

Using the Wizard makes it easy for users to know how to use the application.

Then, we need to divide the user's operation process into several steps by logic

Reference resources

C: \ Program Files \ Microsoft Visual Studio. NET 2003 \ Common7 \ IDE \ Microsoft. VisualStudio. WizardFramework. dll

 

Demonstration 8

Production wizard

Complete example

RegionView

Code download

2010.10.5