Posted by Will on Tuesday, April 08, 2008 at 7:26 PM

In the process of adding new features to HappyFish I found myself in need of a control that would allow a user to rate an item.  I've seen these in various contexts, usually on web pages, but couldn't find one that worked well in my case.  I needed on that could be used on a ToolStrip.  This of course was just the excuse I needed to make my own.

Star Rating ControlHere's the finished product.   The yellow star and delete images came from the Silk collection of free icons from FamFamFam.  The gray star is a grayscale version of the yellow one.  Each star has a tool tip as does the delete button to give user feedback as to the current rating and how clicking on other images will change the rating.  Initially I wasn't sure how and where I would be using the control so I added the ability to orient the control vertically instead of horizontally via a property setter.  I'll include the source for this project in both VB and C#. 

chooseimagedialog I started by creating a new class library project in Visual Studio.  I added a user control (StarRating) and set its background color to transparent.  I added six picture boxes to hold the star and delete icons and set their images.  By choosing the "Project Resource File" option then clicking Import the images you add will also be available as resources elsewhere in the project.  I set each star's picture to the yellow variant, but that was not necessary as you'll see later.  With all of this done I spent what seemed like and hour fidgeting with the layout spacing a padding. 

A big part of the user control coding involves setting the correct ToolTip on each star depending on whether is selected or not.  I wanted the currently selected star to say something like "Rated 3 Stars" (past tense).  I wanted the rest of the stars to say something like "Rate 4 Stars" to indicate clicking on that star would change the rating.  As for the delete button I wanted it to say "No Rating" or "Remove Rating" as appropriate.  The StarRating user control class also exposes a public event RatingValueChanged, a property for laying out the control vertically or horizontally (and supporting enumerator), and the control's rating property.  I also exposed the control's BorderStyle property for good measure.

toolstripitemsdropdownTwo other classes are included in the project.  One is RatingChangedEventArgs, which inherits the EventArgs class and provides the new rating and the old rating for the RatingValueChanged events.  The other supporting class is ToolStripStarRating.  It inherits the ToolStripControlHost class.  ToolStripStarRating wraps the StarRating user control and does the work of making it available as a ToolStrip item via the ToolStripItemDesignerAvailabilityAttribute attribute.  It also handles connecting the events of the StarRating control to its own RatingChanged event handler.

Note that even though the ToolStripStarRating class makes the StarRating user control available as a ToolStrip item, the StarRating user control can be used by itself on a WinForm as well.  You will find a demonstration of this in the sample WinForm application included in the project.

To use the control add a reference to the ThirstyCrow.WinForms.Controls.dll found in the bin directory of the ThirstyCrow.WinForms.Controls project to your project.  You should then see the StarRating control in the ToolStrip item drop down selector.

A link to the source code along with a sample WinForm demonstrating the control are below.  Both C# and VB.net are included in the same zip.
Download: StarRatingControlCode.zip (402.79 KB)

Comments [2]     Categories: WinForms