Skip to content

Rating view #2191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 196 commits into from
Feb 14, 2025
Merged

Rating view #2191

merged 196 commits into from
Feb 14, 2025

Conversation

GeorgeLeithead
Copy link
Contributor

@GeorgeLeithead GeorgeLeithead commented Sep 9, 2024

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

PR Checklist

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.

@TheCodeTraveler TheCodeTraveler mentioned this pull request Sep 9, 2024
6 tasks
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 13 out of 26 changed files in this pull request and generated no comments.

Files not reviewed (13)
  • samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj: Language not supported
  • samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewShowcasePage.xaml: Language not supported
  • src/CommunityToolkit.Maui.Analyzers.UnitTests/CommunityToolkit.Maui.Analyzers.UnitTests.csproj: Language not supported
  • samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Analyzers/UseCommunityToolkitInitializationAnalyzer.cs: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/MauiProgram.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Analyzers/AnalyzerReleases.Shipped.md: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Core/Primitives/FillWhenTapped.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Core/Primitives/Defaults/RatingViewDefaults.shared.cs: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewShowcasePage.xaml.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Core/Primitives/RatingChangedEventArgs.shared.cs: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/ViewModels/Views/RatingView/RatingViewShowcaseViewModel.cs: Evaluated as low risk

@TheCodeTraveler TheCodeTraveler added documentation approved and removed pending documentation This feature requires documentation labels Feb 13, 2025
@TheCodeTraveler TheCodeTraveler added the needs discussion Discuss it on the next Monthly standup label Feb 13, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot reviewed 15 out of 28 changed files in this pull request and generated 2 comments.

Files not reviewed (13)
  • samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj: Language not supported
  • samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewShowcasePage.xaml: Language not supported
  • src/CommunityToolkit.Maui.Analyzers.Benchmarks/CommunityToolkit.Maui.Analyzers.Benchmarks.csproj: Language not supported
  • src/CommunityToolkit.Maui.Analyzers.UnitTests/CommunityToolkit.Maui.Analyzers.UnitTests.csproj: Language not supported
  • samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Analyzers/UseCommunityToolkitInitializationAnalyzer.cs: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/MauiProgram.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Analyzers/AnalyzerReleases.Shipped.md: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Core/Primitives/Defaults/RatingViewDefaults.shared.cs: Evaluated as low risk
  • src/CommunityToolkit.Maui.Core/Primitives/RatingViewFillOption.cs: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/ViewModels/Views/RatingView/RatingViewShowcaseViewModel.cs: Evaluated as low risk
  • samples/CommunityToolkit.Maui.Sample/ViewModels/Views/RatingView/RatingViewViewModel.cs: Evaluated as low risk
Comments suppressed due to low confidence (2)

samples/CommunityToolkit.Maui.Sample/Pages/Views/RatingView/RatingViewXamlPage.xaml.cs:18

  • Ensure that 'sender' is of type 'RatingView' before casting.
ArgumentNullException.ThrowIfNull(sender);

src/CommunityToolkit.Maui.Core/Primitives/RatingChangedEventArgs.shared.cs:7

  • The comment should be 'Gets the rating for the rating changed event' instead of 'Gets the rating for the new rating changed event'.
/// <summary>Gets the rating for the new rating changed event</summary>

@TheCodeTraveler TheCodeTraveler merged commit 35dd6db into CommunityToolkit:main Feb 14, 2025
10 checks passed
@github-actions github-actions bot locked and limited conversation to collaborators Feb 16, 2025
@GeorgeLeithead GeorgeLeithead deleted the RatingView branch February 17, 2025 13:00
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
approved This Proposal has been approved and is ready to be added to the Toolkit documentation approved needs discussion Discuss it on the next Monthly standup
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Proposal] RatingView proposal
4 participants