[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Collapse]Multi-Use Site Extensions
     Overview - RatingControl
      Customizing Item Images
    [Expand]Visual Elements
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Customizing Item Images

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.

View code (Razor):


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.

Expanded See Also

Is this topic helpful?​​​​​​​