Rating Shape in .NET MAUI Rating

5 Aug 20261 minute to read

Prerequisites

Before using the SfRating, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Inputs

For step-by-step setup, refer to the Getting Started documentation.

Overview

The Rating control supports five built-in rating shapes through the RatingShape property. The following shapes are available:

The default rating shape of the Rating control is Star.

SfRating rating shapes

The Star, Heart, Diamond, and Circle shapes are built-in and require no additional configuration. The Custom shape lets you supply your own SVG path data.

Custom

When RatingShape is set to Custom, provide a custom SVG path to the Path property. The Path value uses standard SVG path data syntax (move, line, curve commands), and is rendered at the size defined by ItemSize. The fill color is determined by the RatedFill and UnratedFill properties.

<rating:SfRating RatingShape="Custom"
                 ItemSize="36"
                 Path="M17.5 35.5C19.9063 35.5 21.875 33.8846 21.875 31.9103H13.125C13.125 33.8846 15.0719 35.5 17.5 35.5ZM30.625 24.7308V15.7564C30.625 10.2462 27.0375 5.63334 20.7812 4.41282V3.19231C20.7812 1.70256 19.3156 0.5 17.5 0.5C15.6844 0.5 14.2188 1.70256 14.2188 3.19231V4.41282C7.94063 5.63334 4.375 10.2282 4.375 15.7564V24.7308L0 28.3205V30.1154H35V28.3205L30.625 24.7308Z" />
SfRating rating = new SfRating
{
    ItemSize = 36,
    RatingShape = RatingShape.Custom,
    Path = "M17.5 35.5C19.9063 35.5 21.875 33.8846 21.875 31.9103H13.125C13.125 33.8846 15.0719 35.5 17.5 35.5ZM30.625 24.7308V15.7564C30.625 10.2462 27.0375 5.63334 20.7812 4.41282V3.19231C20.7812 1.70256 19.3156 0.5 17.5 0.5C15.6844 0.5 14.2188 1.70256 14.2188 3.19231V4.41282C7.94063 5.63334 4.375 10.2282 4.375 15.7564V24.7308L0 28.3205V30.1154H35V28.3205L30.625 24.7308Z"
};

NOTE

The Item size should be the same as the path size for Custom Rating Shape

See also