第5章 Windows窗体项目界面设计.ppt

《第5章 Windows窗体项目界面设计.ppt》由会员分享，可在线阅读，更多相关《第5章 Windows窗体项目界面设计.ppt（73页珍藏版）》请在三一办公上搜索。

1、第5章 Windows窗体项目界面设计,【学习内容与要点】在应用程序设计中，界面设计是项目设计最基础的工作。重点掌握：命令按钮界面的建立菜单界面的建立工具栏界面设计状态栏的使用,5.1 命令按钮界面,命令按钮界面是常用的 VC+.NET项目界面之一。将Button控件添加在窗体上进行控件布局并设计其相应的事件驱动程序即可。,5.1.1命令按钮界面,命令按钮界面设计步骤如下：建立一个VC+的应用程序框架，如图5-1所示。,（2）和VB.NET操作一样，用鼠标拖动窗体Form1,设置其大小，如图5-2所示。,图5-2,（3）选择【视图】菜单的【工具箱】，弹出工具箱窗口，如图5-3所示。,（4）双击

2、工具箱中的Button按钮，将按钮加入到窗体，重复该操作可加入多个按钮，如图5-4所示。,（5）用鼠标拖动按钮,设置其位置,如图5-5所示。,（6）在控件的属性窗口设置控件的Text属性，如图5-6所示。,(7)双击窗体上的按钮，则显示标签为【Form1.h】的代码编辑窗口，如图5-7所示。,(8)在代码编辑窗口的事件过程内编写代码，如图5-8所示。,代码设计如下。private:System:Void button1_Click(System:Object sender,System:EventArgs e)Drawing:Pen myPen=gcnew Drawing:Pen(System

3、:Drawing:Color:Red);Graphics g;g=this-CreateGraphics();g-DrawLine(myPen,60,60,200,200);delete myPen;delete g;(9)单击“启动”，运行项目，在“输出”窗口内显示运行的过程。单击“直线图形”按钮，运行结果如图5-9所示。,【例5-1】彩色图像变换项目界面设计界面设计如图5-10所示。在窗体上放置两个PictureBox控件、一个OpenFileDialog控件和4个Button控件。在属性窗口使用PictureBox控件的Image属性给PictureBox1加载一幅图像进行实例化。使用B

4、utton的Text属性设置各控件的标题名。,5.1.2 单选钮界面设计,单选钮界面是C+.NET项目常用的界面之一。界面设计步骤如下：（1）建立一个单选钮界面的项目。（2）在“工具箱”中选择GroupBox 控件并将其放入窗体；（3）在“工具箱”中选择RadioButton控件并将其拖入GroupBox 控件内；（4）重复步骤2。这样，当移动GroupBox 控件时，单选钮将成组一起移动。（5）设置各控件的属性。【例5-2】设计一个图案设计项目界面。（1）在窗体上方放置一个图片框和两组选择按钮。设置控件的属性，如图5-11所示。,（2）编写事件过程，如图5-12所示。,代码例子如下（三阶函数

5、曲线）。private:System:Void radioButton6_CheckedChanged(System:Object sender,System:EventArgs e)Graphics g;g=this-pictureBox1-CreateGraphics();Pen pen=gcnew Pen(Color:Green);pen-Width=1.0F;Point p1=System:Drawing:Point();Point p2=System:Drawing:Point();int j,px,py,x;double a,x0,x1,y1,y;x=p1.X;y=p1.Y;x=p

6、2.X;y=p2.Y;x0=120;x1=180;y1=100;,a=y1/(x1*(x1-x0)*(x1+x0);for(j=-50;jDrawLine(pen,p1,p2);p1=p2;delete pen;delete g;,三阶函数曲线,5.2 菜单界面设计,菜单是项目的常用界面。VC+.NET使用 MenuStrip 控件可以轻松的创建 Microsoft Office 中那样的菜单。Visual Studio 2005版本的MenuStrip 控件是.NET Framework 中的新功能。,5.2.1 MenuStrip 控件概述,MenuStrip 控件支持多文档界面(MDI)

7、和菜单合并、工具提示和溢出。可以通过添加访问键、快捷键、选中标记、图像和分隔条，来增强菜单的可用性和可读性。MenuStrip 控件取代了 MainMenu 控件并向其中添加了功能；但是也可选择保留 MainMenu 控件以备向后兼容和将来使用。使用 MenuStrip 控件可以创建支持高级用户界面和布局功能的可自定义的常用菜单，例如文本和图像排序和对齐、拖放操作、MDI、溢出和访问菜单命令的其他模式。支持操作系统的典型外观和行为。对所有容器和包含的项进行事件的一致性处理，处理方式与其他控件的事件相同。表5-1为 MenuStrip 关联类。,1MenuStrip常用的属性MenuStrip常

8、用的属性如下（除P153的8个属性之外）MdiWindowListItem属性：设置用于显示 MDI 子窗体列表的 ToolStripMenuItem。ToolStripItem属性：MergeAction设置 MDI 应用程序中子菜单与父菜单合并的方式。ToolStripItem属性：MergeIndex设置 MDI 应用程序的菜单中合并项的位置。IsMdiContainer属性：设置一个值指示窗体是否为 MDI 子窗体的容器。ShowItemToolTips属性：设置一个值指示是否为 MenuStrip 显示工具提示。CanOverflow属性：设置一个值指示 MenuStrip 是否支持

9、溢出功能。ShortcutKeys属性：设置与 ToolStripMenuItem 关联的快捷键。,2MenuStrip常用方法MenuStrip常用方法 如下：CreateGraphics方法：为控件创建 Graphics。ResetText方法：将 Text 属性重置为其默认值。ResumeLayout方法：恢复正常的布局逻辑。Scale方法：缩放控件和任何子控件。ScrollControlIntoView方法：将指定的子控件滚动到支持自动滚动的控件的视图中。Show方法：显示控件。SuspendLayout方法：临时挂起控件的布局逻辑。Update方法：使控件重绘其工作区内的无效区域。表

10、5-4 列出了MenuStrip控件常用事件。,3MenuStrip控件常用事件MenuStrip控件常用事件有：Click事件：单击控件时发生。DoubleClick事件：在双击控件时发生。FontChanged事件：在 Font 属性值更改时发生。ForeColorChanged事件：当 ForeColor 属性的值更改时发生。MouseClick事件：在鼠标单击该控件时发生。MouseDoubleClick事件：当用鼠标双击控件时发生。MouseDown事件：当鼠标指针位于控件上并按下鼠标键时发生。Move事件：在移动控件时发生。,5.2.2 菜单界面的建立,菜单界面也是C+.NET项目

11、常用的界面之一，界面设计步骤如下：(1)建立一个菜单界面的项目，选择【视图】菜单的【工具箱】项，弹出工具箱窗口。如图5-14所示。,(2)选择MainMenu,双击之，如图5-15所示。,(3)单击“请在此处输入”，显示一个空白的输入框，如图5-16所示。,（4）在框内依次输入菜单名，例如“图形绘制”、“直线图形”、“曲线图形”,等，如图5-17所示。,（5）单击窗体，显示设计的菜单，如图5-18所示。,（6）单击“图形绘制”菜单，如图5-19所示，可以继续在其右侧增加新的主菜单。,（7）编辑事件过程代码。单击某菜单项或子菜单项，在代码窗口显示相应的事件过程，在事件过程内书写代码，如图5-20

12、所示。,（8）运行后如图5-21所示，显示菜单，选择菜单项，例如“直线图形”，结果图5-19 所示。,5.2.3 ContextMenuStrip 控件,使用ContextMenuStrip 控件可以建立快捷菜单（也称为上下文菜单），在用户单击鼠标右键时会出现在鼠标位置。快捷菜单在鼠标指针位置提供了工作区或控件的选项。ContextMenuStrip 控件旨在无缝地与新的 ToolStrip 和相关控件结合使用，但是也可以很容易地将 ContextMenuStrip 与其他控件关联。表5-2表示 ContextMenuStrip 的重要的伴随类。,1ContextMenuStrip控件主要属性

13、BackColor属性：设置背景色。BackgroundImage属性：设置在控件中显示的背景图像。BackgroundImageLayout属性：设置 ImageLayout 枚举中定义的背景图像布局。BindingContext属性：设置 ToolStrip 的绑定上下文。Font属性：设置 ToolStripDropDown 上显示的文本的字体。ForeColor属性：设置 ToolStrip 的前景色。ImageList属性：设置包含 ToolStrip 项上显示的图像的图像列表。Size属性：设置控件的高度和宽度。Visible属性：指示 ToolStripDropDown 是否可见

14、或隐藏。Width属性：设置控件的宽度。,2ContextMenuStrip控件主要方法Close方法：关闭 ToolStripDropDown 控件Dispose方法：释放占用的资源。DoDragDrop方法：开始拖放操作。DrawToBitmap方法：支持呈现到指定的位图。EndInvoke方法：检索由传递的 IAsyncResult 表示的异步操作的返回值。Update方法：使控件重绘其工作区内的无效区域。,3ContextMenuStrip控件主要事件Closed事件：关闭 ToolStripDropDown 时发生。DoubleClick事件：在双击控件时发生。MouseDown事件

15、：鼠标指针位于控件上并按下鼠标键时发生。MouseEnter事件：在鼠标指针进入控件时发生。MouseHover事件：在鼠标指针停放在控件上时发生。MouseLeave事件：在鼠标指针离开控件时发生。MouseMove事件：在鼠标指针移到控件上时发生。MouseUp事件：在鼠标指针在控件上并释放鼠标键时发生。MouseWheel事件：事件：在移动鼠标轮并且控件有焦点时发生。Move事件：在移动控件时发生。,【例5-2】右击窗体显示快捷菜单设计操作步骤如下。(1)从工具箱中将ContextMenuStrip 控件加入界面。如图5-22所示。,（2）设计快捷菜单项，如图5-23所示。,（3）在窗体

16、的属性窗口将ContextMenuStrip属性设置为ntextMenuStrip1。如图5-24所示。,（4）运行程序，右击窗体，如图5-25 所示，弹出快捷菜单。,图5-25,53 工具栏和状态栏,在Windows应用项目界面设计中，常使用工具栏和状态栏。在VS2005中，工具栏设计使用ToolStrip 控件和ToolStripButton 控件建立；状态栏则使用StatusStrip 控件。,5.3.1 工具栏,使用 ToolStrip 及其关联的类，可以创建具有 Microsoft Windows XP、Microsoft Office、Microsoft Internet Expl

17、orer 或自定义的外观和行为的工具栏及其他用户界面元素。使用 ToolStrip 控件可以创建易于自定义的常用工具栏。（1）ToolStrip 控件的常用属性AutoSize属性：设置是否自动调整控件的大小以完整显示其内容。BackColor属性：设置 ToolStrip 的背景色。BackgroundImage属性：设置背景图像。ClientSize属性：设置控件的工作区的高度和宽度。Enabled属性：设置控件是否有效。Font属性：设置显示文本的字体。ForeColor属性：设置 ToolStrip 的前景色。,Margin属性：设置控件之间的空间。Name属性：控件的名称。Size属

18、性：设置控件的高度和宽度。TabIndex属性：设置在控件的容器的控件的 Tab 键顺序。Text属性：设置标题名。Visible属性：指示是否显示该控件。Width属性：设置控件的宽度。（2）ToolStrip控件的常用方法DoDragDrop方法：开始拖放操作。DrawToBitmap方法：支持呈现到指定的位图。Hide方法：对用户隐藏控件。Refresh方法：强制控件使其工作区无效并立即重绘自己和任何子控件。SetBounds方法：设置控件的边界。Show方法：向用户显示控件。,2ToolStripButton 控件ToolStripButton 控件的常用属性如下。AutoSize属性

19、：是否自动调整项的大小。BackColor属性：设置项的背景色。DisplayStyle属性：设置是否在 ToolStripItem 上显示文本和图像。Enabled属性：设置一个值指示是否启用了 ToolStripItem 的父控件。Font属性：设置由该项显示的文本的字体。ForeColor属性：设置项的前景色。Height属性：设置 ToolStripItem 的高度Image属性：设置显示在 ToolStripItem 上的图像。Size属性：设置项的大小。Name属性：设置项的名称。Margin属性：设置项与相邻项之间的间距。Text属性：设置要显示在项上的文本。Width属性：设置

20、 ToolStripItem 的宽度。,3工具条界面设计设计一个工具条界面的步骤如下：（1）建立一个工程窗体界面。（2）将toolStrip控件从工具箱中加入到窗体，为窗体添加一个工具栏，如图5-26所示。,（3）右击工具栏左侧小图标的实心三角。弹出一个快捷菜单，如图5-27所示。,（4）选择快捷菜单的Button项，则在工具栏显示一个待编辑的命令按钮toolStripButton1，如图5-28所示。用同样的方法，可以在工具栏显示一系列待编辑的命令按钮toolStripButton2、toolStripButton2，.等。,（5）利用属性窗口编辑按钮。如图5-29所示，toolStripB

21、utton对象的属性窗口显示在窗体右侧。使用Text属性编辑按钮的标题名。例如toolStripButton1设置为“绘图”。,（6）用同样的步骤添加其他按钮。（7）书写按钮事件过程，如图5-30所示。,（8）运行后界面，如图5-31所示。选择工具条上的“绘图”按钮，结果如图5-32所示。,图5-31,图5-32,5.4.2 状态栏,1 StatusStrip 控件StatusStrip 控件可以显示正在 Form 上查看的对象的相关信息、对象的组件或与该对象在应用程序中的操作相关的上下文信息。通常，StatusStrip 控件由 ToolStripStatusLabel 对象组成，每个这样的

22、对象都可以显示文本、图标或同时显示这二者。StatusStrip 还可以包含 ToolStripDropDownButton、ToolStripSplitButton 和 ToolStripProgressBar 控件。StatusStrip 替换并扩展了早期版本的 StatusBar 控件，但是也可以选择保留 StatusBar 以备向后兼容和将来使用。“StatusStrip 项集合编辑器”用于添加、移除和重新排序 StatusStrip 的 ToolStripItem 控件，查看和设置 StatusStrip 及 ToolStripItem 属性。在设计器中右击 StatusStrip

23、控件并从快捷菜单中选择“编辑项”或在设计器中单击 StatusStrip 控件上的智能标记，并从“StatusStrip 任务”对话框中选择“编辑项”，显示“StatusStrip 项集合编辑器”。“StatusStrip 项集合编辑器”中按钮功能如下：,【添加】：单击该项以添加显示在下拉列表中的 ToolStripItem。可添加一个或多个下列控件：(1)ToolStripStatusLabel(2)ToolStripProgressBar(3)ToolStripDropDownButton(4)ToolStripSplitButton【成员】：显示 StatusStrip 及其包含的成员。

24、【属性】：显示 StatusStrip 或选定成员的要进行编辑的属性。【移除】：单击“X”按钮移除选定的 ToolStripItem。不能使用此按钮移除 StatusStrip 本身。【重新排序】：单击向上和向下箭头在“成员”列表中上移或下移选定的 ToolStripItem。顺序更改反映在设计器中的 Windows 窗体上。“StatusStrip 任务”对话框提供对典型命令和属性设置的便捷访问。单击设计器中 StatusStrip 控件上的智能标记即可显示“StatusStrip 任务”对话框。【嵌入在 ToolStripContainer 中】：单击该项将 StatusStrip 放置到

25、一个 ToolStripContainer 中，而不是直接放置到窗体上。,【RenderMode】：选择“System”、“Professional”或“ManagerRenderMode”作为该控件的 ToolStripRenderMode。【Dock】：提供用于指定控件的哪些边框绑定到其容器的选项。【编辑项】：显示 StatusStrip 项集合编辑器，可从该编辑器添加、移除和重新排序项，以及设置属性。2ToolStripStatusLabel控件ToolStripStatusLabel属性 如下。AutoSize属性：指示是否自动调整项的大小。BackColor属性：设置背景色。Bord

26、erStyle属性：设置边框样式。DisplayStyle属性：设置显示的文本和图像。Enabled属性：设置是否启用了 ToolStripItem 的父控件。Font属性：设置显示文本的字体。ForeColor属性：设置项的前景色。,Height属性：设置 ToolStripItem 的高度（以像素为单位）。Image属性：设置显示在 ToolStripItem 上的图像。Name属性：设置项的名称。Text属性：设置要显示在项上的文本。TextAlign属性：设置文本的对齐方式。TextImageRelation属性：设置文本和图像的相对位置。Visible属性：设置是否显示。Width属

27、性：设置 ToolStripItem 的宽度（以像素为单位）。在下面的例子中使用ToolStripStatusLabel控件，其常用方法如下。DoDragDrop方法：开始拖放操作。Invalidate方法：使控件的部分或所有图面无效并导致重绘控件。Select方法：选择项。,3状态栏设计【例】设计状态栏。要求：显示当前时间和鼠标在控件上的坐标。（1）在窗体上放置一个StatusStrip 控件和一个Timer控件，如图5-33所示。,（2）设置Timer控件属性，如图5-34所示。,(3)代码设计private:System:Void timer1_Tick(System:Object se

28、nder,System:EventArgs e)this-toolStripStatusLabel1-Text=DateTime:Now.ToLongTimeString();private:System:Void toolStripStatusLabel2_MouseMove(System:Object sender,System:Windows:Forms:MouseEventArgs e)this-toolStripStatusLabel5-Text=(+e-X+,+e-Y+);运行结果如图5-35所示，在窗体下部显示状态条。,运行结果,5.5 设计范例与练习题5.5.1设计范例,【1】

29、设计一个简单的Web浏览器界面1界面设计如图5-36所示,设计主菜单栏和工具条,在窗体上添加一个WebBrowser控件用于显示网页内容。,【2】乘法运算器设计图5-37是一个乘法运算器的界面。在窗体上放置了3个文本框、2个命令按钮和5个标签控件。,编写各个命令按钮的单击事件过程，则可实现乘法运算。程序设计如下：（1）计算private:System:Void button1_Click(System:Object sender,System:EventArgs e)int ss,ee,yy;ss=Convert:ToSingle(textBox1-Text);ee=Convert:ToSin

30、gle(textBox2-Text);yy=ss*ee;textBox3-Text=Convert:ToString(yy);（2）清除private:System:Void button2_Click(System:Object sender,System:EventArgs e)textBox1-Text=;textBox4-Text=;textBox4-Text=;,5.5.练习题,【】文本编辑器界面设计文本编辑器界面如图5-39所示。,设计要求：主菜单设计如图5-40所示 的那样设计各主菜单项。工具栏设计。如图5-40所示 的那样设计工具条的各命令钮。将RichTextBox控件加入窗

31、体。将打开、保存、字体、打印等控件加入界面。,【2】设计如图5-40所示的单选钮鼠标绘图项目界面设计,private:System:Void pictureBox1_MouseMove(System:Object sender,System:Windows:Forms:MouseEventArgs e)int flat;int x2,y2;Graphics g;g=this-pictureBox1-CreateGraphics();Pen p1=gcnew Pen(Color:Red);if(flat=1)x1=e-X;y1=e-Y;flat=0;else x2=e-X;y2=e-Y;g-Dr

32、awLine(p1,x1,y1,x2,y2);x1=x2;y1=y2;delete p1;delete g;,画矩形的参考代码如下。private:System:Void pictureBox1_MouseDown(System:Object sender,System:Windows:Forms:MouseEventArgs e)int x2,y2;Graphics g;g=this-pictureBox1-CreateGraphics();Pen p1=gcnew Pen(Color:Red);if(flat=1)x1=e-X;y1=e-Y;flat=0;else x2=e-X;y2=e-Y;g-DrawRectangle(p1,x1,y1,(int)Math:Abs(x1-x2),(int)Math:Abs(y1-y2);x1=x2;y1=y2;flat=1;delete p1;delete g;,