Click here to Skip to main content
Click here to Skip to main content

StarRating Control

, 31 May 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

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.

// 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:

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

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

License

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

Laubi
Web Developer
Switzerland Switzerland
No Biography provided

Comments and Discussions

 
GeneralClearing Stars PinmemberLJ14330-Sep-07 12:54 
GeneralRe: Clearing Stars PinmemberLaubi30-Sep-07 21:01 
GeneralVery nice control! PinmembernSolution1-Jun-06 1:36 
QuestionQuestion about windows theme! PinmemberPrasad Khandekar1-Jun-06 0:10 
AnswerRe: Question about windows theme! PinmemberLaubi1-Jun-06 0:20 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140718.1 | Last Updated 1 Jun 2006
Article Copyright 2006 by Laubi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid