Appearance and Styling in Xamarin Rating (SfRating)

4 Aug 20222 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.

XAML

<rating:SfRating ItemSize="20" />

C#

SfRating rating;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    rating.ItemSize = 20;
}

Set Number of Items

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

NOTE

The default property value is 5.

XAML

<rating:SfRating ItemCount="4" />

C#

SfRating rating;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    rating.ItemCount = 4;
}

Set Space between Items

The ItemSpacing property sets the spacing between the rating items.

NOTE

By default, property value is 5.

XAML

<rating:SfRating ItemSpacing="20" />

C#

SfRating rating;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    rating.ItemSpacing = 20;
}

Rating Settings

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

XAML

<rating:SfRating  Value="3">
        <rating:SfRating.RatingSettings>
            <rating:SfRatingSettings RatedFill="Red" UnRatedFill="Blue" RatedStrokeWidth="3" UnRatedStrokeWidth="2" />
        </rating:SfRating.RatingSettings>
     </rating:SfRating>

C#

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;
}