Shape Rating

RadShapeRating component is designed to be used in the simplest scenarios where an ordinary rating component is required. This control allows easy customization of the colors and shape of the default rating item.

Shape Types

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

For easy and fast setup RadRating includes several simple shapes that can be used for rating items out of the box. This is accomplished through the static Geometries class which resides in the Telerik.XamarinForms.Primitives.SkiaSharp.Rating namespace. This class exposes static properties that return predefined shapes.

For more details on RadPath and RadPathGeometry check the documentation here: RadPath Overview.

Here is how each of the geometries can be used:

• Star (default)

<telerikInput:RadShapeRating x:Name="rating1" />

• Circle

<telerikInput:RadShapeRating ItemShape="{x:Static telerikInput:Geometries.Circle}" x:Name="rating2" />

• Diamond

<telerikInput:RadShapeRating ItemShape="{x:Static telerikInput:Geometries.Diamond}" x:Name="rating3" />

• Heart

<telerikInput:RadShapeRating ItemShape="{x:Static telerikInput:Geometries.Heart}" x:Name="rating4" />

• Custom RadPathGeometry Shape:

<telerikInput:RadShapeRating x:Name="rating5">
    <telerikInput:RadShapeRating.ItemShape>
        <telerikCommon:RadPathGeometry>
            <telerikCommon:RadPathFigure StartPoint="0, 1">
                <telerikCommon:RadLineSegment Point="1, 1" />
                <telerikCommon:RadLineSegment Point="0.5, 0" />
                <telerikCommon:RadLineSegment Point="0, 1" />
            </telerikCommon:RadPathFigure>
        </telerikCommon:RadPathGeometry>
    </telerikInput:RadShapeRating.ItemShape>
</telerikInput:RadShapeRating>

where telerikCommon namespace is defined like this:

xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"

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.

<telerikInput:RadShapeRating x:Name="rating" 
                             ItemFill="YellowGreen"
                             ItemStroke="YellowGreen"
                             SelectedItemFill="Pink"
                             SelectedItemStroke="Red" />

See Also

• Key Features
• Templated Rating