The system framework Interface Design of the dish-the interface layout determines the success or failure of the system design.

Address: http://www.cnblogs.com/aganqin/archive/2013/06/12/3132944.html

 

Problem:In system development, layout interface design is an important part. I used to develop MES at a party a company. I have seen a wide variety of system interfaces, including 100 people, there are nearly 100 styles, countless small systems are developed, and naming rules are messy. As a manager of IT projects, IT is a headache to manage the system and personnel, but IT is closely related to their system management.

Finally, during the system upgrade, the original systems are basically discarded. I would rather re-understand the requirements and re-invest in time development without looking at a method with nearly a thousand lines of code, no less than 50 nested if... Else... logic, the person who changes the program will scold the person who designs the program while changing it ~~~, I feel that it is far from the topic, or the system interface department is the topic.

Some of my improvement measures:

It is not dominated by fancy interfaces. The design principles are described in the traditional way first:

Manufacturing Systems generally require system operationsSimple, easy to use, and flexibleAt least horizontal menu, left navigation menu, Status Bar, and system content display area are required. Others think that this is rarely used.

The main controls used are::

MenuStrip, ToolStrip, StatusStrip, and ToolStripContainer are combined with an open-source layout control "WeifenLuo. WinFormsUI. Docking". These controls work together to design a relatively reasonable system framework.

Now I will take a geo-navigation system as an example to introduce some simple principles.

Design Steps:

1. Success ", such:

2. Introduce "WeifenLuo. WinFormsUI. Docking. dll" and add the DockPanel control to the toolbox. The control can be downloaded from many places on the Internet, such:

3. in the main form MainForm, add "ToolStripContainer" and set it to be filled with the entire main window Dock attribute to Fill. Drag a MenuStrip and a ToolStrip control at the top of the ToolStripContainer, and drag a StatusStrip at the bottom, set attributes as needed, such:

4. Add the DockPanel control to toolStripContainer1.ContentPanel In the content area of the ToolStripContainer control and set it to be filled with the entire area, for example:

Here, DockPanel requires some settings, because my main form is not Mdi, that is, IsMdiContainer = False, you need to set DocumentStyle = DockingWindow. If the main form is Mdi, you need to set it to DockingMdi, the following figure shows the settings:

5. inherit DockContent from all other forms, as shown in the following code:

Namespace GMapGuide {public partial class GMapForm: DockContent {// specific code logic }}}

Namespace GMapGuide {public partial class GuideBarForm: DockContent {// specific code logic }}

6. Make some settings for the forms that inherit DockContent:

• HideOnClose: True, which means that when the form is hidden, only the function of the form is hidden, and the form is not actually closed.
• DockAreas: "Float, DockLeft, DockRight, DockTop, DockBottom ".
• CloseButton: True

What do these attributes mean by name? No specific explanation is given.

For the left navigation bar (left navigation menu), you need to set ShowHint to DockLeft, as far as I do, and do not need to set other attributes. Click here.

7. In the last step, write the code in the main form MainForm, as shown below:

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.IO;using System.Linq;using System.Text;using System.Windows.Forms;using WeifenLuo.WinFormsUI.Docking;namespace GMapGuide{    public partial class MainForm : Form    {        private GuideBarForm gMapForm;        private GMapForm toolBarForm;        public MainForm()        {            InitializeComponent();            gMapForm = new GuideBarForm();            toolBarForm = new GMapForm(gMapForm);        }        private void MainForm_Load(object sender, EventArgs e)        {            gMapForm.Show(dockPanel1);            toolBarForm.Show(dockPanel1);        }    }}

 

Show off the results. Don't drop me eggs:

Bug: when the window is automatically hidden, it seems that the size is generally larger than the actual size, it does affect the appearance, and it is still shaking, strange feeling.

Solution:

He referred to Brother Hua's solution in the garden. He liked his technology, but he did not write the details clearly, it takes a few days for beginners to figure it out (this is my little dish ).

First look at the internal control mechanism:

[LocalizedCategory("Category_Docking")][LocalizedDescription("DockContent_AutoHidePortion_Description")

[DefaultValue(0.25)]public double AutoHidePortion{     get { return DockHandler.AutoHidePortion;    }     set { DockHandler.AutoHidePortion = value;    }}

1. First, set the AutoHidePortion of the form GuideBarForm to 0.17 ,:

The default size is 0.25. This parameter can be modified. Because the control provides a method to save the layout state, it is not saved by default. If you need to remember the adjusted window size, I can add a few pieces of code to solve it.

When the system is shut down, save the status settings with the following code:

private void MainForm_FormClosing(object sender, FormClosingEventArgs e){    dockPanel1.SaveAsXml(Path.Combine(Application.StartupPath, "CustomUI.xml"));}

Load the department code:

# Region loading layout private IDockContent GetContentFromPersistString (string persistString) {try {if (persistString = typeof (GuideBarForm ). toString () {if (gMapForm = null) {return new GuideBarForm ();} else {return gMapForm ;}} if (persistString = typeof (GMapForm ). toString () {if (toolBarForm = null) {return new GMapForm (gMapForm);} else {return toolBarForm ;}} catch (Exception ex) {Console. writeLine (persistString);} throw new Exception () ;}# endregion

Add the following code when loading the form:

Private void MainForm_Load (object sender, EventArgs e) {// load string uiFile = Path. combine (Application. startupPath, "CustomUI. xml "); if (File. exists (uiFile) {DeserializeDockContent ddContent = new DeserializeDockContent (GetContentFromPersistString); dockPanel1.LoadFromXml (uiFile, ddContent);} gMapForm. show (dockPanel1); // put it behind the loading settings

ToolBarForm. Show (dockPanel1);} // after the loading settings

Note: A lot of people cannot do this. It has something to do with this position. The display form must be behind The loading function; otherwise, an error is returned: "The DockPanel has already been initialized ."

The framework layout has been basically solved here.

Let's take a look at the following:

(1) Figure 1:

(2) Figure 2:

(3) Figure 3:

 

Summary:

This blog post mainly describes some basic system framework la s, mainly for the menu bar, left navigation menu, and WeifenLuo. WinFormsUI. Docking.

WeifenLuo. WinFormsUI. Docking is indeed a powerful layout tool, but it still has some defects:

(1) Hide and display the problem. The above solutions are available.

(2) I personally think that a skin-changing system will obviously be out of color if it is used. Therefore, it is only limited to the traditional Winform frame design. If it is used, it will still have a major operation. (I will explain the improvement measures later when talking about the skin change function. I don't know if I will infringe on it? If someone supports me, I will show it to you !).

In terms of the system framework layout, I am only talking about basic practices. There are still many details that need to be paid attention to. I have limited knowledge and I have to give some advice to supplement my knowledge.