
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
ImageEmpty |
This is the image that is displayed for non-available stars. |
ImageChecked |
This is the image that shows the selected stars |
MaxStars |
The maximum number of stars that a user can selected |
Stars |
The number of stars that currently are selected |
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.
if (imageChecked == null || imageEmpty == null) return;
for (int i = 0; i < maxStars; i++)
{
Point newPoint = new Point(imageChecked.Width * i, 0);
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));
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:
Point newPoint = new Point(imageChecked.Width * i, 0);
to something like that
Point newPoint = new Point(imageChecked.Width * i + 5, 0);
Selection
The actual selection is done in MouseDown which is also pretty simple
double sStarsD = (e.X + imageChecked.Width - 5) / imageChecked.Width;
int newStars = Convert.ToInt32(Math.Floor(sStarsD));
if (!newStars.Equals(stars))
{
stars = newStars;
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