BeepStarRating

Overview

BeepStarRating is a modern, interactive star rating control that provides an intuitive way for users to provide feedback or ratings. It features smooth animations, hover effects, customizable star appearance, and optional text labels for enhanced user experience.

Built on the BeepControl foundation, it supports theme integration, glow effects, and dynamic scaling, making it perfect for review systems, product ratings, or any application requiring user feedback collection.

Key Features

Basic Usage

// Create a basic 5-star rating control
var starRating = new BeepStarRating
{
    StarCount = 5,
    SelectedRating = 0,
    StarSize = 24,
    Size = new Size(150, 30),
    Location = new Point(10, 10)
};

// Handle rating changes
starRating.RatingChanged += (s, e) => {
  //  Console.WriteLine($"New rating: {starRating.SelectedRating} stars");
};

// Add to form
this.Controls.Add(starRating);

var customRating = new BeepStarRating
{
    StarCount = 5,
    SelectedRating = 3,
    StarSize = 32,
    FilledStarColor = Color.Gold,
    EmptyStarColor = Color.LightGray,
    HoverStarColor = Color.Orange,
    ShowLabels = true,
    RatingLabels = new[] { "Terrible", "Bad", "Okay", "Good", "Excellent" },
    EnableAnimations = true,
    UseGlowEffect = true
};

var compactRating = new BeepStarRating
{
    StarCount = 5,
    StarSize = 16,
    Spacing = 2,
    EnableAnimations = false,
    UseGlowEffect = false,
    Size = new Size(90, 20)
};

Properties

Core Rating Properties

Appearance Properties

Animation Properties

Label Properties

Methods

Events

var rating = new BeepStarRating
{
    StarCount = 5,
    ShowLabels = true
};

// Handle rating changes
rating.RatingChanged += (s, e) => {
    int newRating = rating.SelectedRating;
    
    // Update database or perform action based on rating
    SaveProductRating(productId, newRating);
    
    // Update UI feedback
    feedbackLabel.Text = newRating == 0 
        ? "No rating selected" 
        : $"You rated this {newRating} out of 5 stars";
    
    // Show thank you message
    if (newRating > 0)
    {
        ShowToast("Thank you for your rating!");
    }
};

Examples

public class ProductReviewControl : UserControl
{
    private BeepStarRating overallRating;
    private BeepStarRating qualityRating;
    private BeepStarRating valueRating;
    private BeepStarRating serviceRating;

    public void InitializeRatingControls()
    {
        // Overall rating with larger stars
        overallRating = new BeepStarRating
        {
            StarCount = 5,
            StarSize = 32,
            EnableAnimations = true,
            UseGlowEffect = true,
            ShowLabels = true,
            RatingLabels = new[] { "Terrible", "Poor", "Average", "Good", "Excellent" },
            Location = new Point(120, 20),
            Size = new Size(200, 60)
        };

        // Category ratings with smaller stars
        var categorySettings = new[]
        {
            new { Control = qualityRating = new BeepStarRating(), Label = "Quality:", Y = 90 },
            new { Control = valueRating = new BeepStarRating(), Label = "Value:", Y = 120 },
            new { Control = serviceRating = new BeepStarRating(), Label = "Service:", Y = 150 }
        };

        foreach (var setting in categorySettings)
        {
            setting.Control.StarCount = 5;
            setting.Control.StarSize = 20;
            setting.Control.EnableAnimations = true;
            setting.Control.Location = new Point(120, setting.Y);
            setting.Control.Size = new Size(150, 30);

            // Add label
            var label = new BeepLabel
            {
                Text = setting.Label,
                Location = new Point(20, setting.Y + 5),
                Size = new Size(90, 20)
            };

            this.Controls.Add(label);
            this.Controls.Add(setting.Control);
        }

        this.Controls.Add(overallRating);

        // Handle rating changes
        overallRating.RatingChanged += OnRatingChanged;
        qualityRating.RatingChanged += OnRatingChanged;
        valueRating.RatingChanged += OnRatingChanged;
        serviceRating.RatingChanged += OnRatingChanged;
    }

    private void OnRatingChanged(object sender, EventArgs e)
    {
        // Calculate average rating
        var ratings = new[] { qualityRating.SelectedRating, valueRating.SelectedRating, serviceRating.SelectedRating };
        var average = ratings.Where(r => r > 0).DefaultIfEmpty(0).Average();
        
        // Update overall rating if all categories are rated
        if (ratings.All(r => r > 0))
        {
            overallRating.SelectedRating = (int)Math.Round(average);
        }

        // Enable submit button if overall rating is set
        submitButton.Enabled = overallRating.SelectedRating > 0;
    }
}

public void CreateRestaurantRatingWidget()
{
    var panel = new BeepPanel
    {
        Size = new Size(300, 150),
        ShowTitle = true,
        TitleText = "Rate Your Experience"
    };

    var foodRating = new BeepStarRating
    {
        StarCount = 5,
        StarSize = 24,
        FilledStarColor = Color.OrangeRed,
        HoverStarColor = Color.Red,
        Location = new Point(80, 40),
        Size = new Size(150, 30)
    };

    var serviceRating = new BeepStarRating
    {
        StarCount = 5,
        StarSize = 24,
        FilledStarColor = Color.SkyBlue,
        HoverStarColor = Color.Blue,
        Location = new Point(80, 80),
        Size = new Size(150, 30)
    };

    // Labels
    panel.Controls.Add(new BeepLabel 
    { 
        Text = "Food:", 
        Location = new Point(20, 45), 
        Size = new Size(50, 20) 
    });
    
    panel.Controls.Add(new BeepLabel 
    { 
        Text = "Service:", 
        Location = new Point(20, 85), 
        Size = new Size(50, 20) 
    });

    panel.Controls.Add(foodRating);
    panel.Controls.Add(serviceRating);

    // Submit button
    var submitBtn = new BeepButton
    {
        Text = "Submit Rating",
        Location = new Point(200, 120),
        Size = new Size(90, 25),
        Enabled = false
    };

    // Enable submit when both ratings are set
    EventHandler checkRatings = (s, e) => {
        submitBtn.Enabled = foodRating.SelectedRating > 0 && serviceRating.SelectedRating > 0;
    };

    foodRating.RatingChanged += checkRatings;
    serviceRating.RatingChanged += checkRatings;

    submitBtn.Click += (s, e) => {
        SubmitRestaurantRating(foodRating.SelectedRating, serviceRating.SelectedRating);
        MessageBox.Show("Thank you for your feedback!", "Rating Submitted");
        
        // Reset ratings
        foodRating.SelectedRating = 0;
        serviceRating.SelectedRating = 0;
    };

    panel.Controls.Add(submitBtn);
    this.Controls.Add(panel);
}

public class MovieReviewCard : BeepCard
{
    private BeepStarRating starRating;
    private BeepLabel movieTitle;
    private BeepLabel ratingLabel;

    public string MovieTitle { get; set; }
    public int UserRating { get; set; }

    public MovieReviewCard(string title)
    {
        MovieTitle = title;
        InitializeComponents();
    }

    private void InitializeComponents()
    {
        this.Size = new Size(250, 120);
        this.HeaderText = "Movie Rating";

        // Movie title
        movieTitle = new BeepLabel
        {
            Text = MovieTitle,
            Font = new Font("Segoe UI", 12, FontStyle.Bold),
            Location = new Point(10, 30),
            Size = new Size(230, 25)
        };

        // Star rating
        starRating = new BeepStarRating
        {
            StarCount = 5,
            StarSize = 20,
            EnableAnimations = true,
            UseGlowEffect = true,
            FilledStarColor = Color.Gold,
            Location = new Point(10, 60),
            Size = new Size(140, 25)
        };

        // Rating label
        ratingLabel = new BeepLabel
        {
            Text = "Not rated",
            Location = new Point(160, 63),
            Size = new Size(80, 20),
            ForeColor = Color.Gray
        };

        // Wire up events
        starRating.RatingChanged += (s, e) => {
            UserRating = starRating.SelectedRating;
            
            if (UserRating == 0)
            {
                ratingLabel.Text = "Not rated";
                ratingLabel.ForeColor = Color.Gray;
            }
            else
            {
                ratingLabel.Text = $"{UserRating}/5 stars";
                ratingLabel.ForeColor = UserRating >= 4 ? Color.Green : 
                                        UserRating >= 3 ? Color.Orange : Color.Red;
            }
        };

        this.Controls.AddRange(new Control[] { movieTitle, starRating, ratingLabel });
    }

    public void SetRating(int rating)
    {
        starRating.SelectedRating = rating;
    }
}

Animations

BeepStarRating includes sophisticated animation system for enhanced user experience:

Animation Types

• Scale Animation: Stars scale up when selected or hovered
• Hover Effects: Smooth scaling when mouse hovers over stars
• Selection Animation: Pop effect when rating changes
• Glow Effects: Gradient-based glow for active stars
• Fade Effects: Smooth transitions between states

var animatedRating = new BeepStarRating
{
    StarCount = 5,
    EnableAnimations = true,        // Enable all animations
    UseGlowEffect = true,          // Enable glow effects
    GlowIntensity = 0.6f,          // Stronger glow effect
    StarSize = 30
};

// Disable animations for performance-critical scenarios
var staticRating = new BeepStarRating
{
    StarCount = 5,
    EnableAnimations = false,      // Disable animations
    UseGlowEffect = false,         // Disable glow for better performance
    StarSize = 20
};

Theming

BeepStarRating automatically applies theme colors for consistent appearance:

var themedRating = new BeepStarRating
{
    StarCount = 5,
    Theme = "DarkTheme"
};

// Theme colors are automatically applied:
// - FilledStarColor uses StarRatingFillColor or PrimaryColor
// - EmptyStarColor uses StarRatingBackColor or light gray
// - HoverStarColor uses StarRatingHoverForeColor or AccentColor
// - StarBorderColor uses StarRatingBorderColor
// - LabelColor uses PrimaryTextColor

// Override specific colors while keeping theme integration
var customRating = new BeepStarRating
{
    Theme = "LightTheme",
    FilledStarColor = Color.Crimson,     // Custom fill color
    HoverStarColor = Color.Pink,         // Custom hover color
    // Other colors will use theme defaults
};

Best Practices

🎯 User Experience

• Clear feedback: Always provide immediate visual feedback when ratings change
• Consistent sizing: Use consistent star sizes across your application
• Appropriate scale: Use 5-star ratings for most scenarios, 3-star for simple feedback
• Labels when needed: Add labels for complex rating systems with multiple criteria
• Toggle functionality: Allow users to clear ratings by clicking the same star again

🎨 Visual Design

• Color meaning: Use warm colors (gold, orange) for positive ratings
• Size appropriateness: Larger stars for primary ratings, smaller for categories
• Spacing consistency: Maintain consistent spacing between stars
• Theme integration: Use theme colors for better integration
• Contrast: Ensure sufficient contrast between filled and empty stars

⚡ Performance

• Animation control: Disable animations in performance-critical scenarios
• Glow effects: Use glow effects sparingly in complex layouts
• Event handling: Avoid heavy operations in RatingChanged event handlers
• Resource cleanup: Properly dispose of custom fonts and graphics resources
• Batch updates: Update multiple ratings together when possible

♿ Accessibility

• Keyboard support: Consider adding keyboard navigation support
• Screen reader: Use appropriate accessibility labels
• High contrast: Ensure sufficient contrast in star colors
• Clear indication: Make selected states clearly visible
• Alternative input: Provide alternative ways to set ratings for accessibility

📊 Data Management

• Validation: Validate rating values before saving
• Default states: Handle unrated (0) states appropriately
• Data binding: Use proper data binding for dynamic rating display
• Persistence: Save rating changes immediately or provide clear save indicators