Overview

To create a custom Rating control, you must:

Providing Custom Images

You must provide at least two images:

• FullStarImageUrl. This image is used when a star is selected. For example, for the built-in "Style 1" template, this image is ;
• EmptyStarImageUrl. This image is used when a star is not selected. For example, for the built-in "Style 1" template, this image is ;

Once the above two images are correctly set, the Rating control will be able to correct display any value. For example, the following Rating control displays value "3.5" even though no additional image has been specified for the half star value:

You can also provide additional images for the Rating control to display visual cue to the user when user moves mouse over the Rating control. The following image shows a Rating control displays value "3.5", but also indicates the current mouse position is at "1.5":

The following image shows a different scenario where the current mouse position is greater than the current value (mouse position is "3.5", where current value is "1.5"):

In order to archieve such effect, you can specify the following two images:

• FullStarHoverImageUrl. This image is used when mouse is over a "full star". For example, for the built-in "Style 1" template, this image is ;
• EmptyStarHoverImageUrl. This image is used when mouse is over an "empty star". For example, for the built-in "Style 1" template, this image is ;

Setting Image Size

All custom images must be of the same size. In addition, you must set StarWidth and StarHeight to the pixel width and height of your images respectively.