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

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

   　　

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

     　　

  此 星形评分控件     目前实现的功能或特点：1.此控件中的星的数量，可设置； 且可设置 星与星 并和 文字之间的间距。

                                   　　　　　　　　 2.此控件中的每个星对应的文本都可以设置，并可设置 星后的文本是否显示——以适应不同情况下的需求。

　　　　　　　　　　　　　　　　　　　　　3.此控件中的每个星都有三种图片切换状态，默认(未选中)：灰色，选中：黄色，鼠标移上后：蓝色。

此 星形评分控件    主要实现思路： 根据设置星的数量，在（UserControl用户自定义控件）界面上添加相应个数的PictureBox，并对其设置图片等属性，和添加Click、MouseHover、MouseLeave三个鼠标操作事件。

关键代码如下：

  /// <summary>
        /// 图片之间的 间距
        /// </summary>
        private int _spareWidth = 3;
        /// <summary>
        /// 是否显示 文本提示
        /// </summary>
        private bool _isShowText = true;

        private Label _lblText = null;

        /// <summary>
        /// 当前选择 星 对应的索引,默认为 -1
        /// </summary>
        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();
        }


  /// <summary> 
        /// 设计器支持所需的方法 - 不要
        /// 使用代码编辑器修改此方法的内容。
        /// </summary>
        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++;
                }
            }
        }


    /// <summary>
        /// 获得当前选择星 对应的 文本
        /// </summary>
        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);

　    此控件还需要做进一步的优化，并对增强其功能可扩展行，如可以设置三种状态下的图片等；此控件的实现方式或写法可能还不够好，希望各位能多提意见！