上一节我们讲到迷你计算器的需求、抽象、建模，得到了

x □ y = ?

这样的一个数学模型。

接下来最重要的设计就是界面设计，也叫UI设计。UI是User Interface（用户界面）的简写。

界面设计分析

如果说建模的意义是搞清楚系统背后的运行逻辑，那界面设计的意义是要处理好系统与用户的交流。

稍微再进一步解释就是界面负责接收用户的输入，根据用户的指令，将经系统处理完成的结果呈现给用户。

按照这个思路，我们来分析下上面的模型：x □ y = ?

x □ y = 这4个都是输入项，其中：

x, y要求是数字，需要手动输入；□要求是加减乘除中的一种，需要选择输入；=是一个动作，作为输入完成的一个确认，需要命令输入；

?是输出项，数字或文字形式

如此分析下来，我们就大概清楚这个界面的要求了，接下来就可以付诸行动了。

什么是控件

先解释下什么是控件。按本意翻译，就是可以被控制的一个组件。这个组件，可以叫器件，或者叫东西，你能理解就好。控件大多指的都是一个界面元素，比如一个输入框，一个按钮、一个下拉框，或者在之前预备阶段的 案例导航 专栏中用到的菜单，都是控件。它专门是专门用来处理与用户交互的这样一类器件，就好比电子行业中的各种晶体管，想要什么功能就选什么样的器件。

具体到这个迷你计算器，我们根据上面的界面分析，需要用到4种控件：

手动输入的，对应的就是文本输入框；选择输入的，对应的就是下拉框；命令输入的，对应的就是按钮；文本输出的，对应的就是文本框；

当然，以上的选择并非唯一，比如选择输入我们也可以用单选框，命令输入我们也可以利用键盘事件。我这里只是为了初学者教学，选择了最普通的方式。

那么这些控件要到哪里去找？放到哪个界面？又如何加入到界面中呢？

创建迷你计算器窗体

所有的控件都不能独立存在，必须安放到一个容器中，这个容器就是我们之前提到过的Form，也就是窗体。所以创建控件之前，首先要创建一个窗体。

由于我们在之前的预备专栏中已经介绍了VS的基本操作，所以接下来我就直接上动图，直接讲以前没讲过的内容，这样能稍微快一点。

鼠标右键选择Level1项目，添加->窗体（Windows窗体），然后名称改成“MiniCalcForm”，点添加，稍候窗体创建完成后，顺手把窗口标题改成“迷你计算器”。

这样一个新的窗体就创建完成了。以后其他案例需要新建窗体，都是这样的操作。

创建控件

在之前预备阶段的 案例导航 专栏中，我们介绍过如何创建菜单，过程都大同小异。我就不从头开始讲了，直接上图。有不明白的同学可以回过头去翻翻以前的文章。

首先切换到工具箱界面，然后打开All Windows Forms栏目

找到TextBox，这个对应的是文本输入框。拖入到界面，可以用鼠标拖动的方式控制它的大小和位置，选中状态下，按上下左右方向键可以以像素级别移动；找到ComboBox，这个对应的是下拉框。拖入到界面，调整到合适位置。找到Button，这个对应的是按钮。拖入到界面，调整到合适位置。找到Label，这个对应的是文本框。拖入到界面，调整到合适位置。

每个控件的作用，或者哪个功能用哪种控件。这个需要记，没什么可以解释的，用的多了就熟悉了。

创建完成后，我们顺手把每个控件都重新命名一下，这样有助于我们以后快速的定位。

两个输入框，分别命名为tbxX、tbxY，下拉框命名为cbxFormula，按钮命名为btnEqual，文本框命名为lblResult。命名规则大体上为控件类型缩写在前，用途描述在后，关于命名规则，其实也有很多规范的，这里就不展开了。记住一个原则就是入乡随俗，如果原有团队有命名规范，你最好跟原有团队保持一致，当然你就自己做着玩，那随便，只要你能看明白就好。

最终我们看到的界面是这样的：

现在我们界面有了，那怎么跟菜单导航联系到一起呢？

调出界面

我们切换到解决方案视图，右键选中MainForm.cs文件，查看代码。

我们在之前预备阶段的 案例导航 专栏中写的代码

MessageBox.Show("你选择的是迷你计算器");

把它改成：

MiniCalcForm form = new MiniCalcForm();form.ShowDialog();

解释下含义：

第一行 MiniCalcForm form = new MiniCalcForm();

其实这个可以拆开分成两行写更容易理解：

MiniCalcForm form;

form = new MiniCalcForm();

MiniCalcForm form; 的意思是声明一个类型为MiniCalcForm的东西，名称为form。在C#语法中，一般每行以;作为结束符。

form = new MiniCalcForm(); 的意思是对form进行赋值，赋值内容就是创建一个新的MiniCalcForm对象。这里关于变量的声明和实例等，对新手来说可能需要更详细的解释才能明白，不过放在这里讲还不大合适。等以后讲类的时候，再重点讲，更容易理解。这里我们就先知道这么调用就可以。

第二行form.ShowDialog(); 意思是调用form的ShowDialog方法，也就是显示对话框。至于什么是方法，同样我们以后讲类的时候再来详细展开，这里如果不明白， 照抄就好。

然后我们运行一下程序，看看效果：

界面已经有了，下一步就是实现业务代码，我们下节见。