Click here to Skip to main content
13,287,658 members (45,243 online)
Click here to Skip to main content
Add your own
alternative version


34 bookmarked
Posted 1 Jun 2006

StarRating Control

, 1 Jun 2006
Rate this:
Please Sign up or sign in to vote.
A graphical rating control
<!-- Article Starts - DO NOT ADD HTML/BODY START TAGS-->

Sample Image - screenshot.png


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.


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

Public properties

ImageEmptyThis is the image that is displayed for non-available stars.
ImageCheckedThis is the image that shows the selected stars
MaxStarsThe maximum number of stars that a user can selected
StarsThe 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.

// 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);
      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;

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);


The actual selection is done in <code>MouseDown
which is also pretty simple

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;

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");


  • 01.06.2006:
    • Initial version created


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
Switzerland Switzerland
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralClearing Stars Pin
LJ14330-Sep-07 13:54
memberLJ14330-Sep-07 13:54 
GeneralRe: Clearing Stars Pin
Laubi30-Sep-07 22:01
memberLaubi30-Sep-07 22:01 
GeneralVery nice control! Pin
nSolution1-Jun-06 2:36
membernSolution1-Jun-06 2:36 
QuestionQuestion about windows theme! Pin
Prasad Khandekar1-Jun-06 1:10
memberPrasad Khandekar1-Jun-06 1:10 
AnswerRe: Question about windows theme! Pin
Laubi1-Jun-06 1:20
memberLaubi1-Jun-06 1:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171207.1 | Last Updated 1 Jun 2006
Article Copyright 2006 by Laubi
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid