DevExpress v20.2 full version download
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.2 is newly released. Want to experience it? Click to download>>
I have been engaged in Winform development for many years. Due to the needs of the project, I have designed various interface effects. Generally speaking, the use of traditional interface control elements and reasonable layout design can design a relatively regular standard interface; using some skinnable controls or some interface components, relatively good-looking interface effects can be designed, such as the popular ones before ActiveSkin, IrisSkin and DotNetSkin, etc., which can change the skin of traditional interface elements, are indeed much better than standard gray interface controls. However, with the development of interface control components, it is generally inclined to use relatively large control groups. In addition to providing well-designed interface controls, they also provide a variety of colorful interface styles to choose from, such as DotNetBar , netadvantage , DevExpress And other large interface control groups.
No matter how the interface design changes, the general basic principle is to provide customers with intuitive, easy-to-use, and better experience interface effects. From the development of Office, we can also see the overall interface effect trend, from the initial standard controls to The current Ribbon form, from monotone changes to colorful interface styles, provides us with a good interface design reference, and large interface components also imitate this trend. Closer to home, let's talk about something in detail. At present, I tend to adopt an interface based on the Ribbon style, and an interface design based on the traditional interface combined with the OutLook style.
1. Ribbon-based interface
The above interface style is a kind of interface layout that is more atmospheric and in line with the Office interface effect. By focusing different functional blocks on different panels, it is indeed simple and beautiful. This article will not repeat the advantages and disadvantages of the interface effect. We mainly focus on the following another interface effect.
2. Interface design based on OutLook style
In fact, the OutLook style has existed for a long time, and it can be seen in many public control groups. If you only pursue a part of the OutLook interface effect, rather than a holistic solution, then this open source Outlook component on CodeProject is probably one of them. The leader ( http://www.codeproject.com/Articles/43181/A-Serious-Outlook-Style-Navigation-Pane-Control ). However, because the requirements are for the overall effect, and more consistency and aesthetics of the control interface style should be considered, we still design such an OutLook interface effect based on the DevExpress interface group, which will look more beautiful and generous. The interface effect is as follows.
The above is to put many related function modules of a system on a tree for classification and display. For a more complex human resource management system or other complex function systems, it is also a more reasonable layout method. In addition, the OutLook toolbar is still available. Hide it to save the data display space of the multi-document interface on the right, so that the whole is more reasonable and beautiful. The layout on the right can also be divided into multiple modules by SplitContainer, and then the customer wants which data display panel is bigger, just drag it, so that it will not lead to a bad display layout when there are more data . Below we will introduce how to achieve the above interface layout effect.
1. Create a form based on the DevExpress.XtraEditors.XtraForm base class. As shown in the following code:
public partial class MainForm : DevExpress.XtraEditors.XtraForm
{
public MainForm()
{
InitializeComponent();
}
}
2. In the interface design, drag in the DevExpress toolbox Navigation & Layout to add a BarManager control to the form, delete the default toolbar Tools, and add some menu items and status bar data. As follows.
3. Add PanelControl and NavBarControl, add some test function buttons.
Since we need to use the MDI multi-document interface effect, first set the IsMdiContainer property of the Mainform to True.
Then add a PanelControl, set its Dock to Top layout, set a background image for the control ContentImage (designed with PS in advance, and save it in png format), add a few small labels, and set its image and text.
Finally drag in a NavBarControl control to the interface, set its Dock to the Left layout, enter the design interface through "Run Designer" on the right-click menu of the control, and first add some NavBarGroup and NavBarItem items. The rough settings get the interface effect as shown below.
Note that in NavBarcontrol, there is no Panel that can add some special controls, such as trees, buttons, etc., by default, only BarItem objects can be added to enter by default. In order to add such a control in a NavBarGroup, you need to modify the properties of the NavBarGroup, as shown below.
4. Add DockManager and XtraTabbedMdiManager controls to implement multi-document layout, which will eventually be displayed in Tab mode.
Continue to add the DockManager control and XTraTabbedMdiManager control to the above form. These two controls can be realized on the right side to show the multi-document layout in Tab mode, so that for user operations, multiple forms can be opened at once for operation, which is much more convenient , It will also be beautiful, is a common layout show. In order to display the close button at the top when the form is activated, and the others are not displayed, then you need to set ClosePageButtonShowMode=InActiveTabPageHeader of the XTraTabbedMdiManager control to achieve. The final Tab effect is shown below.
The above is the specific operation process of a system interface I designed. In fact, in many cases, the introduction is always fast, and the exploration is always slow. This is the efficiency improvement of knowledge accumulation. Of course, to design a system interface, in addition to considering the layout of the interface, the coordination of icons, and the overall framework, it must be able to adapt to the operation of these layout controls, and not be too bloated or difficult. read.
This article is reproduced from the blog garden-Wu Huacong
Go to DevExpress Chinese website to get first-hand latest product information!
DevExpress Technical Exchange Group 3: 700924826 Welcome to join the group discussion