SharpPieces Rating control - how it works

The SharpPieces Rating control makes extensive use of css. We take an image like the one below, and we set it as a background image in a div element container.

The first step is to set the number of stars you want displayed through the ItemCount property. It's default value is 5. You can set the value less than or equal to the number it stars in the image. If you set it higher than that, it won't work as expected, unless you provide your custom image with a bigger number of items.

The second step is to set the ItemHeight property, telling the control how big is your image row's height. For the provided graphics, you can find the height in the documentation part of the website. If you decide to make your own image, than you'll need to provide a custom height.

The third step is to set the control's css class . Below is a demo of how you can declare the styles, and along with that, the custom background image for the control

.RatingContainer {display:block; float:left; clear:both; width:400px;
    min-width:400px; margin-bottom:10px}
.RatingContainer .ImageContainer {float:left; background-image:url(stars.gif); 
    background-repeat:no-repeat; width:130px; height:20px; line-height:20px; position:relative }
.RatingContainer .TextContainer {}
.RatingContainer .ImageContainer .item {height:20px;width:22px;float:left; cursor:pointer; 
    cursor:hand}

• CurrentRating - set a default selected rating, which the user can change later on.
• MessageList - set a list of messages to display on mouse over. The same list is also used for a tooltip on each star item. Note that the first string in the message list corresponds to "no item selected".
• AllowMultipleChanges - allow/disalow the user to change it's mind and select a different grade.