New to Telerik UI for .NET MAUI? Start a free 30-day trial

Shape Rating

The RadShapeRating component is designed for the simplest scenarios where an ordinary Rating component is required. RadShapeRating allows easy customization of the colors and shape of the default rating item.

Shape Types

RadShapeRating exposes the ItemShape property of type RadPathGeometry which is used to define the shape of the rating items.

For an easy and fast setup, the Rating includes several simple shapes that can be used for rating items out of the box. This is accomplished through the static Geometries. The Geometries class exposes static properties that return predefined shapes.

For more details on RadPath and RadPathGeometry, refer to the Path Overview article.

Geometries

The Rating supports the following geometry types:

  • (Default) Star

    Star Shape Rating

    <telerik:RadShapeRating AutomationId="defaultRating" />
    
  • Circle

    Circle Shape Rating

    <telerik:RadShapeRating ItemShape="{x:Static telerik:Geometries.Circle}" AutomationId="circleRating" />
    
  • Diamond

    Diamond Shape Rating

    <telerik:RadShapeRating ItemShape="{x:Static telerik:Geometries.Diamond}" AutomationId="diamondRating" />
    
  • Heart

    Heart Shape Rating

    <telerik:RadShapeRating ItemShape="{x:Static telerik:Geometries.Heart}" AutomationId="heartRating" />
    
  • Custom RadPathGeometry shape:

    Custom Shape Rating

Shapes Styling

You can control the visual appearance of the predefined shapes through the following styling settings:

  • ItemFill (Color)—Specifies the color used to fill the rating item.
  • ItemStroke (Color)—Defines the color used by the border around the geometry.
  • ItemStrokeThickness (double)—Sets the width of the border around the geometry.
  • SelectedItemFill (Color)—Defines the color used to fill the selected rating item.
  • SelectedItemStroke (Color)—Sets the color used by the border around the selected geometry.
  • SelectedItemStrokeThickness (double)—Specifies the width of the border around the selected geometry.

Rating Styling

The following example shows how to set the shapes styling.

Define the RadShapeRating:

<telerik:RadShapeRating AutomationId="styledRating" 
                             ItemFill="YellowGreen"
                             ItemStroke="YellowGreen"
                             SelectedItemFill="Pink"
                             SelectedItemStroke="Red" />

The following image shows the end result.

Rating Styling

See Also

In this article
Not finding the help you need?