Appearance and Styling in Xamarin Rating (SfRating)

18 May 20212 minutes to read

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

Set Size

The ItemSize property sets the size of the rating items.

NOTE

By default, property value is 50.

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

SfRating layout customization

Set Number of Items

The ItemCount property sets the number of rating items to be displayed.

NOTE

The default property value is 5.

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

Set number of rating items

Set Space between Items

The ItemSpacing property sets the spacing between the rating items.

NOTE

By default, property value is 5.

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

Space between rating items

Rating Settings

This section explains about various rating settings available in the SfRating control.

<rating:SfRating  Value="3">
        <rating:SfRating.RatingSettings>
            <rating:SfRatingSettings RatedFill="Red" UnRatedFill="Blue" RatedStrokeWidth="3" UnRatedStrokeWidth="2" />
        </rating:SfRating.RatingSettings>
     </rating:SfRating>
SfRating rating;
SfRatingSettings ratingSettings;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    ratingSettings = new SfRatingSettings();
    ratingSettings.RatedFill = Color.Red;
    ratingSettings.UnRatedFill = Color.Blue;
    ratingSettings.RatedStrokeWidth = 3;
    ratingSettings.UnRatedStrokeWidth = 2;
    rating.RatingSettings = ratingSettings;
}