Design and Development of the member Management System (3)-sharing the design ideas on the main interface

After a period of intensive development, the member management system finally completed and released the software. During this period, I encountered many technical difficulties and accumulated many development experiences and experiences. This article continues to introduce the technical points in this development process. This chapter mainly introduces the member management, share some design ideas on the list main interface.

Sometimes, it is always easy to follow some fixed routines to do things. If there are some innovations and improvements in each place, it usually takes a lot of time, but innovation is positive, although you may encounter difficulties, it is worth doing. In the winform interface design, although I can use the code generation tool to generate a relatively standard interface, I always like to refer to learning and improve some interface elements, therefore, I often spend some time studying some interface details, but it can be very pleasant after completion, and can also be used as a reference for subsequent projects.

1. Completed Member Management Interface

The member information management interface in this section is divided into the left and right sides. Some attributes and status categories of members are displayed on the left, and query conditions and list content are displayed on the right. Let's take a look at the view in the design status of its member information list interface, which is basically consistent with the running interface, but some content in the list is dynamically loaded at the runtime.

 

2. Interface Analysis and Design

We use this interface effect to push back how to achieve this effect, which may be more helpful and easy to understand.

1) Design of left/right splitting and folding Interfaces

The layout of the List interface is the left and right sides, and there is an arrow in it. Double-click the arrow attachment to fold the left side. So let's take a look at how this place is implemented.

First, you need to find the splitcontainercontrol control in the vs toolbox, put it in the entire form, and set its dock attribute to fill the entire form.

Then, set the entire control tree as follows.

Finally, we can see the left and right patterns and fold the first panel.

Add a Treeview control in the left-side pane, set its dock attribute, and add some Tree nodes at the design time to facilitate display and processing.

Through data binding of the background code, we can dynamically construct a tree list, and the data on the list interface can also be displayed on the right, in this way, we can get the main interface effect described above.

Sometimes, we may need to use the Panel split control to associate the records of the two tables in the master and slave tables for display.

The following interface shows a consumption information table, which includes both the total consumption information and the consumption details. However, when selecting the information of the left-side primary table, refresh the Details table on the right.

 

2) Implementation of the drop-down list button

Sometimes, placing too many buttons in the list interface will look messy. Sometimes the interface may be blocked or overlapped if it is scaled down, and the interface layout will be very bad, the devexpress control group provides a drop-down list button group control, which is convenient for saving screen controls and grouping buttons. For convenience, I put some Member-related operations together and put them together in a drop-down list button. The effect is as follows.

How can we achieve the above button effect?

The toolbar of the devexpress component contains a corresponding button control, as shown below.

However, if you drag it up, there is no corresponding property to set the button set in it. Instead, you need to use it with these three control objects.

Imagecollection is used to set the button icon. The other two need to be paired in this example. After adding the icon, barmanger adds the toolbar, menu bar, and status bar and deletes all the default items, then, set the manager attribute of popupmenu to barmanager1.

After completing these steps, set the pop-up button set and add corresponding event processing, as shown in the following design interface.

3) list display interface

The list display content mainly refers to the interface and background code automatically generated by the Code Generation Tool database2sharp. The page control is used for display. I will not repeat it again to see the interface effect as follows.

 

Design and Development of the member Management System (3)-sharing the design ideas on the main interface