Appearance Customization in .NET MAUI Rating

5 Aug 20265 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

Use RatingSettings to customize the appearance of the rated and unrated items in the Rating control. The available properties are listed below.

Fill

Stroke

Stroke Thickness

Set Fill Color

SfRating supports setting the fill color for the rated and unrated items.

Rated items

The RatedFill property fills the rated items with the specified color in the Rating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings RatedFill="Red"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 3,
    RatingSettings = new RatingSettings()
    {
        RatedFill = Colors.Red,
    },
};

Rated item fill color

Unrated items

The UnratedFill property fills the unrated items with the specified color in the Rating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings UnratedFill="Gray"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 3,
    RatingSettings = new RatingSettings()
    {
        UnratedFill = Colors.Gray,
    },
};

Unrated item fill color

Set Stroke

SfRating supports setting the stroke color for the rated and unrated items.

Rated items

The RatedStroke property sets the stroke for the rated items with the specified color in the Rating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings RatedStroke="Black"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 3,
    RatingSettings = new RatingSettings()
    {
        RatedStroke = Colors.Black,
    },
};

Rated item stroke

Unrated items

The UnratedStroke property sets the stroke for the unrated items with the specified color in the Rating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings UnratedStroke="Black"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 3,
    RatingSettings = new RatingSettings()
    {
        UnratedStroke = Colors.Black,
    },
};

Unrated item stroke

Set Stroke Thickness

SfRating supports setting the stroke thickness for the rated and unrated items. The value is a double in device-independent units (DIU) and must be greater than or equal to zero.

Rated items

The RatedStrokeThickness property sets the stroke thickness for the rated items with the specified value in the Rating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings RatedStroke="Black" 
                               RatedStrokeThickness="3"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 3,
    RatingSettings = new RatingSettings()
    {
        RatedStroke = Colors.Black,
        RatedStrokeThickness = 3,
    },
};

Rated item stroke thickness

Unrated items

The UnratedStrokeThickness property sets the stroke thickness for the unrated items with the specified value in the Rating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
        <rating:RatingSettings UnratedStroke="Black"
                               UnratedStrokeThickness="3"/>
    </rating:SfRating.RatingSettings>
</rating:SfRating>
SfRating rating = new SfRating()
{
    Value = 5,
    RatingSettings = new RatingSettings()
    {
        UnratedStroke = Colors.Black,
        UnratedStrokeThickness = 3,
    },
};

Unrated item stroke thickness

See also