Rating view

[GeorgeLeithead]

Description of Change

This pull request introduces a custom RatingView control, designed to provide developers with a flexible and customizable rating mechanism, similar to those used on popular review and feedback platforms. The control is versatile and adaptable, allowing developers to tailor it to the specific needs of their applications through a variety of customizable properties.

The primary goal of this control is to enhance the user experience by enabling precise and intuitive user ratings, while offering developers full control over the visual and functional aspects of the control. The following are key features and properties available in the RatingView control:

Key Features and Property Descriptions:

• Set the Maximum Number of rating items:
  Developers can define the total number of items (e.g., stars, hearts, etc., or custom shapes) available for rating. This allows for ratings of any scale, such as a 5-star or 10-star system, depending on the needs of the application.

• Set the current Rating:
  The control supports setting the current rating value, allowing for both pre-defined ratings (e.g., from previous user input or stored data) and updates during runtime as the user interacts with the control.

• Set the Filled (rated) background colour:
  Developers can set the colour that will be applied to the filled (rated) portion of each item, offering flexibility in defining the visual aesthetic of the rating items when selected by the user.

• Set the Empty rating colour:
  The colour for the unfilled (empty) rating items can also be customized. This allows for clear visual differentiation between rated and unrated items.

• Set the rating item shape Border Colour and Thickness:
  The control allows for defining the border colour and thickness of each rating item. This provides additional flexibility to create visually distinct and stylized rating shapes with custom borders.

• Set the rating Fill type (Shape or Item):
  Developers can choose how the fill is applied against the entire rating item or just the shape, enabling more nuanced visual presentation, such as filling only the interior of stars or the full item.

• Set the rating item Shape:
  The control provides the ability to define the shape of the rating items, such as stars, circles, like, dislike, or any other commonly used rating icons.

• Define a Custom rating item shape:
  In addition to standard shapes, the control allows for defining custom shapes for rating item shapes. This feature empowers developers to implement unique designs, such as distinctive symbols, as rating items.

• Set the rating item shape Size:
  The size of the rating item shape can be customized to fit the overall design of the application, providing the flexibility to adjust the control to various UI layouts.

• Set the Spacing between rating items:
  Developers can define the spacing between individual rating items, ensuring proper alignment and spacing based on the control’s context within the application's layout.

• Set the Padding between the rating item and the rating item shape:
  Padding between the rating item and its corresponding shape can be adjusted, allowing for finer control over the appearance and layout of the rating items.

• Attach a Handler to the RatingChanged Event:
  The control supports event handling through the RatingChanged event, enabling developers to respond to changes in the user’s rating input, such as updating data models, triggering animations, or submitting ratings to a backend service.

• Define the control in XAML or C# syntax:
  The RatingView control can be defined and implemented using either XAML or C# syntax, making it highly versatile for both declarative and programmatic UI design, depending on developer preference or application architecture.

Linked Issues

• Fixes [Proposal] RatingView proposal #1607

PR Checklist

• Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
• Has tests (if omitted, state reason in description)
• Has samples (if omitted, state reason in description)
• Rebased on top of main at time of PR
• Changes adhere to coding standard
• Documentation created or updated: .NET MAUI Community Toolkit - RatingView MicrosoftDocs/CommunityToolkit#472

Additional information

This pull request also includes three sample pages to assist developers in exploring and implementing the RatingView control:

• XAML Syntax Sample Page:
  Demonstrates the usage and configuration of the RatingView control using XAML, providing an example for developers who prefer a declarative approach to UI development.

• C# Syntax Sample Page:
  Shows how the RatingView control can be implemented programmatically in C#, catering to developers who prefer to work in code for dynamic or logic-driven UIs.

• Showcase Page:
  Provides a demonstration of various customization options and use cases for the RatingView control, offering developers inspiration on how they can integrate and style the control in their applications. This page highlights the control's flexibility in different scenarios and showcases potential real-world applications.

Platforms tested

• Android
• Windows
• MacCatalyst
• iOS
• Tizen

NOTE: Due to the developer not having access to iOS, MacCatalyst or Tizen, these platforms have not been tested or validated as working or visually correct.

[GeorgeLeithead]

Remove Auto from RowDefinitions + ColumnDefinition

• Auto causes massive performance impacts because MAUI must recalculate every row in the entire Grid when one row's size increases when its RowDefinition is Auto

How does this handle when the user has their device set to anything other than the default "Font Size" and "Display size"? How does this work for our visual impaired users? Just increasing the "Display Size" by 1 setting, and most of the controls become un-usable!

I have adjusted the row heights so that they display correctly with the device default "Font Size" and "Display Size" settings.

Copilot reviewed 12 out of 21 changed files in this pull request and generated 1 suggestion.

Files not reviewed (9)

• samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewShowcasePage.xaml: Language not supported
• samples/CommunityToolkit.Maui.Sample/MauiProgram.cs: Evaluated as low risk
• samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewShowcasePage.xaml.cs: Evaluated as low risk
• samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewXamlPage.xaml.cs: Evaluated as low risk
• samples/CommunityToolkit.Maui.Sample/ViewModels/Views/RatingView/RatingViewCsharpViewModel.cs: Evaluated as low risk
• samples/CommunityToolkit.Maui.Sample/ViewModels/Views/RatingView/RatingViewShowcaseViewModel.cs: Evaluated as low risk
• samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs: Evaluated as low risk
• samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs: Evaluated as low risk
• src/CommunityToolkit.Maui.Core/Primitives/RatingViewShape.cs: Evaluated as low risk

[GeorgeLeithead]

@pictos I have added in a Rosalyn Analyzer to validate that the MaxaimumRating property is within the correct range. Never written an analyzer before, so I hope it's good.