Introducing the New .NET MAUI Rating Control
Tags: dotnet, csharp, maui, mobile
Published: 2022-12-23 06:13:48

---
title: Introducing the New .NET MAUI Rating Control
published: true
date: 2022-12-22 11:45:54 UTC
tags: dotnet, csharp, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-rating-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pzhldv76xrm8npoa6mt.png
---
A rating UI control was one of the controls most requested by our mobile app developers. We at [Syncfusion](https://www.syncfusion.com/ "Syncfusion Official Site") understand the requirement for this essential control and have now delivered the [.NET MAUI Rating](https://www.syncfusion.com/maui-controls/maui-rating ".NET MAUI Rating control") control in our [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release.

Let’s look at the key features of the new .NET MAUI Rating control and the steps to get started with it.

## Key features

The .NET MAUI Rating control allows users to select a rating value from a group of visual symbols like stars. It can provide ratings for services provided or products, such as movies and software apps.

The control is packed with a lot of cool features, some of the most important being:

- [Rating precision](#rating-precision)
- [Rating shapes](#rating-shapes)
- [Read-only mode](#read-only-mode)
- [Customization](#customization)

###<a name="rating-precision">Rating precision</a>

The .NET MAUI Rating control provides flexible precision support to handle full, half, or exact values.

#### Standard (full)

Users can select a rating from whole values.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Full-Value-Rating-Selection-1.gif" alt="Full-Value Rating Selection" style="width:100%">

  <figcaption>Full-Value Rating Selection</figcaption>

</figure>
#### Half

Users can select a rating to the nearest half-value.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Half-Value-Rating-Selection-1.gif" alt="Half-Value Rating Selection" style="width:100%">

  <figcaption>Half-Value Rating Selection</figcaption>

</figure>
#### Exact

Users can select precise values as their rating.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Exact-Value-Rating-Selection-1.gif" alt="Exact Value Rating Selection" style="width:100%">

  <figcaption>Exact Value Rating Selection</figcaption>

</figure>
###<a name="rating-shapes">Rating shapes</a>

The .NET MAUI Rating control provides four predefined shapes and a custom shape option.

#### Predefined shapes

The following predefined shapes are available:

- Star (default)
- Heart
- Circle
- Diamond
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Predefined-Shapes-in-.NET-MAUI-Rating-Control.png" alt="Predefined Shapes in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Predefined Shapes in .NET MAUI Rating Control</figcaption>

</figure>
#### Custom rating shapes

You can load custom path shapes as rating items, too.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Custom-Rating-Shapes-in-.NET-MAUI-Rating-Control.png" alt="Custom Rating Shapes in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Custom Rating Shapes in .NET MAUI Rating Control</figcaption>

</figure>
###<a name="read-only-mode">Rating with read-only mode</a>

The .NET MAUI Rating control can also be used in a read-only mode. In this mode, users cannot interact with the control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Read-Only-Mode-in-.NET-MAUI-Rating-Control-1.gif" alt="Read-Only Mode in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Read-Only Mode in .NET MAUI Rating Control</figcaption>

</figure>
###<a name="Rating precision">Customization</a>

You can customize the item color, border color, spacing, and selection color of the .NET MAUI Rating control to fit the items to your app’s theme.

#### Custom item size

You can make the Rating control more accessible and enhance its accuracy by customizing the item size.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-Item-Size-in-.NET-MAUI-Rating-Control.png" alt="Customizing the Item Size in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Customizing the Item Size in .NET MAUI Rating Control</figcaption>

</figure>
#### Custom items count

Specify the number of items displayed in the Rating control (e.g., how many stars).
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-Number-of-Items-in-.NET-MAUI-Rating-Control.png" alt="Customizing the Number of Items in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Customizing the Number of Items in .NET MAUI Rating Control</figcaption>

</figure>
#### Custom item spacing

You can also specify the amount of space between each item in the Rating control like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-Item-Spacing-in-.NET-MAUI-Rating-Control.png" alt="Customizing the Item Spacing in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Customizing the Item Spacing in .NET MAUI Rating Control</figcaption>

</figure>
#### Selected and unselected colors

Customize the fill colors for the selected and unselected states for items.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/NET-MAUI-Rating-Control-with-Custom-Colors.png" alt=".NET MAUI Rating Control with Custom Colors" style="width:100%">

  <figcaption>.NET MAUI Rating Control with Custom Colors</figcaption>

</figure>
#### Custom items border color

An item’s border color can make its appearance more attractive. Customize the border color to highlight the selected and unselected items’ fill colors.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-Border-Colors-in-.NET-MAUI-Rating-Control.png" alt="Customizing the Border Colors in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Customizing the Border Colors in .NET MAUI Rating Control</figcaption>

</figure>
#### Custom stroke thickness

You can customize the stroke thickness of the item borders, like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Customizing-the-Stroke-Thickness-in-.NET-MAUI-Rating-Control.png" alt="Customizing the Stroke Thickness in .NET MAUI Rating Control" style="width:100%">

  <figcaption>Customizing the Stroke Thickness in .NET MAUI Rating Control</figcaption>

</figure>
## Getting started with .NET MAUI Rating control

We have seen the top features of the .NET MAUI Rating control. Let’s now see how to add it to your application.

### Step 1: Create a .NET MAUI project.

First, [create a .NET MAUI project](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app documentation").

### Step 2: Add .NET MAUI Rating NuGet package.

Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org "NuGet Gallery"). To add the .NET MAUI Rating control to your project, open the NuGet package manager in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), and search for [Syncfusion.Maui.Inputs](https://www.nuget.org/packages/Syncfusion.Maui.Inputs "Syncfusion.Maui.Inputs NuGet Package"), and then install it.

### Step 3: Register the handler.

In the **MauiProgram**. **cs** file, register the handler for Syncfusion core. Refer to the following code.

```csharp
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;
using Syncfusion.Maui.ListView.Hosting;
 
namespace RatingSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureSyncfusionListView()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });
 
            return builder.Build();
        }     
    }
}
```

### Step 4: Add the namespace.

Now, add  **Syncfusion.Maui.Inputs** namespace in your XAML page.

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

### Step 4: Initialize the Rating control.

Then, add the .NET MAUI Rating control with the required optimal name using the included namespace.

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

### Step 5: Set the number of rating items.

In this demo, we will create a rating application with 5 items. To do so, we use the **ItemCount** property to define the number of rating items.

```xml
<rating:SfRating ItemCount="5" />
```

**Note:** The default value of **ItemCount** is 5. You can customize it.

### Step 6: Set the rating value.

Now, let’s programmatically assign a value to the **Value** property to display the selected rating. We are setting the display value as 3.

```xml
<rating:SfRating Value="3" />
```

**Note:** The default value of the **Value** property is 0.

### Step 7: Set precision.

Finally, we need to choose if full, half or exact values can be chosen for ratings. This can be set using the **Precision** property. By default, the precision mode is **Standard**.

```xml
<rating:SfRating Precision="Standard" />
```

Refer to the following image.

![Integrating Rating Control into the .NET MAUI Application](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Picture16.png)
_Integrating Rating Control into the .NET MAUI Application_

## Conclusion

Thanks for reading! In this blog, we have seen the new [.NET MAUI Rating](https://www.syncfusion.com/maui-controls/maui-rating ".NET MAUI Rating control") control features available in our [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4") release. You can download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to evaluate this control. Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.4.0.38 "Syncfusion release notes") and [What’s New pages](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New") to see the other updates in this release.

If you need any clarification, please mention it in the comments section below! You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Authenticate the .NET MAUI App with Azure AD](https://www.syncfusion.com/blogs/post/authenticate-the-net-maui-app-with-azure-ad.aspx "Blog: Authenticate the .NET MAUI App with Azure AD")
- [Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management](https://www.syncfusion.com/blogs/post/agenda-view-in-net-maui-scheduler-a-perfect-tool-for-modern-day-office-management.aspx "Blog: Agenda View in .NET MAUI Scheduler: A Perfect Tool for Modern-Day Office Management")
- [Achieve Outlook-Like Swiping Using .NET MAUI ListView](https://www.syncfusion.com/blogs/post/achieve-outlook-like-swiping-using-net-maui-listview.aspx "Blog: Achieve Outlook-Like Swiping Using .NET MAUI ListView")
- [Replicating an Invoice Page UI in .NET MAUI](https://www.syncfusion.com/blogs/post/invoice-page-ui-in-net-maui.aspx "Blog: Replicating an Invoice Page UI in .NET MAUI")
- [How to Draw 2D Graphics in .NET MAUI’s GraphicsView](https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx "Blog: How to Draw 2D Graphics in .NET MAUI’s GraphicsView")