Appearance and Styling in .NET MAUI Rating (SfRating)

21 Jul 20264 minutes 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

When the default view is not needed, you can customize the view of the .NET MAUI SfRating control. The Rating control provides support to customize the item size, item count, value, and space between rating items.

Set Size

The ItemSize property sets the size of the rating items, in device-independent units (DIU). The value must be greater than zero. The default value of this property is 50.

<rating:SfRating ItemSize="20" />
SfRating rating = new SfRating()
{
    ItemSize = 20
};

SfRating Item Size customization

Set Number of Items

The ItemCount property sets the number of rating items to be displayed. The value must be an integer greater than zero. The default value of this property is 5.

<rating:SfRating ItemCount="4" />
SfRating rating = new SfRating()
{
    ItemCount = 4
};

Set number of rating items

Set Space between Items

The ItemSpacing property sets the spacing between the rating items, in device-independent units (DIU). The value must be greater than or equal to zero. The default value of this property is 5.

<rating:SfRating ItemSpacing="20"/>
SfRating rating = new SfRating()
{
    ItemSpacing = 20
};

Space between rating items

Set Value

The Value property of the Rating control determines the rating selected among the items. The following code example sets a display value of three with five rating items. The Value property accepts a double, so it also supports half and other fractional values when used with the Precision mode. The property is two-way bindable and fires the ValueChanged event when the value changes.

NOTE

The default value of this property is 0. The valid range is 0 to ItemCount.

<rating:SfRating Value="3"/>
SfRating rating = new SfRating()
{
    rating.Value = 3
};

Rating Settings

This section explains the rating settings available in the Rating control. Use the RatingSettings class to customize the fill, stroke, and stroke thickness of the rated and unrated items.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings RatedFill="Red"
                                UnratedFill="Gray"
                                RatedStroke="Black"
                                UnratedStroke="Blue"
                                RatedStrokeThickness="2"
                                UnratedStrokeThickness="2"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 3,
    RatingSettings = new RatingSettings()
    {
        RatedFill = Colors.Red,
        UnratedFill = Colors.Gray,
        RatedStroke = Colors.Black,
        UnratedStroke = Colors.Blue,
        RatedStrokeThickness = 2,
        UnratedStrokeThickness = 2
    },
};

Rating Settings

See also