WinForm界面开发教程——图文并茂的界面设计-控件新闻-慧都网

WinForm界面开发教程——图文并茂的界面设计

转帖|使用教程|编辑：龚雪|2021-05-14 10:05:58.360|阅读 926 次

概述：本文主要介绍如何在Winfrom里面利用各种控件的特点，设计一个相对比较美观、图文并茂的Winform界面。

一、界面效果分析

在一些场景里面，如一些进销存的系统里面，我们往往把一些相关的模块处理放在一起，如进货、退货、库存调入、调出、产品、库存、盘点等这些信息，就是一个场景里面的内容，有时候可以把它们放在一起，但是如果单纯的放几个按钮，可能会显得比较单调一些，我们为了丰富界面效果，把界面设计效果如下所示。

这个界面虽说不是特别华丽，但是也是比仅仅放几个标准的按钮来的美观一些，而且按钮之间也设置了一些箭头来指示他们的流程或者从属关系，因此在一些场合，我们更倾向使用这种直观、清晰的界面表达方式，同时也增加了一定的美感。

二、界面的设计过程

在上图的界面里面，设计过程也不麻烦，就是首先确定需要在界面上绘制什么，放置那些按钮，规划好这些后，就可以着手做界面的工作了。

我们分析下上面的界面，就是Winform界面上，放置一个背景图片，然后在界面适当的位置上添加对应的图片或者按钮即可，让对应的图标处理单击事件基本上就可以了。

1. 绘制背景图片

为了达到最佳的界面效果，但我们不能再Winform界面上绘画，就只有退而求其次，在绘图工具上绘制一些较好的图形作为界面背景了，如可以使用强大万能的Photoshop，也可以使用Word，或者也可以使用其他绘图工具，能抓到老鼠的就是好猫！

我这里喜欢利用一些有现成图元的绘图工具如EDraw Max等等这些来绘制背景，预先留出放置图标按钮的位置，我们绘制一个背景如下所示。

绘制好这些背景，截图出来待用，记住要图片要预留一定的位置，并且具有一定的画布大小，我们想图片按正常方式设为背景即可，这样我们在窗口放大的时候，不至于直接看完图片了，截取出来的图片，左上角预留一定的位置即可。

2. 设置窗体背景本增加图片

在我们预先新建的窗体上面，设置它的BackgroundImage背景图片，如下图所示。

上面效果是增加了图片按钮的效果，开始的话，是没有图片按钮的，这些是后来增加上去空白位置的，图标按钮，一般为了好看的效果，传统的Winform可以采用PictureBox，基于DevExpress的，则可以利用LabelControl标签控件的来处理，设置它的图片即可达到很好的效果的。

LabelControl几个设置如下所示。

还有需要设置ImageAlignToText的属性设置为TopCenter，这样图标才能很好的居中显示。

上面的图片是64×64的，一般可以在网站上根据关键字找一些自己喜欢的图标，下面几个图标搜索的网站如下所示。

//www.iconfinder.com/

//www.iconpng.com/

//www.iconlet.com/

//findicons.com/

//www.iconseeker.com/

//www.iconarchive.com/

从上面总能找到一些合适、免费的各种文件类型的图标，我们把它放到合适的场景上就非常棒的了。

背景及图片按钮设置好后，我们就可以处理它的单击事件，可以弹出对应的窗体了，有两种弹出窗体方式，一种是模式对话框，如下代码所示。

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

另一种是，打开放在多文档界面里面显示，如下代码所示。

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));
}

最后我们可以得到整体的界面体验效果如下所示。