Customizing Item Images
- 2 minutes to read
RatingControl allows you to modify its appearance by customizing item images. You can set a uniform image for all items, or a specific image for each item, as shown in the images below.
To specify a custom image, use the RatingControlSettings.ImageMapUrl, RatingControlSettings.ItemWidth and RatingControlSettings.ItemHeight properties.
A custom image combines a set of images (with specific height and width), arranged in a tabular format. Here, each column identifies an image for a corresponding item in different states (checked, clicked, etc.) specified by rows. The column count should correspond to the item count (the RatingControlSettings.ItemCount property). To set a uniform image for all items, it is sufficient to specify only one column with images within a custom image.
The RatingControl extension’s RatingControlSettings.ItemWidth and RatingControlSettings.ItemHeight properties should be set to the item image’s width and height, as illustrated in the image below.
The custom image is parsed into constituent parts - item images with a specified width and height, which are applied to the corresponding RatingControl items. For a custom image with one column, the parsed item images repeat for all items.
The code sample below demonstrates how to specify a custom image for the RatingControl items.
@Html.DevExpress().RatingControl(settings => {
settings.Name = "ratingControl1";
settings.ImageMapUrl = "~/Content/rate.png";
settings.ItemHeight = 31;
settings.ItemWidth = 31;
settings.EnableTheming = false;
}).Bind((decimal)3.5).GetHtml()
Note
The default images within the RatingControl are defined within the currently applied theme settings. The theme settings have a higher priority than the RatingControlSettings.ImageMapUrl property. If you wish to display custom images wiithin the RatingControl, it is necessary to disable RatingControl theming by setting the SettingsBase.EnableTheming (via the RatingControlSettings.EnableTheming) property value to false, as shown in the code sample above.