Exploring the New RatingView Control in .NET MAUI Community Toolkit v11.2

Yesterday marked the release of v11.2 of the .NET MAUI Community Toolkit, which is based on .NET MAUI 9 SR5 (v9.0.50).

Though it serves as the extended arm of .NET MAUI app development, newcomers will discover this officially supported toolkit to be of immense value.

It provides a thorough array of essential components, including Alerts, Behaviors, Converters, Extensions, Layouts, and Views, which are vital for creating practical, real-world applications.

The Rating control is one of the most used controls while developing feedback pages. Requesting users to rate their quality of service, product reviews, questionnaires, surveys, KPIs, appraisals, feedback forms, user interactions like likes and dislikes, etc. Later, this data can be used to search, suggest, list, and improve products/services.

This toolkit version includes a simplified RatingView control. Just add it to any page/layout, set a few properties, and you’re ready to go.

• First, add the NuGet package.
  • dotnet add package CommunityToolkit.Maui
• Then, include the Toolkit’s builder method in the .NET MAUI Startup (MauiProgram.cs).
  • .UseMauiCommunityToolkit()
• Then, on the page of your interest, include the Toolkit’s XML namespace. This will bring those controls into scope (if using XAML).
  • First highlighted line in the below code snippet
• Finally, add the RatingView control and set its properties.

XAML:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    x:Class="MyApp.Views.FeedbackPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <StackLayout
        Padding="20"
        HorizontalOptions="Center"
        Spacing="15"
        VerticalOptions="Center">

        <mct:RatingView
            FillColor="Red"
            HorizontalOptions="Center"
            Rating="5"
            Shape="Heart"
            ShapeDiameter="30" />

        <mct:RatingView
            FillColor="Green"
            HorizontalOptions="Center"
            Rating="4.5"
            Shape="Circle" />
    </StackLayout>
</ContentPage>

Customization:

This control allows customization through various bindable properties, including the following:

• The shape of the control includes commonly used shapes like Star, Heart, and Circle. It also includes Like (Thumbs up) and Dislike (Thumbs down). There is even an option to define a Custom shape.
  • CustomShapePath – An SVG string to define a custom shape
  • Shape property
  • Define the Shape before setting it as Custom.
• Color to fill the shape / shade the background
  • FillColor property
  • Corresponds to the Rating value
  • Related to the FillOption property
• Option to fill either the Shape or its Background
  • FillOption property
• Color for the empty shape (unfilled region)
  • EmptyShapeColor property
• Size of the shape defined by the ShapeDiameter property
• Shape border customization
  • ShapeBorderColor
  • ShapeBorderThickness
• Maximum value for the Rating – of type integer
  • MaximumRating property
  • Sets the item display count
  • The value must be between 1 and 25, defaulting to 5; setting it to 1 toggles it
• The ShapePadding property determines the spacing between items
  • Of type Thickness
• Rating property – of type double
  • The actual value
  • Supports fractions
  • The default value is 0
• Option to make the control ReadOnly so that the value is untouched
• An event to respond to the change in the Rating value
  • RatingChanged

C#:

using CommunityToolkit.Maui.Core;
using CommunityToolkit.Maui.Views;

namespace MyApp.Views;

public class FeedbackPage : ContentPage
{
	public FeedbackPage()
	{
		Content = new StackLayout()
		{
			HorizontalOptions = LayoutOptions.Center,
			Padding = 20d,
			Spacing = 15d,
			VerticalOptions = LayoutOptions.Center,
			Children =
			{
				new RatingView()
				{
					FillColor = Colors.Red,
					HorizontalOptions = LayoutOptions.Center,
					Rating = 5d,
					Shape = RatingViewShape.Heart,
					ShapeDiameter = 30,
				},
				new RatingView()
				{
					FillColor = Colors.Green,
					HorizontalOptions = LayoutOptions.Center,
					Rating = 4.5d,
					Shape = RatingViewShape.Circle,
				},
			}
		};
	}
}

Output:

Sample App:

A sample with customizable options is now available in my .NET MAUI Samples GitHub repository. Look in the src\NET_9\RatingApp folder.

Web Reference:

• RatingView

Happy coding. Stay connected as we continue to learn and share the experiences from this exciting journey of being a .NET developer.