ComponentOne Rating for ASP.NET Web Forms
Task-Based Help / Customizing the C1Rating Icons / Using the Bar Array Rating Option
In This Topic
    Using the Bar Array Rating Option
    In This Topic

    The Bar Array Option is easy to set and customize. This topic will take you through setting the Bar Array as your rating option.

    In Design View

    Complete the following steps:

    1. Select the rating widget and open the smart tag.
    2. Set the Count property to 6, the TotalValue to 6, the Split to 1, and the Value to 4.
    3. In the Properties window, set the IconHeight property to 61.
    4. Set the IconWidth property to 11.
    5. Set the HoverIconsClass property IconsClass to wijmo-wijrating-hover-bar-11,wijmo-wijrating-hover-bar-21,wijmo-wijrating-hover-bar-31,wijmo-wijrating-hover-bar-41,wijmo-wijrating-hover-bar-51,wijmo-wijrating-hover-bar-61.
    6. Set the IconsClass property IconsClass to wijmo-wijrating-normal-bar-11,wijmo-wijrating-normal-bar-21,wijmo-wijrating-normal-bar-31,wijmo-wijrating-normal-bar-41,wijmo-wijrating-normal-bar-51,wijmo-wijrating-normal-bar-61.
    7. Set the RatedIconsClass property IconsClass to wijmo-wijrating-rated-bar-11,wijmo-wijrating-rated-bar-21,wijmo-wijrating-rated-bar-31,wijmo-wijrating-rated-bar-41,wijmo-wijrating-rated-bar-51,wijmo-wijrating-rated-bar-61
    8. Set the RatingMode property to Continuous.
    9. Press F5 to run the program. The rating Array should appear like this:

      C1Rating

    In Source View

    Complete the following steps:

    1. Place the following tag before the <Animation> tag:

      To write code in Source View

      <Icons>
      

      <IconsClass IconsClass="wijmo-wijrating-normal-bar-11,wijmo-wijrating-normal-bar-21,wijmo-wijrating-normal-
      bar-31,wijmo-wijrating-normal-bar-41,wijmo-wijrating-normal-bar-51,wijmo-wijrating-normal-bar-61"/>
      <HoverIconsClass IconsClass="wijmo-wijrating-hover-bar-11,wijmo-wijrating-hover-bar-21,wijmo-wijrating-hover-
      bar-31,wijmo-wijrating-hover-bar-41,wijmo-wijrating-hover-bar-51,wijmo-wijrating-hover-bar-61"/   
      <RatedIconsClass IconsClass="wijmo-wijrating-rated-bar-11,wijmo-wijrating-rated-bar-21,wijmo-wijrating-rated-
      bar-31,wijmo-wijrating-rated-bar-41,wijmo-wijrating-rated-bar-51,wijmo-wijrating-rated-bar-61"/>               
      </Icons>
      
    2. Change the Total Value to 6, the Count to 6, the IconHeight to 61,the IconWidth to 11, and the Value to 4.
    3. Press F5 or start Debugging to run the project. The rating Array should appear like this:

      C1Rating

    See Also