Getting Started with .NET MAUI Rating (SfRating)

3 Mar 20234 minutes to read

This section explains how to configure a SfRating control in a real-time scenario and also provides a walk-through on some of the customization features available in SfRating control.

To get start quickly with our .NET MAUI Rating, you can check the below video.

Adding a .NET MAUI Rating reference

Syncfusion .NET MAUI controls are available in Nuget.org. To add [.NET MAUI Rating] to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Inputs and then install it.

Handler registration

In the MauiProgram.cs file, register the handler for Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace RatingSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }      
    }
}

Adding the .NET MAUI Rating control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace, as shown in the following code sample:

XAML

<xmlns:rating="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"/>

C#

using Syncfusion.Maui.Inputs;

Initialize Rating

Now, add the SfRating control with a required optimal name using the included namespace.

XAML

<rating:SfRating x:Name="rating" />

C#

SfRating rating;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    this.Content = rating;
}

Set Number of Rating Items

The number of rating items to be displayed can be customized in the SfRating control. Users can create a rating application using 5 items as follows. The ItemCount property is used to define the number of rating items.

NOTE

The default value of ItemCount is 5.

XAML

<rating:SfRating ItemCount="5" />

C#

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

Set Value

The display value can be set in the SfRating control, which is selected among the items. The following code example shows the display value of three with five rating items. The Value property is used to set display value.

NOTE

The default value of this property is 0.

XAML

<rating:SfRating Value="3" />

C#

SfRating rating;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    rating.Value = 3;
}

Precision

The SfRating control provides an option to rate the items in full, half, and exact values. This can be set using the Precision property. By default, the precision mode is Standard.

XAML

<rating:SfRating Precision="Standard" />

C#

SfRating rating;
public MainPage()
{
    InitializeComponent();
    rating = new SfRating();
    rating.Precision = Precision.Standard;
}

The complete Getting Started sample is available in this link.