WinForm"仿js星形评分效果"控件制作经验分享(原创) 之配餐系统的开发

前段时间在做配餐系统的新模块开发中，有个‘体质测试’的功能界面——其大致实现流程就是通过对用户做完所有体质测试题之后的结果，对其做出体质判断，原（未该进）的界面效果如下图：

9种体质共60多道测试题，如果以上面单选按钮的形式，让用户很有耐心的做完 ——将是一件很头疼的事，就是我自己测试用起来都感觉索然无味。换种答案选择形式就是必然的了，——从Vs自带的控件里找一个比上面效果更好的，想想就不大可能；想利用DotNetBar控件库里的 我想要的效果的星形评分控件，却发现它样式和效果都不够好，更重要的是，不能实现选择星后显示所对应的文字(可能是我对其使用方法，还不够了解)；最后抱着一丝希望，在网上搜索‘星形评分控件’,却几乎连一点儿可参考的资料都没有。 ——这样，无法找到或利用现有的控件，就只能自己做了，也想了想感觉这控件挺简单。动手去做，忙活了近半天，经过几番调试和改进，最后搞定。 效果还不错，使用星形评分控件后的界面效果，如下图：

此 星形评分控件 目前实现的功能或特点：1.此控件中的星的数量，可设置； 且可设置 星与星 并和 文字之间的间距。
2.此控件中的每个星对应的文本都可以设置，并可设置 星后的文本是否显示——以适应不同情况下的需求。
3.此控件中的每个星都有三种图片切换状态，默认(未选中)：灰色，选中：黄色，鼠标移上后：蓝色。
此 星形评分控件 主要实现思路： 根据设置星的数量，在（UserControl用户自定义控件）界面上添加相应个数的PictureBox，并对其设置图片等属性，和添加Click、MouseHover、MouseLeave三个鼠标操作事件。
关键代码如下：
///

/// 图片之间的 间距 ///

private int _spareWidth = 3; ///

/// 是否显示 文本提示 ///

private bool _isShowText = true; private Label _lblText = null; ///

/// 当前选择 星 对应的索引,默认为 -1 ///

private int _SelectedStarIndex = -1; private string[] _starTextArrary = null; public RatingStarControl(): this(3,null,0) { } public RatingStarControl(int spareWidth, string[] starTextArrary,int width) { if (width <= 0) { this.AutoSize = true; } else { this.Size = new System.Drawing.Size(width, 20); } this._spareWidth = spareWidth; this._starTextArrary = starTextArrary; InitializeComponent(); } ///

/// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容。 ///

private void InitializeComponent() { this.SuspendLayout(); int starItemCount = _starTextArrary == null ? 5 : _starTextArrary.Length; int startX = 0; int starWidth = 17; for (int i = 0; i < starItemCount; i++) { System.Windows.Forms.PictureBox pictureBoxObj = new System.Windows.Forms.PictureBox(); pictureBoxObj.Image = global::RatingStar.Properties.Resources.rating_off;//默认图片 pictureBoxObj.Location = new System.Drawing.Point(startX, 0); pictureBoxObj.Name = ""; pictureBoxObj.Size = new System.Drawing.Size(starWidth, 16); pictureBoxObj.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize; pictureBoxObj.Click += new EventHandler(pictureBoxObj_Click); pictureBoxObj.MouseHover += new EventHandler(pictureBoxObj_MouseHover); pictureBoxObj.MouseLeave += new EventHandler(pictureBoxObj_MouseLeave); pictureBoxObj.TabIndex = 0; pictureBoxObj.TabStop = false; this.Controls.Add(pictureBoxObj); startX = startX + _spareWidth + starWidth; } if (_isShowText) { _lblText = new Label(); _lblText.TextAlign = ContentAlignment.MiddleCenter; _lblText.AutoSize = true; startX += _spareWidth; _lblText.Location = new System.Drawing.Point(startX, 3); this.Controls.Add(_lblText); } // // RatingStarControl // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.BackColor = Color.White; this.Name = "RatingStarControl"; this.ResumeLayout(false); this.PerformLayout(); } void pictureBoxObj_MouseHover(object sender, EventArgs e) { System.Windows.Forms.PictureBox picObj = sender as System.Windows.Forms.PictureBox; int i = 0; foreach (Control var in this.Controls) { if (var is PictureBox) { PictureBox pic = var as PictureBox; pic.Image = global::RatingStar.Properties.Resources.rating_over; if (pic == picObj) { ShowSelectedStarText(i); break; } i++; } } } ///

/// 获得当前选择星 对应的 文本 ///

public string SelectedStarText { get { return this._lblText==null?string.Empty:this._lblText.Text; } }
使用方法很简单，如下：
RatingStar.RatingStarControl rat = new RatingStar.RatingStarControl(2, new string[] { "体现只", "ddaaa", "2222", "33", "达到", "dfdAA" }, 170); this.Controls.Add(rat);
此控件还需要做进一步的优化，并对增强其功能可扩展行，如可以设置三种状态下的图片等；此控件的实现方式或写法可能还不够好，希望各位能多提意见！

延伸阅读