HreoWinGauge2.0组件集应用示例----时钟(1)

 

HreoWinGauge2.0 试用版下载地址：http://download.csdn.net/source/6896899

 

（1）创建工程并添加GaugeContainer容器

       在VS2005中创建一个工程项目，并创建一个Windows窗体，命名为Clock。直接从工具箱的HeroWinGauge选项卡中选择GaugeContainer容器，并拖至程序界面中，此时程序中将自动创建一个GaugeContainer实例，并调整边框至合适大小。此时GaugeContainer中无任何东西，必须向其添加内容。     

用鼠标点击GaugeContainer对象右上角的三角形智能标记，弹出智能操作面板，点击“Task for selectded object”选项卡中的“Edit”选项，此时打开一个“Gauge Container Editor”对话框。对话框上部显示有此对象的类型（GaugeContainer）和名称（gaugeContainer1）。

 

 

（2）添加GaugeComponent组件

选择“Gauge Container Editor”对话框中的GaugeComponents属性，然后点击其右侧的属性值框内的“...”按钮，弹出一个“GaugeComponent Collection Editor”对话框（见图7.6-1）。此对话框可对GaugeComponents集合进行各种编辑。点击“Add”按钮添加一个GaugeComponent对象（名称为：GaugeComponent0）到对话框左侧的“Members”列举项中，并在对话框右侧的属性编辑器内显示该GaugeComponent对象的内部属性。

点击“BackFrame”属性左侧的“+”号，展开其内部属性。然后将BackFrame的内部属性更改为：“BackColor”设为“SeaShell”；“Brightness”设为“90”；“FrameColor”设为“BurlyWood”；“Shape”设为“Circle”；“Style”设为“Edge3D”；“Visible”设为“True”。

此时该GaugeComponent背景边框已基本构建完成（见图7.6-2）。从Clock窗体设计视图可即时观察到更改属性时的效果，此时可单击“OK”键退出“GaugeComponent Collection Editor”对话框。

 

 

图7.6-1“GaugeComponent Collection Editor”对话框1

 

 

图7.6-2  Clock窗体1

（3）添加刻度

直接点击对象GuageComponent0所在的区域（圆形区域），此时该对象将出现矩形选择框，然后点击右上角的三角形智能标记，弹出智能操作面板，点击“Task for selectded object”选项卡中的“Edit”选项，此时打开一个“Gauge Object Editor”对话框（见图7.6-3）。点击对话框中的的BottomLayerParts属性，然后点击其右侧的属性值框内的“...”按钮，弹出一个“GaugePart Collection Editor”对话框。点击“New Item Type”列表框的下拉按钮，并选择“CircularScale”项，然后点击“Add”按钮添加3个CircularScale对象到对话框左侧的“Members”列举项中，请注意添加的先后顺序。然后在对话框右侧的属性编辑器内修改各CircularScale对象的内部属性（见图7.6- 4）

 

 

图7.6-3“Gauge Object Editor”对话框1

 

 

图7.6-4“GaugePart Collection Editor”对话框1

a）第1个CircularScale对象的属性更改如下：

Name设为“SecondScale”；“StartValue”设为“0”；“EndValue”设为“60”；“MajorInterVal”设为“5”；“MinorInterVal”设为“1”；“Location”设为“50，50”；“Radius”设为“20”；“StartAngle”设为“-90”；“SweepAngle”设为“360”；“Visible”设为“True”。

点击“Bar”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Visible”设为“False”。

点击“MajorTickMark”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“Length”设为“1”；“Style”设为“Circle”；“Width”设为“1”；“Visible”设为“True”。

点击“MinorTickMark”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“Length”设为“0.5”；“Style”设为“Circle”；“Width”设为“0.5”；“Visible”设为“True”。

b）第2个CircularScale对象的属性更改如下：

Name设为“MinuteScale”；“StartValue”设为“0”；“EndValue”设为“60”；“MinorInterVal”设为“1”；“Location”设为“50，50”；“Radius”设为“36”；“StartAngle”设为“-90”；“SweepAngle”设为“360”；“Visible”设为“True”。

点击“Bar”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Visible”设为“False”。

点击“MajorTickMark”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Visible”设为“False”。

点击“MinorTickMark”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0.1”；“BorderColor”设为“Sienna”；“FillColor”设为“Peru”；“Length”设为“1.5”；“Style”设为“Circle”；“Width”设为“1.5”；“Visible”设为“True”。

c）第3个CircularScale对象的属性更改如下：

Name设为“HourScale”；“DistanceToLabel”设为“-2”；“StartValue”设为“0”；“EndValue”设为“12”；“MajorInterVal”设为“1”；“LabelInterVal”设为“1”；“LabelStartOffset”设为“1”；“LabelPlacement”设为“HorizontalInside”；“Location”设为“50，50”；“Radius”设为“36”；“StartAngle”设为“-90”；“SweepAngle”设为“360”；“Visible”设为“True”。

点击“Bar”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Visible”设为“False”。

点击“MajorTickMark”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0.1”；“BorderColor”设为“Sienna”；“FillColor”设为“Peru”；“Length”设为“4”；“Style”设为“Rhombus”；“Width”设为“2”；“Visible”设为“True”。

点击“MinorTickMark”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Visible”设为“False”。

点击“NumberalLabel”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Alignment”设为“MiddleCenter”；“Visible”设为“False”。

 

      最后可单击“OK”键退出“GaugePart Collection Editor”对话框。此时该Clock的时、分、秒刻度已基本构建完成（见图7.6-5）。从Clock窗体设计视图可即时观察到GaugeComponent0内已出现三个刻度，其中最内层为秒刻度，外层小圆点为分钟刻度，外层小菱形为小时刻度。

 

图7.6-5  Clock窗体2

（4）添加时间指针

直接点击对象GuageComponent0所在的区域（圆形区域），此时该对象将出现矩形选择框，然后点击右上角的三角形智能标记，弹出智能操作面板，点击“Task for selectded object”选项卡中的“Edit”选项，此时打开一个“Gauge Object Editor”对话框。点击对话框中的的MiddleLayerParts属性，然后点击其右侧的属性值框内的“...”按钮，弹出一个“GaugePart Collection Editor”对话框（见图7.6-3）。点击“New Item Type”列表框的下拉按钮，并选择“CircularPointer”项，然后点击“Add”按钮添加3个CircularPointer对象到对话框左侧的“Members”列举项中，请注意添加的先后顺序。然后在对话框右侧的属性编辑器内修改各CircularPointer对象的内部属性（见图7.6- 6）

 

图7.6- 6“GaugePart Collection Editor”对话框2

 

a）第1个CircularPointer对象的属性更改如下：

Name设为“HourPointer”；“ScaleName”设为“BottomLayerParts\HourScale”；“Value”设为“10.5”；“DistanceToScale”设为“10”；“Type”设为“Needle”；“ShadowOffset”设为“1”；“ShadowDensity”设为“30”。

点击“Cap”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“Visible”设为“False”。

点击“Needle”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“FillColor”设为“Gray”；“FillGradientEndColor”设为“Black”；“FillGradientType”设为“VerticalCenter”；“Style”设为“Triangle”；“Length”设为“25”；“Visible”设为“True”。

b）第2个CircularPointer对象的属性更改如下：

Name设为“MinutePointer”；“ScaleName”设为“BottomLayerParts\MinuteScale”；“Value”设为“11”；“DistanceToScale”设为“1”；“Type”设为“Needle”；“ShadowOffset”设为“1”；“ShadowDensity”设为“30”。

点击“Cap”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“FillColor”设为“Gray”；“Radius”设为“6”；“Style”设为“Concave4”；“Visible”设为“True”。

点击“Needle”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“FillColor”设为“Gray”；“FillGradientEndColor”设为“Black”；“FillGradientType”设为“VerticalCenter”；“Style”设为“Triangle”；“Length”设为“30”；“Visible”设为“True”。

c）第3个CircularPointer对象的属性更改如下：

Name设为“SecondPointer”；“ScaleName”设为“BottomLayerParts\SecondScale”；“Value”设为“0”；“DistanceToScale”设为“-16”；“Type”设为“Needle”；“ShadowOffset”设为“1”；“ShadowDensity”设为“30”。

点击“Cap”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“FillColor”设为“BurlyWood”；“Radius”设为“4”；“Reflection”设为“True”；“Style”设为“Convex2”；“Visible”设为“True”。

点击“Needle”属性左侧的“+”号，展开其内部属性。然后将其内部属性更改为：“BorderWidth”设为“0”；“FillColor”设为“Red”；“Style”设为“Rectangle”；“Length”设为“50”；“Width”设为“0.5”；“Visible”设为“True”。

 

      最后可单击“OK”键退出“GaugePart Collection Editor”对话框。此时该Clock的时、分、秒指针已基本构建完成（见图7.6-6）。从Clock窗体设计视图可即时观察到GaugeComponent0内已出现三个指针，其中最上层为秒指针，中层为分钟指针，底层为小时指针。

 

 

图7.6-6  Clock窗体3