StarRating Control

• Download demo project (VS2005) - 8.1 Kb
• Download demo project - 19.5 Kb

Introduction

The StarRating control provides you with the possibility to show a rating in a graphical way. It's doesn't do a lot but I haven't found something similiar so I decided to publish it. There is also not much to explain but someone may still like it.

I'm using this control in a sales opportunity application where it's now easier to see which acquisition we have to prioritise.

Features

• Selecting the images that will be displayed
• Setting the maximum
• Changing the value

Public properties

Using the code

Everything is written be using the Express edition of Visual Studio 2005. Currently there is not project file available for older version as I don't have access to it. Backporting shoulnd't be a big problem as there are only two files needed (StarRating.cs and StarRating.Designer.cs).

Paint method

All drawing functions are in the Paint method. A simple loop to the maximum number checks whether the empty or the checked image has to be drawn. Make sure not to create an extra Graphics instance be calling this.CreateGraphics(). The Paint method provides you with a reference to a Graphics object.

// make sure we don't get an exception in case the images
// haven't been set
if (imageChecked == null || imageEmpty == null) return;
            
for (int i = 0; i < maxStars; i++)
{
   Point newPoint = new Point(imageChecked.Width * i, 0);

   // take care of tempStars! If it's not equal to -1 it means
   // the user is selecting a new value
   if (i < (tempStars == -1 ? stars : tempStars))
   {
      e.Graphics.DrawImage(imageChecked, newPoint);
   }
   else
   {
      e.Graphics.DrawImage(imageEmpty, newPoint);
   }
}  

Temporary Selection

Whenever the user moves the mouse over the control the stars are temporary drawn to the point the mouse is. This is done in MouseMove

double tempStarsD = (e.X + imageChecked.Width - 5) / imageChecked.Width;
int newTempStars = Convert.ToInt32(Math.Floor(tempStarsD));

// just redraw in case we really have to
if (!newTempStars.Equals(tempStars))
{
   tempStars = newTempStars;
   this.Invalidate();
}

The "-5" is necessary because otherwise it wouldn't be possible to select 0 as the first star is drawn at the point 0,0.

It's also possible to draw a blank are by changing this line in the

Paint</code method:

</p>
<pre>
Point newPoint = new Point(imageChecked.Width * i, 0);
</pre>
<p>
to something like that
</p>
<pre>
Point newPoint = new Point(imageChecked.Width * i + 5, 0);
</pre>


<h3>Selection</h3>

<p>
The actual selection is done in <code>MouseDown

double sStarsD = (e.X + imageChecked.Width - 5) / imageChecked.Width;
int newStars = Convert.ToInt32(Math.Floor(sStarsD));

// check if the user has really selected a different value
if (!newStars.Equals(stars))
{
   stars = newStars;

   // in case the control is wider than imageWidth*maxStars this is necessary
   // otherwise a StarRatingException will be raised
   if (stars > maxStars)
   {
      stars = maxStars;
   }
   this.Invalidate();
}

Data Binding

It's also possible to use this control in a data bound way. This can be done in the same way as I have to when using a CheckBox

starcontrol.DataBindings.Add("Stars", dataSet, "probability");

History

• 01.06.2006:
• Initial version created