How to Design graphic interfaces in Winform

How to Design graphic interfaces in Winform

In Winform, many control elements are standard, such as labels, buttons, and toolbar. Therefore, the standard Winform interface is relatively quick to design, but such interfaces are usually relatively monotonous, in particular, when there are few interface controls, we often need to add some pictures and backgrounds to set off. It looks like images and texts. This article mainly introduces, how to Use the features of various controls in Winfrom to design a Winform interface that is relatively beautiful and illustrated.

1. Interface Effect Analysis

In some scenarios, such as some invoicing systems, we usually put some related modules together, such information as purchase, return, stock transfer, recall, product, inventory, and inventory check is the content in a scenario. Sometimes they can be put together, however, if you just put a few buttons, it may seem monotonous. to enrich the interface effect, we will show the interface design effect as follows.

Although this interface is not very gorgeous, it is more beautiful than just a few standard buttons, and some arrows are set between buttons to indicate their process or affiliation, therefore, in some occasions, we prefer to use this intuitive and clear interface expression, while also increasing the aesthetic.

 

2. Interface Design Process

In the interface, the design process is not difficult, that is, first determine what needs to be drawn on the interface, place those buttons, and plan these, you can start to do interface work.

We can analyze the above interface, that is, place a background image on the Winform interface, and add the corresponding image or button at the appropriate position on the interface, let the corresponding icon handle the click event. It's easy, huh, huh.

1) Draw a background image

In order to achieve the best interface effect, but we can no longer draw on the Winform interface, we only have to go back to the next step, draw some good graphics on the drawing tool as the interface background, if you can use powerful and omnipotent Photoshop, you can also use Word, or you can use other drawing tools, it is a good cat to catch a mouse!

I like to use some drawing tools with ready-made elements, such as EDraw Max, to draw the background. We can set the position of the icon button in advance and draw a background as follows.

Draw these backgrounds and make them ready for use. Remember to reserve a certain position for the image and have a certain canvas size. We just want to set the image as the background in the normal way, in this way, when the window is enlarged, we will not directly view the image. For the captured image, reserve a certain position in the upper left corner.

2) add an image in the form background.

Set the BackgroundImage background image on the newly created form, as shown in.

The above effect is the effect of adding the image button. In the beginning, there is no image button, which is then added to the blank position, the icon button, generally for good-looking effect, the traditional Winform can adopt PictureBox. Based on DevExpress, you can use the LabelControl label control to process it and set its image to achieve good results.

The LabelControl settings are as follows.

You also need to set the ImageAlignToText attribute to TopCenter so that the icon can be properly centered.

The image above is 64 × 64. You can find some icons you like on the Website Based on the keyword. The following icons are used to search for websites.

Http://www.iconfinder.com/

Http://www.iconpng.com/

Http://www.iconlet.com/

Http://findicons.com/

Http://www.iconseeker.com/

Http://www.iconarchive.com/

We can always find some suitable and free icons for various file types. It is great to put them in a suitable scenario.

After the background and image buttons are set, we can process the Click Event of the image, and the corresponding form can be displayed. There are two pop-up forms, one is the mode dialog box, the following code is used.

        private void btnPurchase_Click(object sender, EventArgs e)        {            FrmPurchase dlg = new FrmPurchase();            dlg.ShowDialog();        }

The other is to open the multi-Document Interface and display it, as shown in the following code.

        private void btnStock_Click(object sender, EventArgs e)        {            ChildWinManagement.LoadMdiForm(Portal.gc.MainDialog, typeof(FrmStock));        }        private void btnProduct_Click(object sender, EventArgs e)        {            ChildWinManagement.LoadMdiForm(Portal.gc.MainDialog, typeof(FrmProduct));        }

Finally, we can get the overall interface experience as follows.

The above is a bit of thought in the design of the graphical interface, hope to help you design the interface.