Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [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]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Collapse]Multi-Use Site Extensions
   [Collapse]RatingControl
     Overview - RatingControl
    [Collapse]Concepts
      Customizing Item Images
    [Expand]Visual Elements
   [Expand]CallbackPanel
   [Expand]RoundPanel
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[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):

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.

Expanded See Also

How would you rate this topic?​​​​​​​