Appearance Customization in .NET MAUI Rating (SfRating)

4 May 20254 minutes to read

You can customize the rated and unrated fill color, stroke and stroke thickness using the following properties of RatingSettings.

Set Fill Color

SfRating control has support to set the fill color for the rated and unrated items.

Rated items

The RatedFill property fills the rated items with the specified solid color in the SfRating.

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

Rated item fill color

Unrated items

The UnratedFill property fills the unrated items with the specified solid color in the SfRating.

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

Unrated item fill color

Set Stroke

SfRating control has support to set the stroke color for the rated and unrated items.

Rated items

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

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

Rated item stroke

Unrated items

The UnratedStroke property sets the stroke for the unrated area with the specified solid color in the SfRating control.

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

Unrated item stroke

Set Stroke Thickness

SfRating control has support to set the stroke thickness for the rated and unrated items.

Rated items

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

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

Rated item stroke thickness

Unrated items

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

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

Unrated item stroke thickness