Syncfusion AI Assistant

How can I help you?

Appearance Customization in Xamarin Rating (SfRating)

4 Aug 20225 minutes to read

We can customize the rated and unrated items Color, Stroke width and Stroke color using the following properties of SfRatingSettings.

Set Fill Color

SfRating control has support to set the fill color for the selected and unselected items.

Selected Items

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

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

Rated item fill color

Unselected Items

The UnRatedFill property fills the unrated item with the specified solid color in the SfRating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
    <rating:SfRatingSettings UnRatedFill="Gray"/>
    </rating:SfRating.RatingSettings>
    </rating:SfRating>
SfRating rating= new SfRating();
    rating.Value = 3;
    SfRatingSettings ratingSettings = new SfRatingSettings();
    ratingSettings.UnRatedFill = Color.Gray;
    rating.RatingSettings = ratingSettings;

Unrated item fill color

Set Stroke Color

SfRating control has support to set the stroke color for the selected and unselected items.

Selected Items

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

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

Rated item stroke color

Unselected 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:SfRatingSettings UnRatedStroke="Black"/>
    </rating:SfRating.RatingSettings>
    </rating:SfRating>
SfRating rating= new SfRating();
    rating.Value = 3;
    SfRatingSettings ratingSettings = new SfRatingSettings();
    ratingSettings.UnRatedStroke = Color.Black;
    rating.RatingSettings = ratingSettings;

Unrated item stroke color

Set Stroke Width

SfRating control has support to set the stroke width for the selected and unselected items.

Selected Items

The RatedStrokeWidth property sets the stroke width for the rated item with the specified value in the SfRating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
    <rating:SfRatingSettings RatedStrokeWidth="3"/>
    </rating:SfRating.RatingSettings>
    </rating:SfRating>
SfRating rating= new SfRating();
    rating.Value = 3;
    SfRatingSettings ratingSettings = new SfRatingSettings();
    ratingSettings.RatedStrokeWidth=3;
    rating.RatingSettings = ratingSettings;

Rated item stroke width

Unselected Items

The UnRatedStrokeWidth property sets the stroke width for the unrated item with the specified value in the SfRating control.

<rating:SfRating Value="3">
    <rating:SfRating.RatingSettings>
    <rating:SfRatingSettings UnRatedStrokeWidth="3"/>
    </rating:SfRating.RatingSettings>
    </rating:SfRating>
SfRating rating= new SfRating();
    rating.Value = 3;
    SfRatingSettings ratingSettings = new SfRatingSettings();
    ratingSettings.UnRatedStrokeWidth=3;
    rating.RatingSettings = ratingSettings;

Unrated item stroke width