Appearance Customization in Xamarin Rating (SfRating)
4 Aug 20224 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;
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;
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;
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;
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;
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;