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

.NET MAUI 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 a simple and fast setup, the Rating includes various 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

    .NET MAUI Star Shape Rating

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

    .NET MAUI Circle Shape Rating

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

    .NET MAUI Diamond Shape Rating

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

    .NET MAUI Heart Shape Rating

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

    .NET MAUI 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.

.NET MAUI 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.

.NET MAUI Rating Styling

See Also

In this article