DevExpress Winforms Controls has built-in more than 140 UI controls and libraries, perfect to build smooth, beautiful and easy-to-use applications. DevExpress WinForm v20.1 is newly released, want to experience it? Click to download>>
When designing the interface, whether it is on the Web, Winform, or WPF or mobile interface applications, our organization and layout of the interface has always been a more interesting topic, and the quality of the organization interface depends on the user’s From the experience, it can provide the usability of the program, and also reflects the skill of the developer's development interface. A good interface layout can make our organization content more reasonable and more beautiful. This article mainly lists some small cases and experiences on the organization and layout of the interface when developing the Winform interface.
The organization and layout of the interface, this article is divided into three parts, one is the main interface organization layout, the list interface organization layout, and the new editing interface organization layout.
1. The main interface organization layout
The organization layout of the main interface is mainly the application of multi-form layout. Generally, you can consider using the multi-document container interface, which is also a conventional method; or you can consider the same panel to display different control contents based on changes in user controls.
For example, the early Winform uses the default Winform interface, and the layout uses the control "WeifenLuo.WinFormsUI.Docking" to carry the form interface content, as shown below.
The former is also mainly to use the multi-document method to process the interface display of different forms. As time goes by, the DevExpress interface suite is gradually introduced to make the interface. This interface control can achieve richer interface effects, and After the interface code generation tool (code generation tool Database2Sharp) generates the list and editing interface, it is more convenient to adjust. Therefore, the main Winform interface front end is processed in DevExpress way. Using DevExpress, you can use Ribbon forms, which can also be well supported. Multi-document interface, so the effect of the main interface is better.
These main interfaces later basically followed the same interface presentation method, using RibbonForm and tree lists to display content. The list interface part can be presented uniformly using paging controls to achieve a relatively uniform interface effect.
2. List interface organization layout
In the above content, we mainly introduced the organization of the main interface. Generally, the main interface is a multi-document interface, so the list interface will eventually be displayed on the main interface frame. Generally speaking, when we display regular content, it is divided into list content and detail display interface, that is, the list content paginates to display the record information in the database, and when we view the content of the detail interface, we display the detailed content of a single record.
For the display of list content, the general display effect is as follows, mainly showing the two-dimensional table information in the database.
Sometimes when the fields of the list query are not enough, we supplement this short board with the advanced query of the list, so that when the table has a large number of fields, we can perform advanced query operations on some uncommon fields.
But once the list content is relatively large, if we need to locate different filtering information, it is not so friendly if we only query through some query fields. Therefore, some tree lists may be introduced to distinguish different content.
Through the display of these lists, we can further refine the display of content, such as the content display of the permission system. By distinguishing the user’s organizational structure and roles, we can quickly locate system users, and we can also query through the query field. The combination is more convenient to use.
The content display of the dictionary module, through the tree list display of different dictionary categories, can make it more convenient for us to filter the dictionary information.
However, role managers abandon the traditional two-dimensional table way to display data, and better maintain the processing of role data through tree list controls, form information and tab information.
For the customer information list interface of the customer relationship management system, this interface displays the different attributes of the customer information in a tree list, which can make the positioning of customer information more precise and friendly.
And the unified management of some specific categories of data can be combined with the tree structure control display, which is more convenient and reasonable to handle.
In addition, in some cases, we need to consider displaying the master-detail table information on the list interface, then you can also use the DevExpress list control to achieve the effect, as shown below.
3. New and edit interface organization layout
In addition to the list interface, the other is the detailed display interface of the data. The content of this interface can be more diversified, such as carrying various controls, such as text, date, picture, drop-down list, tree list, and our custom Some controls, such as display controls for attachments through management.
Sometimes, the detailed content also involves some master-slave indicating detailed entry. The following is a case where the master-slave indicating detailed content is directly entered.
If there are many details, we can consider using tabs to maintain data, and manage different types of data through tabs. For example, the following basic customer information is a case.
The display of user information of the latter system is also based on the same concept
However, if you need to centrally display detailed information and integrate related record information, then one or two tabs are definitely not enough. For example, the display of basic personnel information in the following case will not only display basic information of oneself, but also associate some personnel The information is displayed together, so it needs to be divided into many tabs to accommodate this information, but too many will cause our interface to be crowded, so you can add a configuration button behind the tabs, so that users can easily maintain the tabs they are interested in content.
But if the content is still a lot, if we need to accurately separate the content of different parts, we can also consider the following scheme.
For example, for glioma patient data, our basic information is displayed like this. Although the content is quite large, it is still relatively reasonable.
However, if there is a lot of information pathology content, if it is displayed on a content page, it is definitely ugly, and it is not easy to maintain the data. The following is a bad case display.
A reasonable way is to introduce tabs or other distinguishing methods. I used a different method here, which is to realize the display and maintenance of the content of different areas in a tab by combining the tree list and user controls. It is also more convenient to enter data in different parts of the interface and locate.
The following is a more reasonable case of displaying the contents of patient data.
For a patient, different attributes correspond to different picture attachment information, we can uniformly manage them, as shown below.
The above is the analysis of several interface cases of the main interface interface, the list interface, and the detailed editing interface. When we develop, we usually use the code generation tool (my code generation tool Database2Sharp) to uniformly generate the standard list. Interface, and the editing interface for detailed display, and then make certain touches and modifications to it, such as adjusting the dictionary drop-down list type, adding some tree lists, adjusting the content of different tabs, adding attachment management controls, and adding some special Interface effects, only in some special cases, we need to completely rebuild the detailed interface display.
This article is reproduced from the blog garden-Wu Huacong
DevExpress Technical Exchange Group 2: 775869749 Welcome to join the group discussion